如何在stacklayout xamarin表单pcl上填充图像

Posted 2023-04-13

【中文标题】如何在stacklayout xamarin表单pcl上填充图像

【英文标题】：how to fill image on stacklayout xamarin forms pcl

【发布时间】：2017-05-04 16:04:06

【问题描述】：

我怎样才能把一个适合自己的图像作为对象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>

【问题讨论】：

这段代码你看到了什么结果？你能分享你看到的截图并解释它是不是你想要的吗？注意* 这里的 RelativeLayout 约束无效，因为这是一个 StackLayout。

我希望结果是图像覆盖对象 stackLayout 的整个表面，无论长度或高度如何。这是可能的 ？图像不应明显撕裂。

【参考方案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>

【讨论】：

这个解决方案不会自动适应，它忽略了灰色边框。是否可以将图像拟合到表面？

您需要将图像的Aspect 属性设置为AspectFill 或Fill。 Fill 将拉伸图像以填充视图，因此纵横比将发生变化，而AspectFill 将放大图像以填充视图并剪切多余部分。我会更新我的答案。

【参考方案2】：

如果您想将一个自适应的图像作为对象 StackLayout 的背景，您可以按照以下说明使用 Grid 控件：

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

结果： Grid 中的元素会重叠。

我在这种情况下使用下面的代码：

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