[英]how to fill image on stacklayout xamarin forms pcl
how can I put an image that adapts itself as the background of an object stackLayout?如何将自适应图像作为对象 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>
I think your best bet is to use a RelativeLayout and then add an Image and a StackLayout.我认为你最好的选择是使用一个相对布局,然后添加一个图像和一个 StackLayout。 Add the image first so it is in the background, eg:
首先添加图像,使其位于背景中,例如:
<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>
If you want to put an image that adapts itself as the background of an object StackLayout you can use the Grid control following these instructions:如果你想把一个适合自己的图像作为对象 StackLayout 的背景,你可以按照以下说明使用 Grid 控件:
Result: The elements within the Grid will overlap.结果:网格内的元素将重叠。
I use the code below for this case:对于这种情况,我使用以下代码:
<?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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.