微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

如何解决如何使用图像背景填充 StackLayout 到最后并使用 xamarin 删除网格之间的间距

我想拉伸整个 StackLayout 的图片，但它拉伸到中间。我还想减少网格中行和列之间的距离。 我的代码：

<Frame
                   BorderColor="White"
                   Margin="10,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">
                        <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 的中间。 我附上截图：

Screenshot of 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>
,

正如 Cole 之前提到的，使用“auto”而不是“*”，也许更多的行会帮助你实现你想要的。

<Grid.RowDefinitions>
           <RowDefinition Height="auto" />
           <RowDefinition Height="auto" />
           <RowDefinition Height="auto" />
           <RowDefinition Height="auto" />
           ...
   </Grid.RowDefinitions>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native