XAML:图像未正确居中
Posted
技术标签:
【中文标题】XAML:图像未正确居中【英文标题】:XAML: An image is not centered correctly 【发布时间】:2019-05-18 07:23:12 【问题描述】:在我的应用程序中,我需要在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>
我不明白为什么图像下方的黑色空间高于图像上方的黑色空间。我尝试了Grid
,而不是行高10
、Auto
、10
的StackLayout
,结果相同。我该如何解决?
【问题讨论】:
您在StackLayout
上寻找VerticalContentAlignment
/ HorizontalContentAlignment
吗?
一张截图值一千字……
【参考方案1】:
我不明白为什么图片下方的黑色空间高于图片上方的黑色空间。
我无法通过使用StackLayout
作为根面板来重现该问题。图像的上边距和下边距正确。可能是运行时工具的颜色和背景颜色一样,是视觉上的错误。所以我将bg颜色修改为红色。要关闭运行时工具,您可以参考此link。
<StackLayout BackgroundColor="Black" HeightRequest="100">
<Image HeightRequest="80" HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" Source="Assets\logo.png" />
</StackLayout>
我尝试了 Grid 而不是 StackLayout,行高为 10、Auto、10,结果相同。我该如何解决?
如果你使用 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>
【讨论】:
【参考方案2】:可能是图像本身在底部有阴影效果。尝试使用不同的图片。
【讨论】:
是的,那是底部的注册标记,我没有注意到。以上是关于XAML:图像未正确居中的主要内容,如果未能解决你的问题,请参考以下文章
当我的 UIScrollView 缩放图像时,如何使框架正确居中?
导航栏中的徽标在 Internet Explorer 中未正确居中