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

【问题标题】：Xamarin forms page layout with relative layout and background imageXamarin 使用相对布局和背景图像形成页面布局
【发布时间】：2020-01-21 11:09:09
【问题描述】：

我是 Xamarin 表单和 Xaml 的新手，尝试设计带有背景图像的页面布局，我发现使用相对布局，我可以使用 aspect 属性将图像扩展到整个屏幕。但是，当我在 RelativeLayout 中的图像之后放置网格或布局时，它不会扩展到整个区域，它只会覆盖给定的内容。

我尝试使用相对布局来实现这一点。我正在使用带有 aspect 属性的 Image 标签，然后在图像顶部使用我的 stacklayout。

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

我希望按钮覆盖整个宽度并垂直居中对齐。

【问题讨论】：

标签： xaml xamarin

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：