如何使用图像背景将 StackLayout 填充到末尾并使用 xamarin 删除网格之间的间距
[英]How to fill StackLayout to the end with image background and remove spacing between grid using xamarin
问题描述
I want to stretch a picture of the whole StackLayout but it stretches to the middle.
我想拉伸整个 StackLayout 的图片，但它会拉伸到中间。 I also want to reduce the distance between the rows and columns in the grid.我还想减少网格中行和列之间的距离。 My code:我的代码：
<Frame
BorderColor="White"
Margin="10,0,10,0"
CornerRadius="10"
HasShadow="True"
BackgroundColor="Transparent">
<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>
<Label x:Name="DateTimeForecast1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
VerticalOptions="Center"
FontSize="14"/>
<Label x:Name="DateTimeForecast2"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="14"/>
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="IconForecast11"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="0"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WeatherForecast[0].DescriptionForecast}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="0"
FontSize="14"/>
<Image x:Name="IconForecast12"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="1"/>
<Label x:Name="AvgTempForecastDay1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="1"
FontSize="14"/>
<Image x:Name="IconForecast13"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="2"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindForecastValue, StringFormat='{0:0}m/s'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="2"
FontSize="14"/>
<Image x:Name="IconForecast14"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="3"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].CloudsForecast.CloudsForecastValue, StringFormat='{0:0}%'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="3"
FontSize="14"/>
<Image x:Name="IconForecast15"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="4"/>
<Label x:Name="ChanceOfRainForecast1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="4"
FontSize="14"/>
<Image x:Name="IconForecast5Days1"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="0"/>
<Image x:Name="IconForecast5Days2"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="1"/>
<Image x:Name="IconForecast5Days3"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="2"/>
<Image x:Name="IconForecast5Days4"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="3"/>
<Image x:Name="IconForecast5Days5"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="4"/>
<Label Text="Feels like"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="0"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.FeelsLikeForecast, StringFormat='{0:0}°C'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="0"
FontSize="14"/>
<Label Text="Min °C"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="1"
FontSize="14"/>
<Label x:Name="MinTempForecastDay1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="1"
FontSize="14"/>
<Label Text="Max °C"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="2"
FontSize="14"/>
<Label x:Name="MaxTempForecastDay1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="2"
FontSize="14"/>
<Label Text="Rain"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="3"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].RainForecast.RainForecastValue, StringFormat='{0}mm'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="3"
FontSize="14"/>
<Label Text="Snow"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="4"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].SnowForecast.SnowForecastValue, StringFormat='{0}mm'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="4"
FontSize="14"/>
<Image x:Name="IconForecast5Days26"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="0"/>
<Image x:Name="IconForecast5Days27"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="1"/>
<Image x:Name="IconForecast5Days28"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="2"/>
<Image x:Name="IconForecast5Days29"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="3"/>
<Image x:Name="IconForecast5Days30"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="4"/>
<Label Text="Humidity"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="0"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.HumidityForecast, StringFormat='{0:0}%'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="0"
FontSize="14"/>
<Label Text="Pressure"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="1"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.PressureForecast, StringFormat='{0:0}mb'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="1"
FontSize="14"/>
<Label Text="Ground"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="2"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.PressureGroundLevelForecast, StringFormat='{0:0}mb'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="2"
FontSize="14"/>
<Label Text="Sea Level"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="3"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.SeaLevelForecast, StringFormat='{0:0}mb'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="3"
FontSize="14"/>
<Label Text="Direction"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="4"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindDirectionForecastValue, StringFormat='{0:0}°'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="4"
FontSize="14"/>
</Grid>
</StackLayout>
</RelativeLayout>
</Frame>
With this code the image itself is stretched to the middle of the StackLayout.使用此代码，图像本身被拉伸到 StackLayout 的中间。 I will attach a screenshot:我将附上截图：
It also makes an ugly impression on me that there is a huge distance between the rows and columns themselves.行和列本身之间的距离也很大，这也给我留下了一个难看的印象。 Can you give an example of how to reduce the distance between the lines and how to stretch the picture of the whole StackLayout能否举个例子说明如何减少行间距以及如何拉伸整个StackLayout的图片
2 个解决方案
解决方案1
1 已采纳 2021-04-13 12:31:31
I want to stretch a picture of the whole StackLayout but it stretches to the middle.
Set the image's height same as the parent layout.将图像的高度设置为与父布局相同。
<Image Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg" />
I also want to reduce the distance between the rows and columns in the grid.
Set RowDefinition.Height as auto , * will occupy the whole space with all rows.将RowDefinition.Height设置为auto ， *将占据所有行的整个空间。
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
解决方案2
0 2021-04-13 14:49:52
As Cole mentioned before, use "auto" instead of "*" and maybe more rows will help you to achieve what youre looking for.正如 Cole 之前提到的，使用“auto”而不是“*”，也许更多的行会帮助你实现你想要的。
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
...
</Grid.RowDefinitions>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 xamarin 将 StackLayout 中的图像设置为背景？ - How to set image in StackLayout as background using xamarin?
如何在Xamarin的stackLayout中填充图像全屏？ - how to Fill Image fullscreen in stackLayout in Xamarin?
如何在stacklayout xamarin forms pcl上填充图像 - how to fill image on stacklayout xamarin forms pcl
如何使用 xamarin 在 stacklayout 上从 url 像背景一样扩展图像 - How to expand image like a background from url on stacklayout using xamarin
如何使用 xamarin 在 iOS 项目中的堆栈布局上显示背景图像 - How to display Image for background on stacklayout in iOS project using xamarin
如何用图像填充 Stacklayout - How to Fill Stacklayout with Image
如何使图像适合堆栈布局或网格？ - How to fit an image in a stacklayout or grid?
Xamarin网格和StackLayout - Xamarin grid and StackLayout
如何删除 StackLayout 中的空白空间 - Xamarin - How to remove empty space in StackLayout - Xamarin
Xamarin-图像溢出StackLayout - Xamarin - Image overflowing StackLayout
相关标签