image - 如何在 Xamarin Forms 中正确使用网格中多行上的图像

问题描述

我正在尝试在我的 Xamarin Forms 应用程序中创建一个自定义的、材质样式的卡片单元。我的外观很差，但我的图像有问题。我希望它接触顶部和底部边缘，左侧边缘，并且是正方形的形状，同时保持纵横比。但现在，我得到的只是这个不会打球的小图像：

（我不得不用油漆覆盖公司图像，但相信我，它们的大小差不多）。

这是我真正想要的（再次，请原谅油漆工作）

我在网格视图中使用图像，在第一列并跨越所有 4 行。我已经尝试了所有我曾经理解的 LayoutOptions，但现在我在猜测自己。我还尝试将图像放在 StackLayout 中，因为我认为您可以扩展 Stacklayout 的子级，但仍然没有骰子。这是我现在简化的 Xaml：

<Frame CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">

  <Grid BackgroundColor="White" >
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*"  />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" 
                 HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
      <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/>
    </StackLayout>

    <Label Grid.Row="0" Grid.Column="1"
         Text="{Binding Favourite.FavKindName}"
         FontSize="{DynamicResource InfoLargerTextFontSize}"/>

    <Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
           VerticalOptions="CenterAndExpand" >
      <Image.GestureRecognizers>
        <TapGestureRecognizer />
      </Image.GestureRecognizers>
    </Image>

  </Grid>
</Frame>

更重要的是，你可能会说我对右边的电话图标一无所知。我希望它占据中心并具有适合卡片单元的按钮尺寸。

我花了几个小时试图弄清楚这一点。我究竟做错了什么？

标签： imagexamarinxamarin.formsgridstacklayout

Frame默认Padding值为 20。这就是为什么你在框架内有这些边距。

<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
    CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">

image - 如何在 Xamarin Forms 中正确使用网格中多行上的图像

问题描述

解决方案

推荐阅读