Maui: Change gridView template conditionally

Question

I have a grid inside a CollectionView and I need to change the layout based on a certain condition, changing dynamically the size of the columns and rows and hiding/showing some specific columns. The datasource of the collectionView is always the same.

Basically, I want to achieve something like this:

Default layout:

Alternative layout:

I saw that maybe I could use the DataTemplateSelectors, but is that the best way or is there another method?

Using a DataTemplateSelector would indeed be a solution. Posts should be about technical problems that have a clear cut answer, please try and refrain from making open ended "opinion" based question. Instead, your question should be a solution you tried and specify how it does not match your desire behavior. — DevenCC, Jan 27 '23 at 13:49
Interesting that you mention DataTemplateSelector, because the example of how to be used by Microsoft, is suspiciously close to those screenshots. — H.A.H., Jan 27 '23 at 14:00
@H.A.H.: I posted the screenshots to give just an idea of the result I want to achieve. — Innova, Jan 27 '23 at 14:19
Nevermind, forget it. https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/datatemplate?view=net-maui-7.0 Just go here, and do what it tells you. — H.A.H., Jan 27 '23 at 14:42

score 0 · Answer 1 · answered Jan 30 '23 at 09:02

You can use the Grid in the Collectionview and set the Grid format.

First, you can set the CollectionView ItemsLayout. Here is the example.

<CollectionView ItemsSource="{Binding Items}"
                ItemsLayout="VerticalGrid, 3">

it will divide the CollectionView list into three vertical parts.

Second, you can make a Grid to preserve the data.

   <Grid Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="35" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70" />
        </Grid.ColumnDefinitions>
        <Image Grid.Row="0"
               Source="{Binding ImageUrl}"
               Aspect="AspectFill"
               HeightRequest="60"
               WidthRequest="60" />
        <Label Grid.Row="1"
               Text="{Binding Location}" />
    </Grid>

Maui: Change gridView template conditionally

1 Answers1