How to expand StackLayout inside Grid in Xamarin Forms? - xamarin

Question

I have Xamarin Forms app. My page bottom should look like this:
Currently it looks like this:
Problem is that StackLayout doesn't expand to fill space. Here is my xaml:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="CenterAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>
How can I expand StackLayout inside Grid? I would like that blue and red backgrounds touch in the middle.

Answer 1

You set the StackLayouts to CenterAndExpand, which means they will only take up as much room as they need. You should FillAndExpand them like:
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Blue" >
<Label Text="First" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" BackgroundColor="Red" >
<Label Text="Second" TextColor="#FFFFFF" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</StackLayout>

Answer 2

I know its an old thread - just stumbled on this as part of trying to solve the same problem.
"FillAndExpand" isn't the magic bullet however. You can see in this code that every nested element including the Grid is set to FillAndExpand, yet there's not expanding taking place.
<ScrollView
x:Name="rightScroll"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Margin="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Yellow">
<FlexLayout
Margin="0"
Padding="0"
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemsSource="{Binding CurrentIncidentReport.Photos}"
Direction="Column"
HorizontalOptions="FillAndExpand"
JustifyContent="SpaceBetween"
VerticalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="DarkOrange">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition x:Name="textColumn"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Aspect="Fill"
HeightRequest="{StaticResource IconSize}"
Source="{Binding Photo.Source}"
VerticalOptions="CenterAndExpand"
WidthRequest="{StaticResource IconSize}" />
<!-- The editor sizes in jumps matching text size. Have to size the image to the editor not the other way around -->
<Frame
Grid.Column="1"
Margin="0"
Padding="3"
BorderColor="Red"
HeightRequest="{StaticResource IconSize}"
HorizontalOptions="FillAndExpand">
<Frame.Triggers>
<DataTrigger
Binding="{Binding HasValidDescription}"
TargetType="Frame"
Value="True">
<Setter Property="BorderColor" Value="Transparent" />
</DataTrigger>
</Frame.Triggers>
<controls:CustomEditor
x:Name="descEditor"
Margin="0,4,0,4"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="Enter description of photo"
PlaceholderColor="Gray"
Text="{Binding Description, Mode=TwoWay}"
TextColor="Black"
Unfocused="CustomEditor_Unfocused" />
</Frame>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>