CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
Ben Johnson
Ben Johnson

Reputation: 985

How to remove the distance between two frames from scrollview

I created a horizontal ScrollView and in it I created a frame. I created a second frame for each column But there was a huge distance between the frame and the frame of each column. How can I remove the distance between the main frame and the frame of each column ?

The code:

             <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>

Big Distance between frames

I created 10 rows for 5 columns, but when I put the inner frames and a huge distance appeared.

Upvotes: 0

Views: 121

Answers (2)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10346

How can I remove the distance between the main frame and the frame of each column ?

From Grid.ColumnSpacing Property, the space between columns in this Grid layout. The default is 6.

So you can set ColumnSpacing="0" for Grid. It will work fine.

 <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>

Upvotes: 1

Jason
Jason

Reputation: 89092

from the docs

Frame have a default Padding of 20.

StackLayout also has a default spacing value. You will need to play with the padding, margin and spacing values to get the effect you want

Upvotes: 0

Related Questions