堆栈内存溢出
  繁体   English   中英

如何使用图像背景将 StackLayout 填充到末尾并使用 xamarin 删除网格之间的间距

[英]How to fill StackLayout to the end with image background and remove spacing between grid using xamarin

 原文  2021-04-13 10:00:39  3   2    c#/ 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的图片

2 个解决方案

解决方案1
 1 已采纳  2021-04-13 12:31:31

我想拉伸整个 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>

解决方案2
 0  2021-04-13 14:49:52

正如 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 中的图像设置为背景？ 如何在Xamarin的stackLayout中填充图像全屏？ 如何在stacklayout xamarin forms pcl上填充图像 如何使用 xamarin 在 stacklayout 上从 url 像背景一样扩展图像 如何使用 xamarin 在 iOS 项目中的堆栈布局上显示背景图像 如何用图像填充 Stacklayout 如何使图像适合堆栈布局或网格？ Xamarin网格和StackLayout 如何删除 StackLayout 中的空白空间 - Xamarin Xamarin-图像溢出StackLayout
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM