如何从滚动视图中删除两帧之间的距离

如何解决如何从滚动视图中删除两帧之间的距离

我创建了一个水平 ScrollView 并在其中创建了一个框架。我为每一列创建了第二个框架但是框架和每列的框架之间有很大的距离。 如何去除主框架与每列框架之间的距离？

代码：

             <Frame 
                   BorderColor="Black"
                   CornerRadius="10"
                   HasShadow="True"
                   BackgroundColor="Transparent">
            <ScrollView 
                        BackgroundColor="Transparent"
                        Orientation="Horizontal"
                        HorizontalOptions="FillAndExpand">
                        
                       
                        <StackLayout 
                                 HorizontalOptions="FillAndExpand"
                                 VerticalOptions="FillAndExpand">

                            <Grid BackgroundColor="Transparent">
                                <Grid.RowDeFinitions>
                                    <RowDeFinition Height="*" />
                                    <RowDeFinition Height="*" />
                                    <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>

                              <Frame Grid.Column="0"
                                     BorderColor="black"
                                     BackgroundColor="Transparent">
                             <StackLayout>
                                 
                                <Label x:Name="DayForecast1"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="0"
                                           Grid.Column="0"
                                           TextColor="#eeff00"/>

                                <Label x:Name="TempDayForecast1"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="1"
                                           Grid.Column="0"
                                           TextColor="#eeff00"/>

                                <Label Text="Min °C"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="2"
                                           Grid.Column="0"
                                           TextColor="#0025f7"/>

                                <Label x:Name="MinTempDayForecast1"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="3"
                                           Grid.Column="0"
                                           TextColor="#0025f7"/>

                                <Label Text="Max °C"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="4"
                                           Grid.Column="0"
                                           TextColor="#ff0000"/>

                                <Label x:Name="MaxTempDayForecast1"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="5"
                                           Grid.Column="0"
                                           TextColor="#ff0000"/>

                                <Image x:Name="IconChanceOf5DaysForecast1"
                                       VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       Grid.Row="6"
                                       Grid.Column="0"/>

                                <Label x:Name="ChanceOf5DaysForecast1"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="7"
                                           Grid.Column="0"/>

                                <Image x:Name="IconWind5DaysForecast1"
                                       VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       Grid.Row="8"
                                       Grid.Column="0"/>

                                <Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindForecastValue,StringFormat='{0:0}m/s'}"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="9"
                                           Grid.Column="0"/>
                                     
                              </StackLayout>
                                 </Frame>

                                <Frame Grid.Column="1"
                                     BorderColor="black"
                                     BackgroundColor="Transparent">
                             <StackLayout>
                                <Label x:Name="DayForecast2"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="0"
                                           Grid.Column="1"
                                           TextColor="#eeff00"/>

                                <Label x:Name="TempDayForecast2"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="1"
                                           Grid.Column="1"
                                           TextColor="#eeff00"/>

                                <Label Text="Min °C"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="2"
                                           Grid.Column="1"
                                           TextColor="#0025f7"/>

                                <Label x:Name="MinTempDayForecast2"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="3"
                                           Grid.Column="1"
                                           TextColor="#0025f7"/>

                                <Label Text="Max °C"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="4"
                                           Grid.Column="1"
                                           TextColor="#ff0000"/>

                                <Label x:Name="MaxTempDayForecast2"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="5"
                                           Grid.Column="1"
                                           TextColor="#ff0000"/>

                                <Image x:Name="IconChanceOf5DaysForecast2"
                                       VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       Grid.Row="6"
                                       Grid.Column="1"/>

                                <Label x:Name="ChanceOf5DaysForecast2"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="7"
                                           Grid.Column="1"/>

                                <Image x:Name="IconWind5DaysForecast2"
                                       VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       Grid.Row="8"
                                       Grid.Column="1"/>

                                <Label Text="{Binding WeatherDataForecastHourly.List[8].WindForecast.WindForecastValue,StringFormat='{0:0}m/s'}"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Center"
                                           VerticalTextAlignment="Center"
                                           Style="{StaticResource labelStyle}"
                                           FontAttributes="Bold" 
                                           Grid.Row="9"
                                           Grid.Column="1"/>
                                 </StackLayout>
                                 </Frame>

                </StackLayout>
                </ScrollView>
                </Frame> 

我为 5 列创建了 10 行，但是当我放置内部框架时，出现了很大的距离。

解决方法

如何去除主框架与每列框架之间的距离？

从 Grid.ColumnSpacing Property 开始，此网格布局中的列之间的空间。默认为 6。

因此您可以为网格设置 ColumnSpacing="0"。它会正常工作。

 <Grid BackgroundColor="Transparent" ColumnSpacing="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                            <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>

,

来自docs

Frame 的默认填充为 20。

StackLayout 也有一个默认的间距值。您将需要使用填充、边距和间距值来获得您想要的效果