Question

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

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

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

Xamarin形成具有相对布局和背景图像的页面布局

2 个答案: