Net maui how to list variable in collectionview ?

Hello,

You can do this by Data templates - .NET MAUI | Microsoft Learn.

1. Create a datatemplateSelector for different data templates. Based on your screenshot, you have three different layouts, I add following templates.

public class MonkeyDataTemplateSelector : DataTemplateSelector 
{
    public DataTemplate NormalTemplate { get; set; }
    public DataTemplate VerticalTemplate { get; set; }

    public DataTemplate HorizontalTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        Monkey monkey=(Monkey)item;
        if (monkey.TempleMode.Equals("Vertical")){

            return VerticalTemplate;

        }
        else if (monkey.TempleMode.Equals("Horizontal"))
        {
            return HorizontalTemplate;
        }
        else
        {
            return NormalTemplate;
        }
        
    }
}

2. Consume a dataTemplateSelector in your contentpage's resources. I add normal layout template, vertical layout template and horizontal layout template. For normal layout template, it contains VerticalStackLayout. I add a Grid with two rows I add border background for testing in the vertical layout template. I add a Grid with two Columns for horizontal layout template like following code.

As note: you can set different layout for different temples based on your needs.

  <ContentPage.Resources> 
        <DataTemplate x:Key="normalTemplate">
            <VerticalStackLayout>
                <Image 
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label 
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                        />
            </VerticalStackLayout>
        </DataTemplate>
        <DataTemplate x:Key="verticalTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition  Height="*" />
                    <RowDefinition  Height="*" />
                </Grid.RowDefinitions>
                <Border Grid.Row="0" Background="red">
                    <StackLayout>
                        <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                    </StackLayout>
                </Border>

                <Border Grid.Row="1" Background="red">
                    <StackLayout>
                        <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Border>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="horizontalTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition  Width="*" />
                    <ColumnDefinition  Width="*" />
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" Background="green">
                    <StackLayout>
                        <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                    </StackLayout>
                </Border>

                <Border Grid.Column="1" Background="red">
                    <StackLayout>
                        <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Border>
            </Grid>
        </DataTemplate>
        <local:MonkeyDataTemplateSelector x:Key="monkeyDataTemplateSelector"
                                          NormalTemplate="{StaticResource normalTemplate}"
                                          VerticalTemplate="{StaticResource verticalTemplate}"
                                          HorizontalTemplate="{StaticResource horizontalTemplate}"/>
    </ContentPage.Resources>
   

3. Then you can use this dataTemple in CollectionView

 <StackLayout>
        <CollectionView
                ItemsSource="{Binding Monkeys}"
          ItemTemplate="{StaticResource monkeyDataTemplateSelector}"
                x:Name="myCollectionView" >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal" />
            </CollectionView.ItemsLayout>
        </CollectionView>
    </StackLayout>

4. I add a property(TempleMode) for different temple.

public class Monkey 
{
    public string Name { get; set; }
    public string Location { get; set; }

    public string ImageUrl { get; set; }

    public string TempleMode {get; set;}

}

5. If you need to show different datatemple, you can set different values for TempleMode prpoperty in your viewmodel.

public List<Monkey> Monkeys { set; get; }
Monkeys = new List<Monkey>();

// Normal layout temple
Monkeys.Add(new Monkey() { Name = "Monkeys1", ImageUrl = "user1.jpg", Location = "Localtion", TempleMode = "Normal" });

//Vertical layout temple
       Monkeys.Add(new Monkey() { Name = "Monkeys1", ImageUrl = "user1.jpg", Location = "Localtion", TempleMode = "Vertical" });

//Horizontal  layout temple
       Monkeys.Add(new Monkey() { Name = "Monkeys1", ImageUrl = "user1.jpg", Location = "Localtion", TempleMode = "Horizontal" });

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.