Net Maui How to display collectionview listing rows how to change spans amount according width of devices?

Question

 [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]

private void ListView_Loaded(object sender, EventArgs e)
 {       
     
     DeviceDisplay.MainDisplayInfoChanged += DeviceDisplay_MainDisplayInfoChanged;
 }

    private void DeviceDisplay_MainDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e)     
{        
 var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
} 

This codes not working when I change rotation of emulator.. I am trying to get width (pixels) of device first like on Portrait or landscape forexample 7 inch 10 inch or 13.9 inch tablets (differant width of pixels on Portrait or Landscape ) I need to display collectionview listing like spans 2 - 3 - 4

I realised that my rotate is not working because genarate new project again also not working rotation why is that ?

How to do any idea ? ... thanks..

Answer 1

Could you get the width value in your DeviceDisplay_MainDisplayInfoChanged method?

If yes, I create a Pixel emulator, I get the width is 350 in the Portrait, 800 in the landscape.

So I write a method to change spans amount according width of devices for testing. If the width is over 400, I set the span amount to 4, other span amount is 2. As note, I add x:Name="myCollectionView" for CollectionView in the xml layout

 void ChangeSpanByDeviceWidth()
    {
        var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
        GridItemsLayout gridItemsLayout = new GridItemsLayout(ItemsLayoutOrientation.Vertical);
        if (width > 400)
        {
            gridItemsLayout.Span = 4;
        }
        else
        {
            gridItemsLayout.Span = 2;
        }
        myCollectionView.ItemsLayout = gridItemsLayout;
        DisplayAlert("info", width.ToString(),"OK");
    }

Then this emthod will be invoked in the OnAppearing method and screen size changed method.

protected override void OnAppearing()
    {
        base.OnAppearing();
       ChangeSpanByDeviceWidth();
    }
 private void DeviceDisplay_MainDisplayInfoChanged(object sender, DisplayInfoChangedEventArgs e)
    {
        ChangeSpanByDeviceWidth();
      
    }

   private void myCollectionView_Loaded(object sender, EventArgs e)
    {
        DeviceDisplay.MainDisplayInfoChanged += DeviceDisplay_MainDisplayInfoChanged;
    }