xaml - XAML:图像未正确居中
问题描述
在我的应用程序中,我需要在ListView
标题中垂直和水平居中图像。
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<StackLayout BackgroundColor="Black" HeightRequest="100">
<Image HeightRequest="80" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" Source="Assets\logo.png" />
</StackLayout>
</ListView.Header>
</ListView>
我不明白为什么图像下方的黑色空间高于图像上方的黑色空间。我尝试了 aGrid
而不是StackLayout
with row heights 10
, Auto
,10
结果相同。我该如何解决?
解决方案
我不明白为什么图像下方的黑色空间高于图像上方的黑色空间。
我无法通过StackLayout
用作根面板来重现该问题。图像的上边距和下边距正确。可能是运行时工具的颜色和背景颜色一样,是视觉上的错误。所以我将bg颜色修改为红色。要关闭运行时工具,您可以参考此链接。
<StackLayout BackgroundColor="Black" HeightRequest="100">
<Image HeightRequest="80" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" Source="Assets\logo.png" />
</StackLayout>
我尝试了行高为 10、Auto、10 的 Grid 而不是 StackLayout,结果相同。我该如何解决?
如果您使用 Grid 作为根面板,则需要注意RowSpacing
属性。因为这个属性的默认值为6,会影响布局。请将根网格的 RowSpacing 设置为 0,如下所示。
<Grid BackgroundColor="Red" HeightRequest="100" RowSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<BoxView Grid.Row="0" BackgroundColor="Black" VerticalOptions="FillAndExpand" />
<Image Grid.Row="1" HeightRequest="80" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" Source="Assets\bc1.jpg" />
<BoxView Grid.Row="2" BackgroundColor="Blue" VerticalOptions="FillAndExpand" />
</Grid>
推荐阅读
- ssl - Kubernetes TLS 秘密证书过期
- python - 使用 docker 更改 httpd.conf 文件中的参数
- python - 从 n 个相等的项目中挑选与最小数字相关的项目
- html - 滚动行为效果
- python - 如何在 pandas 中使用 vlookup 功能来计算这个?
- angular - 单元测试不覆盖带有 swithcmap 和 tap 的方法的代码
- r - 有条件地逐列替换领先和落后的 NA
- authentication - 如何以编程方式关闭谷歌一键登录 iframe?
- java - 对象映射器给出异常:com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException:无法识别的字段
- python - 如何从字符串中删除不可打印的字符?