![](/img/trans.png)
[英]How to set image in StackLayout as background using xamarin?
[英]How to expand image like a background from url on stacklayout using xamarin
我想设置 url 中的图像作为背景,但是当我使用填充和扩展此属性时不起作用。
<Frame
BorderColor="Black"
CornerRadius="10"
HasShadow="True"
BackgroundColor="Transparent">
<StackLayout>
<Image x:Name="backgroundImage"
Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<Label Text="Current Data"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
TextTransform="Uppercase"
FontSize="20"/>
<Grid BackgroundColor="Transparent"
Padding="0,20,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Clouds"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="0"
FontSize="9"/>
<Label Text="W.Speed"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="1"
FontSize="9"/>
<Label Text="Humidity"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="2"
FontSize="9"/>
<Label Text="Pressure"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="3"
FontSize="9"/>
<Label Text="Chance"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="4"
FontSize="9"/>
<Label Text="Rain"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="5"
FontSize="9"/>
<Label Text="Snow"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="6"
FontSize="9"/>
<Image x:Name="IconClouds"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="0"/>
<Image x:Name="IconWindSpeed"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="1"/>
<Image x:Name="IconHumidity"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="2"/>
<Image x:Name="IconPressure"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="3"/>
<Image x:Name="IconChanceOfRain"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="4"/>
<Image x:Name="IconRainValue"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="5"/>
<Image x:Name="IconSnowValue"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="6"/>
<Label Text="{Binding WeatherDataCurrent.Clouds.All, StringFormat='{0:0}%'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="0"
FontSize="9"/>
<Label Text="{Binding WeatherDataCurrent.Wind.Speed, StringFormat='{0:0}m/s'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="1"
FontSize="9"/>
<Label Text="{Binding WeatherDataCurrent.Main.Humidity, StringFormat='{0:0}%'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="2"
FontSize="9"/>
<Label Text="{Binding WeatherDataCurrent.Main.Pressure, StringFormat='{0:0}hPa'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="3"
FontSize="9"/>
<Label x:Name="ChanceOfRainLbl"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="4"
FontSize="9"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].RainForecast.RainForecastValue, StringFormat='{0}mm'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="5"
FontSize="9"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].SnowForecast.SnowForecastValue, StringFormat='{0}mm'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="2"
Grid.Column="6"
FontSize="9"/>
</Grid>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WeatherForecast[0].DescriptionForecast}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
TextTransform="Uppercase"
FontSize="20"/>
<Image x:Name="IconCurrentTemp"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<Label Text="{Binding WeatherDataCurrent.Title}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="15"/>
<Label Text="{Binding WeatherDataCurrent.Sys.Country}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="15"/>
<Label Text="{Binding WeatherDataCurrent.Main.Temperature, StringFormat='{0:0}°C'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="40"/>
<Label x:Name="HighLowTemperature"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="15"/>
<Image x:Name="IconFeelsLike"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<Label x:Name="FeelsLike"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="15"/>
</StackLayout>
</Frame>
有没有办法在 Stacklayout 上设置这个图像?
我尝试将封闭标签放在封闭标签之前,但这不起作用。
我怎样才能把图片作为背景?
我有很多需要背景的 Stacklayout。
您可以使用RelativeLayout
而不是StackLayout
并首先添加图像。
<Frame
BackgroundColor="Transparent"
BorderColor="Black"
CornerRadius="10"
HasShadow="True">
<RelativeLayout>
<Image
Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.5}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg" />
<StackLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
<!--<Image
x:Name="backgroundImage"
Aspect="AspectFill"
Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg" />-->
<Label
FontSize="20"
HorizontalTextAlignment="Center"
Style="{StaticResource labelStyle}"
Text="Current Data"
TextTransform="Uppercase" />
........
........
........
</StackLayout>
</RelativeLayout>
</Frame>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.