0

I am trying to implement a launcher screen for my Xamarin.Forms app. As such it contains several Grids of icon buttons, each grid within a CarouselView pane. The icon button cells will be of a fixed size.

Typically, I will size a grid with a known number of rows and columns, and the cell size is calculated accordingly. Here I need to go the opposite direction, from a known cell size to a calculated number of rows and columns. The more I look at it, the more it seems I may end up needing to Create a Custom Layout in Xamarin.Forms, where I see things like using VisualElement.Measure to determine parent element sizes from children elements.

Before I chase that option down though, does anyone know if/how I can get the number of fixed-size cells a Grid can contain before it is rendered?

Bondolin
  • 2,793
  • 7
  • 34
  • 62
  • How big is this Grid going to be? Multiple CarouselView on a page sounds like a performance hog. Regardless, using the screen dimensions to calculate the number of cells that will fit on the page seems pretty straightforward. – Jason Nov 03 '21 at 13:55
  • One `CarouselView`, multiple `Grid`s. Both take up the whole screen. Seems straightforward, but I'm bad at UI design. – Bondolin Nov 03 '21 at 13:59

1 Answers1

1

After some fiddling around, I think I have settled on something of a workable design. Ended up actually using a CollectionView instead of a Grid:

<CarouselView
    ItemsSource="{Binding LauncherPanes}"
    Loop="False">
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="models:LauncherPaneViewModel">
            <CollectionView
                ItemsSource="{Binding Items}"
                ItemSizingStrategy="MeasureFirstItem">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout
                        Orientation="Vertical"
                        Span="4" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:LauncherIconViewModel">
                        <controls:LauncherIconView />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

This still requires that I don't popuplate each pane of the carousel with more icons than the pane can hold, though technically even if I did that the CollectionView would just scroll vertically within the pane.

Bondolin
  • 2,793
  • 7
  • 34
  • 62
  • I think this is an easier solution than populating a grid. [Screen Dimensions](https://stackoverflow.com/a/50450173/199364) may be helpful in calculating how many items. – ToolmakerSteve Nov 03 '21 at 22:23