Net Maui Platform Windows How to display Collectionview with span listing according to Screen Width ?

Question

Net Maui Platform Windows How to display Collectionview with span listing according to Screen Width ?

Sami 966

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-01-17T02:13:47.94+00:00
For further investigation, could you please provide the following information?

Version of MAUI.

What is your expected behavior, what is the actual behavior of the program at the moment, and what are the differences between them?

Your prompt reply will be highly appreciated.

Sami 966

   On windows Platform not working ? what is wrong

 void ChangeSpanByDeviceWidth()
    {
        var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
        GridItemsLayout gridItems = new GridItemsLayout(ItemsLayoutOrientation.Vertical);
        gridItems.HorizontalItemSpacing = 5;
        gridItems.VerticalItemSpacing = 5;

   if (width > 3800)
        {
            gridItems.Span = 10;
        }
        else if (width > 2500)
        {
            gridItems.Span = 8;
        }
        else if (width > 1200)
        {
            gridItems.Span = 6;
        }
        else if (width > 1000)
        {
            gridItems.Span = 4;
        }
        else
        {
            gridItems.Span = 3;
        }

        ItemsListing.ItemsLayout = gridItems;
    }

constructor///

public Listing()
{
ChangeSpanByDeviceWidth
}

    private void DeviceDisplay_MainDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e)     {         ChangeSpanByDeviceWidth();      }

1 answer

Your answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-01-17T02:13:47.94+00:00

For further investigation, could you please provide the following information?

Version of MAUI.

What is your expected behavior, what is the actual behavior of the program at the moment, and what are the differences between them?

Your prompt reply will be highly appreciated.
Sami 966 Reputation points

2024-01-17T02:20:28.56+00:00

On windows Platform not working ? what is wrong void ChangeSpanByDeviceWidth() { var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density; GridItemsLayout gridItems = new GridItemsLayout(ItemsLayoutOrientation.Vertical); gridItems.HorizontalItemSpacing = 5; gridItems.VerticalItemSpacing = 5; if (width > 3800) { gridItems.Span = 10; } else if (width > 2500) { gridItems.Span = 8; } else if (width > 1200) { gridItems.Span = 6; } else if (width > 1000) { gridItems.Span = 4; } else { gridItems.Span = 3; } ItemsListing.ItemsLayout = gridItems; } constructor/// public Listing() { ChangeSpanByDeviceWidth } private void DeviceDisplay_MainDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e) { ChangeSpanByDeviceWidth(); }

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

After testing, in .net7, both DeviceDisplay.Current.MainDisplayInfo.Width and DeviceDisplay.Current.MainDisplayInfo.Density have values of 0, which results in a constant result of width to NaN infinity.

This causes if (width > 3800) to always be true. This issue was fixed in .Net 8.

Please refer to DeviceDisplay.Current.MainDisplayInfo not available on windows #6976 for more details.

Update: After testing, there are no issues with this feature design. You need to configure the ItemTemplate in the xaml page of the CollectionView for this layout to appear. Please refer to the following code:

// If you don't define the style of the ItemTemplate, the custom layout can't be displayed.
<CollectionView x:Name="collectionview"
    ItemsSource="{Binding Monkeys}"
                SelectionMode="Multiple"
                SelectionChanged="OnCollectionViewSelectionChanged">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

//in c#
void ChangeSpanByDeviceWidth() {
    var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;

    GridItemsLayout gridItemsLayout = new GridItemsLayout(ItemsLayoutOrientation.Vertical);
    gridItemsLayout.HorizontalItemSpacing = 5;
    gridItemsLayout.VerticalItemSpacing = 5;

    if(width > 3800)
    {
        gridItemsLayout.Span = 10;
    }else if(width > 2500)
    {
        gridItemsLayout.Span = 8;
    }else if(width > 1200)
    {
        gridItemsLayout.Span = 6;
    }else if(width > 1000)
    {
        gridItemsLayout.Span = 4;
    }
    else
    {
        gridItemsLayout.Span = 3;
    }
    collectionview.ItemsLayout = gridItemsLayout;
}

After testing, the application could display different numbers of elements according to the width as expected.

Best Regards,

Alec Liu.

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.

Sami 966 Reputation points

2024-01-18T19:41:34.6133333+00:00

My Project on Net 8 So how to do collectionview listing according to screen size ? I don t understand from link ? any sample ? you mean first default width of windows ...Thanks
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-01-19T08:03:57.23+00:00

For further investigation, could you please provide us with your expected behavior, the actual behavior of the program at present, and how they differ from each other?

Do you need the program to display different numbers of data in a row at different widths?
Sami 966 Reputation points

2024-01-19T10:06:07.6666667+00:00

Listing by collectionview span size like 3 - 4 - 6 - 8 - 10 items each column according to windows app width... for example 4k width 3850 collectionview span will be 10
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-01-22T03:11:39.0966667+00:00

Thanks for your feedback. I've updated my answer, could you please check it?

Sami 966

still not working it is default span as above like it.. when I change desktop app width it is not changing span size

   <CollectionView x:Name="ItemsListing" SelectionChanged="Items_SelectionChanged"  SelectionMode="Single" ItemsSource="{Binding MyList}" >
       <CollectionView.ItemsLayout>
           <GridItemsLayout x:Name="gridItems" Orientation="Vertical" Span="8" HorizontalItemSpacing="5" VerticalItemSpacing="5"/>
       </CollectionView.ItemsLayout>
       <CollectionView.ItemTemplate>
           <DataTemplate>

        </DataTemplate>     
</CollectionView.ItemTemplate> 
</CollectionView>

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

After testing, your code needs to make the following changes:

Step 1. Remove CollectionView.ItemsLayout node from the xaml.

Step 2. Dynamically generate a grid layout in the page's OnAppearing method

protected override void OnAppearing()
{
    base.OnAppearing();
    ChangeSpanByDeviceWidth();
}
void ChangeSpanByDeviceWidth()
{
    var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;

    GridItemsLayout gridItemsLayout = new GridItemsLayout(ItemsLayoutOrientation.Vertical);
    gridItemsLayout.HorizontalItemSpacing = 5;
    gridItemsLayout.VerticalItemSpacing = 5;

    if (width > 3800)
    {
        gridItemsLayout.Span = 10;
    }
    else if (width > 2500)
    {
        gridItemsLayout.Span = 8;
    }
    else if (width > 1200)
    {
        gridItemsLayout.Span = 6;
    }
    else if (width > 1000)
    {
        gridItemsLayout.Span = 4;
    }
    else
    {
        gridItemsLayout.Span = 3;
    }
    ItemsListing.ItemsLayout = gridItemsLayout;
}

Sami 966

But this method windows platform is not working inside of contentwiew , it works only in contentpage ?

protected override void OnAppearing()
{
    base.OnAppearing();
    ChangeSpanByDeviceWidth();
}

   I have tried like that but not working

 protected override void OnHandlerChanged()
    {
        base.OnHandlerChanged();
        ItemsListing.SizeChanged += (s, e) =>
        {
            ChangeSpanByDeviceWidth();
        };
    }

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-01-30T05:55:46.98+00:00
I have tried like that but not working

This is expected, and when the SizeChanged method is triggered, the length of the CollectionVIew and the layout have been assigned.

But this method windows platform is not working inside of contentwiew , it works only in contentpage ?

The ContentView will eventually be used in the ContentPage, so you can call this method in the ContentPage.

Step 1. Set the code that assigns the layout to public.

public void ChangeSpanByDeviceWidth()

Step 2. Call this method in ContentPage.

<local:NewContent1 x:Name="contentview"/> protected override void OnAppearing() { base.OnAppearing(); contentview.ChangeSpanByDeviceWidth(); }

Sami 966

still is not working ListingView() is also contentview //In content mainpage xaml

  <ContentView x:Name="mainContent" />

// In content mainpage cs.

        public MainPage() 	
{ 		

InitializeComponent();         
BindingContext = new HomeViewModel();   
       
Loaded += MainPage_Loaded;

 } 

 private void MainPage_Loaded(object? sender, EventArgs e)     
{      
   mainContent.Content= new ListingView(); 
} 

protected override void OnAppearing()
    {
        base.OnAppearing();
         var lwiew = new ListingView();
        lwiew.ChangeSpanByDeviceWidth();
    }

// In Contentview ListingView cs



 public void ChangeSpanByDeviceWidth()
    {
        var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
        GridItemsLayout gridItems = new GridItemsLayout(ItemsLayoutOrientation.Vertical);
        gridItems.HorizontalItemSpacing = 5;
        gridItems.VerticalItemSpacing = 5;

   if (width > 3800)
        {
            gridItems.Span = 10;
        }
        else if (width > 2500)
        {
            gridItems.Span = 8;
        }
        else if (width > 1200)
        {
            gridItems.Span = 6;
        }
        else if (width > 1000)
        {
            gridItems.Span = 4;
        }
        else
        {
            gridItems.Span = 3;
        }

        ItemsListing.ItemsLayout = gridItems;
    }

constructor///

public Listing()
{

ChangeSpanByDeviceWidth();

}

    private void DeviceDisplay_MainDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e)     
{         

ChangeSpanByDeviceWidth();      

}

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-01-31T07:38:56.0333333+00:00
This result is expected.

<ContentView x:Name="mainContent" />

protected override void OnAppearing() { base.OnAppearing(); var lwiew = new ListingView(); lwiew.ChangeSpanByDeviceWidth(); }

You declare the variable name invalid inside the ContentView, and then you recreate a new ContentView in the ContentPage, and the two ContentViews are unrelated.

As mentioned in the previous comment, when using ContentView in a ContentPage, set the variable name for it.

<local:NewContent1 x:Name="contentview"/>

After that, you can call the method in the ContentView in the code behind in the ContentPage.

protected override void OnAppearing() { base.OnAppearing(); contentview.ChangeSpanByDeviceWidth(); }

If you don't know how to use ContentView in ContentPage, please refer to Instantiate a custom control.

Share via

Net Maui Platform Windows How to display Collectionview with span listing according to Screen Width ?

1 answer

Your answer