Question

如何将自身适应的对象作为对象stackLayout的背景？

<ContentPage.Content>
<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="1*"></RowDefinition>
    <RowDefinition Height="1*"></RowDefinition>
  </Grid.RowDefinitions>
  <StackLayout BackgroundColor="#FF1100" Grid.Row="0" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <Image Aspect="Fill" x:Name="backgroundImage"
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
  </StackLayout>
  <StackLayout BackgroundColor="#FF7700" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <!--<Image Aspect="Fill" x:Name="backgroundImage"
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>-->
  </StackLayout>
</Grid>

Answer 1

我认为最好的办法是使用RelativeLayout，然后添加一个Image和一个StackLayout。首先添加图像，使其在背景中，例如：

<RelativeLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Silver">
    <Image 
        Source="MyImage.png"
        Aspect="Fill" <!-- Stretches the image to fill, use AspectFill instead of Fill to enlarge the image without stretching the image -->
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" 
        />
    <StackLayout
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" >
        <Label
            Text="Image Stack Layout in Relative Layout"
            TextColor="Lime" />
        <Button 
            Text="I'm a button" 
            TextColor="Lime" />
    </StackLayout>
</RelativeLayout>

Answer 2

如果要放置适合自己的图像作为对象StackLayout的背景，则可以按照以下说明使用Grid控件：

将元素放入网格内
不要为Grid内部的任何元素指定Grid.Row或Grid.Column

结果：网格中的元素将重叠。

在这种情况下，我使用以下代码：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Your.Class">
    <StackLayout>
        <Grid VerticalOptions="FillAndExpand">
            <Image Source="your_image.png" Aspect="AspectFit" />
            <StackLayout Padding="20">
                <Label Text="All your page content here :)" />
            </StackLayout>
        </Grid>
    </StackLayout>
</ContentPage>

如何填写stacklayout xamarin表格pcl上的图像

2 个答案: