c# - 如何使用图像背景将 StackLayout 填充到末尾并使用 xamarin 删除网格之间的间距
问题描述
我想拉伸整个 StackLayout 的图片,但它会拉伸到中间。我还想减少网格中行和列之间的距离。我的代码:
<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>
使用此代码,图像本身被拉伸到 StackLayout 的中间。我将附上截图:
行和列本身之间的距离也很大,这也给我留下了一个难看的印象。能否举个例子说明如何减少行间距以及如何拉伸整个StackLayout的图片
解决方案
我想拉伸整个 StackLayout 的图片,但它会拉伸到中间。
将图像的高度设置为与父布局相同。
<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" />
我还想减少网格中行和列之间的距离。我的代码:
设置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>
推荐阅读
- angular - 不支持管道运算符:Angular [Typescript] - rxjs - combineLatest
- c++ - 返回类型为 struct 的函数在其被调用时不返回任何内容
- java - 将 if 语句直接实现到 Arraylist
- svelte - 如何避免在 Svelte 中冻结整个应用程序的异常?
- asp.net - 在 React Native 中使用 ASP.NET SignalR
- sql - 如何在flutter中使用sqlflite检索特定数据
- elasticsearch - 精确子串匹配 | 弹性搜索
- java - 创建一个构造函数,将参数中的值复制到一个名为 data 的数组中
- java - 需要自定义arraylist值如下
- hdfs - CAP 定理如何应用于 HDFS?