Xamarin The property 'Content' is set more than once - xamarin

I have a problem. I want to make a custom header, so I created this stacklayout:
<StackLayout VerticalOptions="Start" HeightRequest="50" HorizontalOptions="CenterAndExpand">
<Image HorizontalOptions="Start" Source="Logo.png"/>
<Image HorizontalOptions="Start" Source="Title_Dark.png"/>
</StackLayout>
Now I want to put it above the following code:
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Margin="0, 0, 20, 0" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
But when I put it right under the <ContentPage.Content> tag, it gives the following error:
The property 'Content' is set more than once
When I put it above the <ContentPage.Content> tag, my whole screen is the header.
How can I fix this?

Content can only have ONE child element. If you want to have multiple child elements, you need to place them inside of a layout container (Grid, StackLayout, etc)

Related

.NET Maui: CollectionView GridItemsLayout Last Column Always Empty

How do I get my CollectionView to use the last column in the GridItemsLayout span? No matter if I set the span as 2, 3, 4, the last column is always empty.
For instance, if the span is set to 3, this is what it looks like.
Here's my xaml:
<Frame Grid.Column="1" Grid.Row="0" Margin="10, 25, 25, 25" Padding="25">
<VerticalStackLayout>
<CollectionView x:Name="listToolOptions"
ItemsSource="{Binding Tools_Visible}"
Margin="0"
SelectionMode="None">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="3" VerticalItemSpacing="5" HorizontalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BorderColor="#f1f1f1">
<Frame.Triggers>
<DataTrigger TargetType="Frame" Binding="{Binding Selected}" Value="True">
<Setter Property="BorderColor" Value="{StaticResource Primary}"/>
</DataTrigger>
</Frame.Triggers>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="ToolTapped"/>
</Frame.GestureRecognizers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" WidthRequest="15" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="{Binding Unselected}">
<Image.Source>
<FontImageSource FontFamily="FA" Glyph="" Color="{StaticResource Secondary}" Size="15"/>
</Image.Source>
</Image>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" WidthRequest="15" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="{Binding Selected}">
<Image.Source>
<FontImageSource FontFamily="FA" Glyph="" Color="{StaticResource Primary}" Size="15"/>
</Image.Source>
</Image>
<Label Grid.Column="1" Grid.Row="0" Text="Part:" FontAttributes="Bold" Padding="0, 0, 5, 0" HorizontalTextAlignment="End"/>
<Label Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Name}" HorizontalOptions="StartAndExpand" />
<Label Grid.Column="1" Grid.Row="1" Text="S/N:" FontAttributes="Bold" Padding="0, 0, 5, 0" HorizontalTextAlignment="End"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Serial}" />
<Label Grid.Column="1" Grid.Row="2" Text="Mfg.:" FontAttributes="Bold" Padding="0, 0, 5, 0" HorizontalTextAlignment="End"/>
<Label Grid.Column="2" Grid.Row="2" Text="{Binding Manufacturer}" />
<Label Grid.Column="1" Grid.Row="3" Text="Cal Due:" FontAttributes="Bold" Padding="0, 0, 5, 0" HorizontalTextAlignment="End"/>
<Label Grid.Column="2" Grid.Row="3" Text="{Binding Path=CalDueDate, StringFormat='{0:MM/dd/yyyy}'}" />
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</VerticalStackLayout>
</Frame>
Is this a bug with UWP or am I doing something wrong that I'm just missing?

xamarin collectionview and listview draw speed very slow

My test phone is LG-V50 and LG-G6 and Note5
my test collectionview code
<CollectionView Grid.Row="1" ItemsSource="{Binding Model.ViewList}" SelectedItem="{Binding Model.SelectedView}" >
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="10"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="2" VerticalOptions="FillAndExpand">
<Frame Grid.Row="0" WidthRequest="500" CornerRadius="8" BackgroundColor="#FFEAEAEA" HorizontalOptions='FillAndExpand' Margin="0" VerticalOptions="FillAndExpand">
<Grid Margin="-15,-10,-15,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="AliceBlue" >
<Label x:Name="test" Text="{Binding DeviceName}" Style="{StaticResource DiviceTitel01}" FontSize="30" />
</StackLayout>
<Button Image="close.png" WidthRequest="50" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.ViewListDeleteCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource ExitBtnStyle}" HorizontalOptions="Center"/>
</StackLayout>
<customControls:Board Grid.Row="2" BindingContext="{Binding VM}" VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="-10,0,-10,0">
<Button Text="button1" FontSize="25" FontAttributes="Bold" WidthRequest="140" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.InfoPageClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource InfoBtnStyle}" />
<Button Text="button1" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.DetailDataClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource DetailviewBtnStyle}"/>
<Button Text="button2" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.RefPageCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource MoveBtnStyle}" TextColor="black"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
and listview test code
<ListView x:Name="ListView" Grid.Row="1" BackgroundColor="White" Margin="0"
ItemsSource="{Binding Model.ViewList}"
SelectedItem="{Binding Model.SelectedView}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
>
<ListView.ItemTemplate>
<DataTemplate>
<customControls:ExtendedViewCell SelectedBackgroundColor="#FF8FB5C3" >
<ViewCell.View>
<Grid Margin="2" VerticalOptions="FillAndExpand">
<Frame Grid.Row="0" WidthRequest="500" CornerRadius="8" BackgroundColor="#FFEAEAEA" HorizontalOptions='FillAndExpand' Margin="0" VerticalOptions="FillAndExpand">
<Grid Margin="-15,-10,-15,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="5"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="AliceBlue" >
<Label x:Name="test" Text="{Binding DeviceName}" Style="{StaticResource DiviceTitel01}" FontSize="30" />
</StackLayout>
<Button Image="close.png" WidthRequest="50" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.ViewListDeleteCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource ExitBtnStyle}" HorizontalOptions="Center"/>
</StackLayout>
<customControls:Board Grid.Row="2" BindingContext="{Binding VM}" VerticalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Margin="-10,0,-10,0">
<Button Text="buuton1" FontSize="25" FontAttributes="Bold" WidthRequest="140" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.InfoPageClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource InfoBtnStyle}" />
<Button Text="button2" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.DetailDataClickCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource DetailviewBtnStyle}"/>
<Button Text="button3" FontSize="25" FontAttributes="Bold" WidthRequest="120" HeightRequest="50" Command="{Binding Source={x:Reference BoardName}, Path=BindingContext.RefPageCommand}" CommandParameter="{Binding Source={x:Reference test},Path=Text}" Style="{StaticResource MoveBtnStyle}" TextColor="black"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</ViewCell.View>
</customControls:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
and
my customcontrol code
<Grid IsVisible="{Binding Model.IsWlevelControlVisible}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0" BackgroundColor="{Binding Model.Color0}" VerticalOptions="FillAndExpand" Margin="-2">
<Grid.RowDefinitions>
<RowDefinition Height="55"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Label x:Name="W0" Text="{Binding Model.Title_0}" LineBreakMode="TailTruncation" Grid.Row="0" Grid.Column="0" TextColor="White" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Margin="15,0,0,0" FontSize="24" />
<Label Text="{Binding Model.AIValue_0}" Grid.Row="0" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Font="23"/>
<Label Text="{Binding Model.Value_0, Converter={StaticResource StingFormatConverter}, ConverterParameter={x:Reference F0}}" Grid.Row="1" Grid.Column="0" FontSize="23" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="0,0,-40,0"/>
<Label Text="{Binding Model.Value_0, Converter={StaticResource UnitConverter}, ConverterParameter={x:Reference F0}}" Grid.Row="1" Grid.Column="1" FontSize="22" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Margin="0,0,5,0"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1" VerticalOptions="FillAndExpand" Margin="-2">
<Label Grid.Row="0" Text="{Binding Model.Time}" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="18"/>
</Grid>
</Grid>
and Customcontrol Data communication is updated every 2 seconds
It is slow to draw an item except for data communication and without binding.
Excluding controls in collection view and list view makes drawing items fast, but adding controls makes drawing items very slow.
Can you find a solution to this problem?

Xamarin Add dividing line into Grid

I have a problem. I want created this ListView using the following 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand" BackgroundColor="#212121" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="GridMain">
<Grid.RowDefinitions>
<RowDefinition Height="40" x:Name="Row0_Height"/>
<RowDefinition Height="180" x:Name="Row1_Height"/>
<RowDefinition Height="180" x:Name="Row2_Height"/>
<RowDefinition Height="40" x:Name="Row3_Height"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" x:Name="Column0_Width" />
<ColumnDefinition Width="*" x:Name="Column1_Width" />
<ColumnDefinition Width="40" x:Name="Column2_Width" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Creator}" TextColor="White" FontSize="Body" FontAttributes="Bold" Grid.Column="1" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" HorizontalOptions="Center" Grid.Row="1" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteUp_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="VoteDown.png" VerticalOptions="Start" HorizontalOptions="Center" Grid.Row="2" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgVoteDown_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="imgFavorite_Clicked" />
</Image.GestureRecognizers>
</Image>
<Image Source="Send_Dark.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save_Dark.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But now I want to add a line above the first Label tag. To create the line I want I use this code:
<Label HeightRequest="1" BackgroundColor="#E3E3E3" />
But I don't know where to put it and how, because it is a Grid. I want to add it before the Grid, but that gives me the error:
The property 'View' is set more than once.
What am I doing wrong and how can I fix this?
I would use a BoxView instead of a Label. You could use this layout, placing the BoxView in the same Row as the Label, but vertically aligned
the other things you could try
add another row to the Grid for the BoxView
place the Grid inside of a StackLayout with the BoxView

How to set the perfect corner radius for the image inside a XfxCardView in xamarin forms?

I have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.
This is the UI I need and I have marked the Image
This is the result I'm getting
.
This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" Margin="0" Padding="0" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Source="restaurantimage1.jpg" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
I have made changes in corner radius and margins but I'm not getting the desired result. Do I have to use something else to do that or should I make any changes in the Frame.
I have done some changes in code so and I'm slightly near to the desired output.
This is the current output
There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
Try setting the is clipped to bounds property as true in your Grid's xaml
<Grid RowSpacing="0" IsClippedToBounds="True">
I fixed it by changing the margin of my frame. This is my code now
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>

How to expand StackLayout inside Grid in Xamarin Forms?

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

Resources