问题描述
我有这个代码:
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand"><Grid.RowDefinitions><RowDefinition Height="自动"/><RowDefinition Height="自动"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="自动"/></Grid.ColumnDefinitions><!-- 每个图像都应位于第 0 行和第 0 行的中心--><StackLayout Grid.Row="0" Grid.Column="0" Padding="0,18,0,0"><图片来源=男"宽度请求 =200"高度请求=165"翻译X="5"翻译Y="10"HorizontalOptions="LayoutOptions.Center"VerticalOptions="LayoutOptions.Fill"Aspect="AspectFit"/></StackLayout><StackLayout Grid.Row="0" Grid.Column="1" Padding="0,15,0,0"><图片来源="女性"宽度请求 =160"高度请求 =125"翻译X="5"翻译Y="31"HorizontalOptions="LayoutOptions.Center"VerticalOptions="LayoutOptions.Fill"Aspect="AspectFit"/></StackLayout></网格>它在我的设计器中看起来居中,但是当我在模拟器中运行代码时,它看起来并不居中.这主要是我在搜索如何做时找到的答案.我不知道我是否错过了某个属性.
我还是 Xamarin 的新手,我仍在学习它的工作原理.
如果你想让图片居中,你可以试试下面的代码.删除padding
、TranslationX
、TranslationY
,添加一列,layoutoptions
使用CenterAndExpand
代码>.为了更好的理解,我使用stacklayout
的backgroundcolor
来展示结果.您可以将 ColumnDefinition
更改为 Auto
,它也能正常工作.
<Grid.RowDefinitions><RowDefinition Height="自动"/><RowDefinition Height="自动"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="5*"/><ColumnDefinition Width="5*"/></Grid.ColumnDefinitions><!-- 每个图像都应位于第 0 行和第 0 行的中心 --><堆栈布局Grid.Row="0"Grid.Column="0"背景色=口音"><图像方面=AspectFit"高度请求=165"HorizontalOptions="CenterAndExpand"来源=狗.jpg"VerticalOptions="CenterAndExpand"WidthRequest="200"/></StackLayout><堆栈布局Grid.Row="0"Grid.Column="1"背景色=口音"><图像方面=AspectFit"高度请求 =125"HorizontalOptions="CenterAndExpand"来源=猪.jpg"VerticalOptions="CenterAndExpand"WidthRequest="160"/></StackLayout></网格>
I have this code:
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0-->
<StackLayout Grid.Row="0" Grid.Column="0" Padding="0,18,0,0">
<Image Source="male"
WidthRequest ="200"
HeightRequest="165"
TranslationX="5"
TranslationY="10"
HorizontalOptions="LayoutOptions.Center"
VerticalOptions="LayoutOptions.Fill"
Aspect="AspectFit"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="0,15,0,0">
<Image Source="female"
WidthRequest ="160"
HeightRequest="125"
TranslationX="5"
TranslationY="31"
HorizontalOptions="LayoutOptions.Center"
VerticalOptions="LayoutOptions.Fill"
Aspect="AspectFit"/>
</StackLayout>
</Grid>
It looks centered in my designer, but when I run the code in my emulator it does not look centered. This is mostly the answers that I have found when I was searching on how to do it. I dont know If I have missed a certain property.
I am still new in Xamarin and I am still learning on how this works.
If you want to center the image, you could try the code below. Delete padding
, TranslationX
, TranslationY
, add a column, and use the CenterAndExpand
for layoutoptions
. For better understanding, I use the backgroundcolor
of stacklayout
to show the results.You could change the ColumnDefinition
to Auto
, it works as well.
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0 -->
<StackLayout
Grid.Row="0"
Grid.Column="0"
BackgroundColor="Accent">
<Image
Aspect="AspectFit"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
Source="dog.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="200" />
</StackLayout>
<StackLayout
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Accent">
<Image
Aspect="AspectFit"
HeightRequest="125"
HorizontalOptions="CenterAndExpand"
Source="pig.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="160" />
</StackLayout>
</Grid>
这篇关于如何在 Xamarin 的一行内的每一列中居中图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!