如何使用 xamarin 将 StackLayout 中的图像设置为背景？

Question

我想像背景一样拉伸图像，但我不想设置宽度和高度来拉伸它。 还想要位于图片内部的按钮吗？

如何用这张图片填充整个堆栈布局？

代码：

<StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
        <Image Source="SplashScreen.png" HeightRequest="100" Opacity="1.0"
          RelativeLayout.WidthConstraint=
            "{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint=
            "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
        <Button Text="Хидрология" TextColor="White" BackgroundColor="#2196F3" Clicked="NavigateButtonHydro_OnClicked">
        </Button>
    </StackLayout>

Answer 1

在您的 ContentPage 上设置这样的背景：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
 .
 .
 .
 BackgroundImageSource="SplashScreen.png"/>

Answer 2

您可以使用RelativeLayout 。

<StackLayout BackgroundColor="White" Padding="60" VerticalOptions="Center">
        <RelativeLayout>
            <Image Source="image.jpeg" HeightRequest="100" Opacity="1.0" Aspect="AspectFill"
      RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
      RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>

            <StackLayout Padding="60" VerticalOptions="Center">
                <Button Text="Хидрология" TextColor="White" BackgroundColor="#2196F3" Clicked="NavigateButtonHydro_OnClicked">
                </Button>
            </StackLayout>
         
        </RelativeLayout>
       
    </StackLayout>

Answer 3

只需将图像放入 Grid 中，如下所示：

<Grid>
  <Image Source="SplashScreen.png" Aspect="AspectFill"/>
  <StackLayout Padding="60" VerticalOptions="Center">
       <Button Text="Хидрология" TextColor="White" BackgroundColor="#2196F3" 
        Clicked="NavigateButtonHydro_OnClicked">
       </Button>
  </StackLayout>
</Grid>