question

Grime avatar image
0 Votes"
Grime asked Grime commented

Grid.ColumnDefinition Not Consistent

I have a grid within a scrollview within a grid in an XAML to display a screen layout. Is that, in itself, a problem?
Anyway... the result is close to what I expected but not exactly.
Here is the code:

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="HandsFreeNotes.View.NewOperatorPage">
    
     <ContentPage.Content>
    
         <Grid BackgroundColor="White">
             <Grid.RowDefinitions>
                 <RowDefinition Height="32"/>
                 <RowDefinition Height="50"/>
                 <RowDefinition Height="10"/>
                 <RowDefinition Height="50"/>
                 <RowDefinition Height="20"/>
                 <RowDefinition Height="*"/>
                 <RowDefinition Height="70"/>
             </Grid.RowDefinitions>
    
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="50"/>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="50"/>
             </Grid.ColumnDefinitions>
    
             <Button
                 x:Name="BackButton"
                 Text="Back"
                 Grid.Row="0"
                 Grid.Column="3"
                 TextColor="Black"
                 FontAttributes="Bold"
                 VerticalOptions="CenterAndExpand"
                 HorizontalOptions="End"
                 Margin="0,0,20,0"
                 Clicked="BackButton_Clicked"/>
    
             <Image 
                 Source="hfn256"
                 Margin="2"
                 Grid.Row="1" 
                 Grid.Column="0"
                 Grid.ColumnSpan="4"
                 HorizontalOptions="Center"
                 BackgroundColor="White"/>
    
             <Label 
                 Text="New Operator"
                 FontSize="Large"
                 TextColor="Black"
                 FontAttributes="Bold"
                 Margin="2"
                 Grid.Row="3" 
                 Grid.Column="0"
                 Grid.ColumnSpan="4"
                 HorizontalOptions="Center"
                 VerticalOptions="Center"
                 BackgroundColor="White"/>
    
             <ScrollView
                 Orientation="Vertical"
                 Grid.Row="5"
                 Grid.Column="0"
                 Grid.ColumnSpan="4">
                    
                 <Grid BackgroundColor="White">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="70"/>
                         <RowDefinition Height="70"/>
                         <RowDefinition Height="70"/>
                         <RowDefinition Height="70"/>
                         <RowDefinition Height="100"/>
                     </Grid.RowDefinitions>
                        
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto"/>
                         <ColumnDefinition Width="40"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
    
                     <Label 
                         x:Name="NameLabel"
                         Text="Name: "
                         TextColor="Black"
                         FontAttributes="Bold"
                         Grid.Row="0"
                         Grid.Column="0"
                         Margin=" 40, 20, 0, 0"
                         HorizontalOptions="Start"
                         VerticalOptions="Center"/>
    
                     <Entry
                         x:Name="NameEntry"
                         Placeholder="Enter a Name or Callsign"
                         PlaceholderColor="Gray"
                         TextColor="DarkBlue"
                         Keyboard="Plain"
                         Grid.Row="0"
                         Grid.Column="1"
                         Grid.ColumnSpan="2"
                         Margin=" 0, 20, 0, 0"
                         HorizontalOptions="Start"
                         VerticalOptions="Center"
                         WidthRequest="300"/>
    
                     <Label 
                         x:Name="PhoneLabel"
                         Text="Phone:    +"
                         TextColor="Black"
                         FontAttributes="Bold"
                         Grid.Row="1"
                         Grid.Column="0"
                         Margin=" 40, 20, 0, 0"
                         HorizontalOptions="Start"
                         VerticalOptions="Center"/>
    
                     <Entry
                         x:Name="PhoneCountryEntry"
                         Placeholder="61"
                         PlaceholderColor="Gray"
                         TextColor="DarkBlue"
                         Keyboard="Numeric"
                         Grid.Row="1"
                         Grid.Column="1"
                         Margin=" 0, 20, 0, 0"
                         HorizontalOptions="Center"
                         VerticalOptions="Center"/>
    
                     <Entry
                         x:Name="PhoneEntry"
                         Placeholder="Phone (no spaces)"
                         PlaceholderColor="Gray"
                         TextColor="DarkBlue"
                         Keyboard="Numeric"
                         Grid.Row="1"
                         Grid.Column="2"
                         Margin=" 0, 20, 0, 0"
                         HorizontalOptions="Start"
                         VerticalOptions="Center"
                         WidthRequest=""/>
    
                     <Label 
                         x:Name="EmailLabel"
                         Text="Email: "
                         TextColor="Black"
                         FontAttributes="Bold"
                         Grid.Row="2"
                         Grid.Column="0"
                         Margin=" 40, 20, 0, 0"
                         HorizontalOptions="Start"
                         VerticalOptions="Center"/>
    
                     <Entry
                         x:Name="EmailEntry"
                         Placeholder="Enter Email Address"
                         PlaceholderColor="Gray"
                         TextColor="DarkBlue"
                         Keyboard="Email"
                         Grid.Row="2"
                         Grid.Column="1"
                         Grid.ColumnSpan="2"
                         Margin=" 0, 20, 0, 0"
                         HorizontalOptions="Start"/>
    
                     <Button
                         x:Name="OK"
                         Text="OK"
                         TextColor="Black"
                         FontAttributes="Bold"
                         Grid.Row="3"
                         Grid.Column="2"
                         HorizontalOptions="Start"
                         Padding =" 50, 100, 0, 0"
                         Margin=" 0, 0, 0, 0"/>
    
                     <Button
                         x:Name="Cancel"
                         Text="Cancel"
                         TextColor="Black"
                         FontAttributes="Bold"
                         Grid.Row="3"
                         Grid.Column="2"
                         HorizontalOptions="End"
                         Padding =" 0, 100, 50, 0"/>
    
                 </Grid>
             </ScrollView>
                
         </Grid>
     </ContentPage.Content>
 </ContentPage>

The plan is that the ScrollView occurs within the Grid with a RowDefinition of *, and with the ColumnDefinition spanning all three columns. I expected that the right hand side of the three Entries would then be aligned with right side of the screen, but they're not. They're all different.

I know that within the ScrollView, the Grid.ColumnSpan="4" with only 3 columns, but the result actually looks a bit better than with Grid.ColumnSpan="3" as you will see in the screenshot.
87217-img-8459.jpg


dotnet-xamarin
img-8459.jpg (138.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered Grime commented

Hello,


Welcome to our Microsoft Q&A platform!

You can try to set property HorizontalOptions of the three entries to FillAndExpand.Just as follows:

         HorizontalOptions="FillAndExpand"

The whole code is:

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="GridApp1.TestPage">
     <ContentPage.Content>
         <StackLayout>
             <Grid BackgroundColor="White">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="32"/>
                     <RowDefinition Height="50"/>
                     <RowDefinition Height="10"/>
                     <RowDefinition Height="50"/>
                     <RowDefinition Height="20"/>
                     <RowDefinition Height="*"/>
                     <RowDefinition Height="70"/>
                 </Grid.RowDefinitions>
    
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="50"/>
                     <ColumnDefinition Width="*"/>
                     <ColumnDefinition Width="50"/>
                 </Grid.ColumnDefinitions>
    
                 <Button
                  x:Name="BackButton"
                  Text="Back"
                  Grid.Row="0"
                  Grid.Column="3"
                  TextColor="Black"
                  FontAttributes="Bold"
                  VerticalOptions="CenterAndExpand"
                  HorizontalOptions="End"
                  Margin="0,0,20,0"
                 />
    
                 <Image 
                  Source="hfn256"
                  Margin="2"
                  Grid.Row="1" 
                  Grid.Column="0"
                  Grid.ColumnSpan="4"
                  HorizontalOptions="Center"
                  BackgroundColor="White"/>
    
                 <Label 
                  Text="New Operator"
                  FontSize="Large"
                  TextColor="Black"
                  FontAttributes="Bold"
                  Margin="2"
                  Grid.Row="3" 
                  Grid.Column="0"
                  Grid.ColumnSpan="4"
                  HorizontalOptions="Center"
                  VerticalOptions="Center"
                  BackgroundColor="White"/>
    
                 <ScrollView
                  Orientation="Vertical"
                  Grid.Row="5"
                  Grid.Column="0"
                  Grid.ColumnSpan="4">
    
                     <Grid BackgroundColor="White">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="100"/>
                         </Grid.RowDefinitions>
    
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto"/>
                             <ColumnDefinition Width="40"/>
                             <ColumnDefinition Width="*"/>
                         </Grid.ColumnDefinitions>
    
                         <Label 
                          x:Name="NameLabel"
                          Text="Name: "
                          TextColor="Black"
                          FontAttributes="Bold"
                          Grid.Row="0"
                          Grid.Column="0"
                          Margin=" 40, 20, 0, 0"
                          HorizontalOptions="Start"
                          VerticalOptions="Center"/>
    
                         <Entry
                          x:Name="NameEntry"
                          Placeholder="Enter a Name or Callsign"
                          PlaceholderColor="Gray"
                          TextColor="DarkBlue"
                          Keyboard="Plain"
                          Grid.Row="0"
                          Grid.Column="1"
                          Grid.ColumnSpan="2"
                          Margin=" 0, 20, 0, 0"
                          HorizontalOptions="FillAndExpand"
                          VerticalOptions="Center"
                          WidthRequest="300"/>
    
                         <Label 
                          x:Name="PhoneLabel"
                          Text="Phone:    +"
                          TextColor="Black"
                          FontAttributes="Bold"
                          Grid.Row="1"
                          Grid.Column="0"
                          Margin=" 40, 20, 0, 0"
                          HorizontalOptions="Start"
                          VerticalOptions="Center"/>
    
                         <Entry
                          x:Name="PhoneCountryEntry"
                          Placeholder="61"
                          PlaceholderColor="Gray"
                          TextColor="DarkBlue"
                          Keyboard="Numeric"
                          Grid.Row="1"
                          Grid.Column="1"
                          Margin=" 0, 20, 0, 0"
                          HorizontalOptions="Center"
                          VerticalOptions="Center"/>
    
                         <Entry
                          x:Name="PhoneEntry"
                          Placeholder="Phone (no spaces)"
                          PlaceholderColor="Gray"
                          TextColor="DarkBlue"
                          Keyboard="Numeric"
                          Grid.Row="1"
                          Grid.Column="2"
                          Margin=" 0, 20, 0, 0"
                          HorizontalOptions="FillAndExpand"
                          VerticalOptions="Center"
                          />
    
                         <Label 
                          x:Name="EmailLabel"
                          Text="Email: "
                          TextColor="Black"
                          FontAttributes="Bold"
                          Grid.Row="2"
                          Grid.Column="0"
                          Margin=" 40, 20, 0, 0"
                          HorizontalOptions="Start"
                          VerticalOptions="Center"/>
    
                         <Entry
                          x:Name="EmailEntry"
                          Placeholder="Enter Email Address"
                          PlaceholderColor="Gray"
                          TextColor="DarkBlue"
                          Keyboard="Email"
                          Grid.Row="2"
                          Grid.Column="1"
                          Grid.ColumnSpan="2"
                          Margin=" 0, 20, 0, 0"
                          HorizontalOptions="FillAndExpand"/>
    
                         <Button
                          x:Name="OK"
                          Text="OK"
                          TextColor="Black"
                          FontAttributes="Bold"
                          Grid.Row="3"
                          Grid.Column="2"
                          HorizontalOptions="Start"
                          Padding =" 50, 100, 0, 0"
                          Margin=" 0, 0, 0, 0"/>
    
                         <Button
                          x:Name="Cancel"
                          Text="Cancel"
                          TextColor="Black"
                          FontAttributes="Bold"
                          Grid.Row="3"
                          Grid.Column="2"
                          HorizontalOptions="End"
                          Padding =" 0, 100, 50, 0"/>
    
                     </Grid>
                 </ScrollView>
    
             </Grid>
         </StackLayout>
     </ContentPage.Content>
 </ContentPage>

Note: please remove code WidthRequest="" in your PhoneEntry Entry. And you didn't assign a value for it.

The result is:

87341-image.png

Update:

why the external grid with only 3 columns looks correct within the ScrollView when CollumnSpan is set to 4.

Because you have set the wrong property value of above three controls (button BackButton , Image and Label New Operator ) .

For example:

For button BackButton , the value Grid.Column should be 2 not 3.
From document Xamarin.Forms Grid,we could find :

Column, of type int, which is an attached property that indicates the column alignment of a view within a parent Grid. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0.

For the Image in your code, code Grid.ColumnSpan="4" should be Grid.ColumnSpan="3";

For the label New Operator, code Grid.ColumnSpan="4" should be Grid.ColumnSpan="3";

ColumnSpan, of type int, which is an attached property that indicates the total number of columns that a view spans within a parent Grid. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1.

Refer : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

I have modified some properties in your code , you can check it:

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d"
              x:Class="GridFormApp.MainPage">
    
     <ContentPage.Content>
             <Grid BackgroundColor="BlueViolet">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="40"/>
                     <RowDefinition Height="50"/>
                     <RowDefinition Height="10"/>
                     <RowDefinition Height="50"/>
                     <RowDefinition Height="20"/>
                     <RowDefinition Height="*"/>
                     <RowDefinition Height="70"/>
                 </Grid.RowDefinitions>
    
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*"/>
                     <ColumnDefinition Width="*"/>
                     <ColumnDefinition Width="80"/>
                 </Grid.ColumnDefinitions>
    
                 <Button
                   x:Name="BackButton"
                   Text="Back"
                   Grid.Row="0"
                   Grid.Column="2"
                   TextColor="Black"
                   FontAttributes="Bold"
                   VerticalOptions="CenterAndExpand"
                   Margin="0,0,0,0"
                  />
    
                 <Image 
                   Margin="2"
                   Grid.Row="1" 
                   Grid.Column="0"
                   Grid.ColumnSpan="3"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   Source="fruit.png"
                   BackgroundColor="White"/>
    
                 <Label 
                   Text="New Operator"
                   FontSize="Large"
                   TextColor="Black"
                   FontAttributes="Bold"
                   Margin="2"
                   Grid.Row="3" 
                   Grid.Column="0"
                   Grid.ColumnSpan="3"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   BackgroundColor="White"/>
    
                 <ScrollView
                   HorizontalOptions="FillAndExpand"
                   BackgroundColor="Yellow"
                   Orientation="Vertical"
                   Grid.Row="5"
                   Grid.Column="0"
                   Grid.ColumnSpan="3">
                     <Grid  HorizontalOptions="FillAndExpand" >
                         <Grid.RowDefinitions>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="70"/>
                             <RowDefinition Height="100"/>
                         </Grid.RowDefinitions>
    
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto"/>
                             <ColumnDefinition Width="40"/>
                             <ColumnDefinition Width="*"/>
                         </Grid.ColumnDefinitions>
    
                         <Label 
                           x:Name="NameLabel"
                           Text="Name: "
                           TextColor="Black"
                           FontAttributes="Bold"
                           Grid.Row="0"
                           Grid.Column="0"
                           Margin=" 40, 20, 0, 0"
                           HorizontalOptions="Start"
                           VerticalOptions="Center"/>
    
                         <Entry
                           x:Name="NameEntry"
                           Placeholder="Enter a Name or Callsign"
                           PlaceholderColor="Gray"
                           TextColor="DarkBlue"
                           Keyboard="Plain"
                           Grid.Row="0"
                           Grid.Column="1"
                           Grid.ColumnSpan="2"
                           Margin=" 0, 20, 0, 0"
                           HorizontalOptions="FillAndExpand"
                           VerticalOptions="Center"
                           WidthRequest="300"/>
    
                         <Label 
                           x:Name="PhoneLabel"
                           Text="Phone:    +"
                           TextColor="Black"
                           FontAttributes="Bold"
                           Grid.Row="1"
                           Grid.Column="0"
                           Margin=" 40, 20, 0, 0"
                           HorizontalOptions="Start"
                           VerticalOptions="Center"/>
    
                         <Entry
                           x:Name="PhoneCountryEntry"
                           Placeholder="61"
                           PlaceholderColor="Gray"
                           TextColor="DarkBlue"
                           Keyboard="Numeric"
                           Grid.Row="1"
                           Grid.Column="1"
                           Margin=" 0, 20, 0, 0"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
    
                         <Entry
                           x:Name="PhoneEntry"
                           Placeholder="Phone (no spaces)"
                           PlaceholderColor="Gray"
                           TextColor="DarkBlue"
                           Keyboard="Numeric"
                           Grid.Row="1"
                           Grid.Column="2"
                           Margin=" 0, 20, 0, 0"
                           HorizontalOptions="FillAndExpand"
                           VerticalOptions="Center"
                           />
    
                         <Label 
                           x:Name="EmailLabel"
                           Text="Email: "
                           TextColor="Black"
                           FontAttributes="Bold"
                           Grid.Row="2"
                           Grid.Column="0"
                           Margin=" 40, 20, 0, 0"
                           HorizontalOptions="Start"
                           VerticalOptions="Center"/>
    
                         <Entry
                           x:Name="EmailEntry"
                           Placeholder="Enter Email Address"
                           PlaceholderColor="Gray"
                           TextColor="DarkBlue"
                           Keyboard="Email"
                           Grid.Row="2"
                           Grid.Column="1"
                           Grid.ColumnSpan="2"
                           Margin=" 0, 20, 0, 0"
                           HorizontalOptions="FillAndExpand"/>
    
                         <Button
                           x:Name="OK"
                           Text="OK"
                           TextColor="Black"
                           FontAttributes="Bold"
                           Grid.Row="3"
                           Grid.Column="2"
                           HorizontalOptions="Start"
                           Padding =" 50, 100, 0, 0"
                           Margin=" 0, 0, 0, 0"/>
    
                         <Button
                           x:Name="Cancel"
                           Text="Cancel"
                           TextColor="Black"
                           FontAttributes="Bold"
                           Grid.Row="3"
                           Grid.Column="2"
                           HorizontalOptions="End"
                           Padding =" 0, 100, 50, 0"/>
    
                     </Grid>
                 </ScrollView>
    
             </Grid>
     </ContentPage.Content>
 </ContentPage>

The result is:

87565-image.png


Best Regards,

Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.


Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.






image.png (15.1 KiB)
image.png (148.2 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Still doesn't explain why the external grid with only 3 columns looks correct within the ScrollView when CollumnSpan is set to 4.

0 Votes 0 ·

Hi @Grime , I have updated my answer. You can check the updated part at the bottom of my answer. Hope it can help you.

0 Votes 0 ·
Grime avatar image Grime JessieZhang-2116 ·

Good job Jessie. You found it.

0 Votes 0 ·