Xaml，Xamarin.Forms：使图像在宽度上适合网格容器并将其居中答案

【问题标题】：Xaml, Xamarin.Forms: Make image fit grid container in width and center itXaml，Xamarin.Forms：使图像在宽度上适合网格容器并将其居中
【发布时间】：2020-07-31 21:32:12
【问题描述】：

所以我在网格和带有颜色的 boxview 的帮助下制定了我的应用程序布局。

现在我想在底部的黄色框中放置一个按钮。这个按钮应该完全填充黄色框的宽度并相应地调整其高度以不破坏其纵横比。很简单，对吧？结果如下：

因此，按钮位于正确的位置，但完全溢出到下一列。此外，当我在 Android 上渲染该应用程序时，按钮太小了。（此预览来自 Android 模拟器，但在 iOS 模拟器上看起来相同）

这是我的代码：

    <Grid Grid.Row="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <BoxView BackgroundColor="Green" Grid.Column="0"></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Column="1"></BoxView>
        <BoxView BackgroundColor="Blue" Grid.Column="2"></BoxView>

        <StackLayout
             Orientation="Horizontal" 
             Grid.Column="1"
             HorizontalOptions="Center"
             VerticalOptions="Center">

            <ImageButton
            Aspect="AspectFill"
            x:Name="btn_mymatches_mainmenu"
            Source="btn_emptydummy.png"/>
        </StackLayout>

    </Grid>

我在这里错过了什么？

谢谢！

【问题讨论】：

标签： android ios xaml xamarin.forms

【解决方案1】：

我使用网格内的网格解决了这个问题。如果你使用百分比，它看起来很完美:)

<!--MainGrid-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="0.6*" />
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <BoxView BackgroundColor="Green" Grid.Row="0"></BoxView>
        <BoxView BackgroundColor="Yellow" Grid.Row="1"></BoxView>
        <BoxView BackgroundColor="Blue" Grid.Row="2"></BoxView>



        <!--Grid for Button-->
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <ImageButton
                     Aspect="AspectFit"
                     Grid.Column="1"
                     x:Name="btn_mymatches_mainmenu"
                     Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
            <Label
                    Grid.Column="1"
                    FontFamily="arial"
                    TextColor="#272727"
                    Text="Meine Matches" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center"/>

        </Grid>


        <!--Top Level Grid for Notifybutton-->
        <Grid Grid.Row="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4.5*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Image
                Aspect="AspectFit"
                Grid.Column="1"
                Grid.Row="1"
                Source="img_notify.png" />
            <Label
                    x:Name="label_notify_nr"
                    Grid.Column="1"
                    Grid.Row="1"
                    FontSize="16"
                    FontFamily="arial"
                    TextColor="#ffff"
                    Text="1" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center"/>

        </Grid>

    </Grid>

结果：

【讨论】：