Xaml, Xamarin.Forms: подгоните изображение под размер контейнера сетки и отцентрируйте его

Question

, поэтому я разработал макет своих приложений с помощью сетки и ящиков с цветами.

Теперь я хочу поместить кнопку в желтое поле внизу. Эта кнопка должна заполнить желтое поле по ширине и отрегулировать его высоту соответственно, чтобы НЕ разрушить его соотношение сторон. Просто, правда? Вот результат:

Таким образом, кнопка находится на правильном месте, но полностью перетекает в следующий столбец. Кроме того, когда я рендерим это приложение на 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>

Что мне здесь не хватает?

Спасибо!

Answer 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>

РЕЗУЛЬТАТ: