如何在 Xamarin Forms 中正确使用网格中多行的图像
How to use an Image on multiple rows in a Grid properly in Xamarin Forms
我正在尝试在我的 Xamarin Forms 应用程序中创建自定义 material 样式的卡片单元格。我的外观很差,但其中的图像有问题。我希望它接触顶部和底部边缘、左侧边缘,并成为正方形,同时保持纵横比。但是现在,我得到的只是这个不会玩球的小图像:
(我不得不用油漆覆盖公司图片,但请相信我,它们的尺寸差不多)。
这是我真正想要的(再次请原谅油漆工作)
我在网格视图中使用图像,在第一列并跨越所有 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>
此外,您可能会说我对右边的 phone 图标一无所知。我希望它占据中心,并且对于卡单元来说按钮大小合适。
我花了好几个小时想弄清楚这个问题。我做错了什么?
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">
我正在尝试在我的 Xamarin Forms 应用程序中创建自定义 material 样式的卡片单元格。我的外观很差,但其中的图像有问题。我希望它接触顶部和底部边缘、左侧边缘,并成为正方形,同时保持纵横比。但是现在,我得到的只是这个不会玩球的小图像:
(我不得不用油漆覆盖公司图片,但请相信我,它们的尺寸差不多)。
这是我真正想要的(再次请原谅油漆工作)
我在网格视图中使用图像,在第一列并跨越所有 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>
此外,您可能会说我对右边的 phone 图标一无所知。我希望它占据中心,并且对于卡单元来说按钮大小合适。
我花了好几个小时想弄清楚这个问题。我做错了什么?
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">