5,380 questions
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:
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://learn.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:
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.