如何在 Xamarin 的一行内的每一列中居中图像? [英] How to Center an image in each column inside one row in Xamarin?

问题描述

我有这个代码:

<预><代码><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"Horizo​​ntalOptions="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"Horizo​​ntalOptions="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"Horizo​​ntalOptions="CenterAndExpand"来源=狗.jpg"VerticalOptions="CenterAndExpand"WidthRequest="200"/></StackLayout><堆栈布局Grid.Row="0"Grid.Column="1"背景色=口音"><图像方面=AspectFit"高度请求 =125"Horizo​​ntalOptions="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 的一行内的每一列中居中图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！