Xamarin формирует макет страницы с относительным макетом и фоновым изображением

Question

Я новичок в формах Xamarin и Xaml, пытаясь спроектировать макет страницы с фоновым изображением, и обнаружил, что с помощью относительного макета я могу развернуть изображение на весь экран, используя свойство aspect.Однако, когда я помещаю сетку или макет после изображения внутри RelativeLayout, он не распространяется на всю область, он охватывает только данный контент.

Я пытался добиться этого, используя относительное расположение.Я использую тег Image со свойством аспекта, а затем свой стек в верхней части изображения.

 <RelativeLayout>
                <Image Aspect="AspectFill" Source="c1.jpg" />
                <StackLayout>
                    <Button Text="Meha" TextColor="White"/>
                </StackLayout>
 </RelativeLayout>

Я хочу, чтобы кнопка покрывала всю ширину и выравнивала ее по центру.

Answer 1

Вот как я обычно решаю эту ситуацию:

        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
            <Image  Source="c1.jpg" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center">
                <Button Text="Meha" TextColor="Black" HorizontalOptions="FillAndExpand"/>
            </StackLayout>
        </Grid>

Answer 2

Другой способ, которым вы можете попытаться, - это использовать сеточную стратегию вместо относительной компоновки.как этот пример страницы приветствия, которую я использую в своем приложении с изображением bg:

<Grid
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand">

        <!---BG IMAGE -->
        <Image
            Source="yourimage"
            Aspect="AspectFill"
            Opacity="0.5"
        />

        <Grid>

            <Grid.RowDefinitions>
                <RowDefinition
                    Height="Auto"/>
                <RowDefinition
                    Height="Auto"/>
                <RowDefinition
                    Height="*"/>

            </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="*" />
                <ColumnDefinition
                    Width="100" />
                <ColumnDefinition
                    Width="*" />
            </Grid.ColumnDefinitions>


            <!--TEXT-->
            <StackLayout
                Grid.Row="1"
                Grid.ColumnSpan="3"
                Spacing="10"
                Orientation="Vertical"
                VerticalOptions="Center"
                TranslationY="-20"
                Padding="20">

                <Label
                    LineBreakMode="WordWrap"
                    Text="Welcome!"
                    TextColor="White"
                    VerticalTextAlignment="Center"
                    FontAttributes="Bold"
                    >
                        <Label.FontSize> 
                        <OnIdiom
                            x:TypeArguments="x:Double"
                            Phone="26"
                            Tablet="36" />
                        </Label.FontSize>
                </Label>
                         <Setter
                    Property="HeightRequest"
                    Value="4" />
                    <Setter
                    Property="VerticalOptions"
                    Value="End" />
                    <Setter
                    Property="WidthRequest"
                    Value="40" />
                    <Setter
                    Property="BackgroundColor"
                    Value="{ DynamicResource AccentColor }"
                <!-- ACCENT LINE -->

                  <BoxView VerticalOptions= "End" 
                  HeightRequest = "4" 
                  BackgroundColor="Green" />


            </StackLayout>

        </Grid>
    </Grid>