Add Grid to ItemTemplate in Xamarin.Forms

Question

In a Xamarin Forms(MAUI) project I would like to add a Grid with some prices inside another Grid placed in a CollectionView

The Grid is like below and I have created a function which returns a Grid. This works fine in an ordinary stacklayout : where I create the grid and add it as a Child of PriceData.

How do i accomplish that in a ItemTemplate of a CollectionView at runtime placing the grid where the placeholder RIGHTHERE I WANT TO ADD A GRID are

 <CollectionView.ItemTemplate>
    <DataTemplate>
       <Grid Padding="5" Margin="20,20,20,20" >
          <Grid.GestureRecognizers>
             <TapGestureRecognizer Command="{Binding Path=BindingContext.GotoDetailPage, Source={x:Reference Page}}" CommandParameter="{Binding .}" />
           </Grid.GestureRecognizers>
           <Grid.ColumnDefinitions>
              <ColumnDefinition Width="2*"></ColumnDefinition>
              <ColumnDefinition Width="5*"></ColumnDefinition>
           </Grid.ColumnDefinitions>
           <Grid.RowDefinitions>
               <RowDefinition Height="*"/>
               <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
             <Image Grid.Column="0" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="Fill" WidthRequest="60" HeightRequest="60" Source="{Binding .,Converter={StaticResource ImageConverter}}"></Image>
             <StackLayout Grid.Column="1" Grid.Row="0">                                   
                <Label Text="{Binding Title}" />
                <Label Text="{Binding BodyText}" />
                <<RIGHTHERE I WANT TO ADD A GRID>>
              </StackLayout>
              <BoxView Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="1" BackgroundColor="LightGray"/>
        </Grid>
      </DataTemplate>
    </CollectionView.ItemTemplate>

just add `` in the XAML. Is there a problem when you do it this way? — Jason, Apr 22 '22 at 14:53
If you mean that you want the `ItemTemplate` to have two different xamls, one with a grid, one without, then use a [`DataTemplateSelector`](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector) to select between the two xamls. You can't do this with code in the class'es page behind, because that code is in the wrong place - you need to cause a change inside the ItemTemplate, not inside the Page. — ToolmakerSteve, Apr 22 '22 at 15:50

score 0 · Answer 1 · answered Apr 22 '22 at 20:09

Sorry if the question was unprecise.

The issue was to manipulate with a Grid placed in a CollectionView.ItemTemplate which was bound to a datasource.

I solved it by creating a ContentView with a StackLayout.

The model was passed as a BindableProperty and then on propertyChanged I created a Grid and added it as a child of the StackLayout

Add Grid to ItemTemplate in Xamarin.Forms

1 Answers1