Hi folks,
I am trying to achieve a 'dynamic grid' in a Xamarin Forms-based UWP app using CollectionView and VisualStateManager. I am trying to code for a narrow window width and a wider window width. When narrow, the CollectionView should be a single vertical list with ItemSpacing of 20. When wide, the CollectionView should be a VerticalGrid specifically, with 3 columns and horizontal and vertical spacing of 20. However, the below code has no impact on the spacing, i.e. when debugging the app, the app appears to respond to and works properly when displaying the grid/list using:
<Setter Property="CollectionView.ItemsLayout" Value="VerticalGrid, 3" />
and
<Setter Property="CollectionView.ItemsLayout" Value="VerticalList" />
but not
<Setter Property="GridItemsLayout.HorizontalItemSpacing" Value="20" />
<Setter Property="GridItemsLayout.VerticalItemSpacing" Value="20" />
or
<Setter Property="LinearItemsLayout.ItemSpacing" Value="20" />
These lines of code are taken from below:
<CollectionView.....>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState Name="LargeWindow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="CollectionView.ItemsLayout" Value="VerticalGrid, 3" />
<Setter Property="GridItemsLayout.HorizontalItemSpacing" Value="20" />
<Setter Property="GridItemsLayout.VerticalItemSpacing" Value="20" />
</VisualState.Setters>
</VisualState>
<VisualState Name="NarrowWindow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="CollectionView.ItemsLayout" Value="VerticalList" />
<Setter Property="LinearItemsLayout.ItemSpacing" Value="20" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</CollectionView>
Any tips on the syntax for this type of code in the VisualStateManager would be much appreciated.
Thanks very much

