Xamarin使用相对布局和背景图像形成页面布局

Question

我对Xamarin窗体和Xaml很陌生，试图设计一个带有背景图像的页面布局，我发现使用相对布局，可以使用方面属性将图像扩展到整个屏幕。但是，当我在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>