如何在UWP中创建具有固定列数的网格视图？

Question

I'm trying to create a calendar component for my app. Currently I'm working on a calendar view that is meant to show 7 days wide month, where each day is a list of events.

To do so I need to inform GridView that I always want it to be formatted in a way to hold 7 elements in each row without gaps between them. The underlying collection would always contain multiple of seven elements.

What I currently have ( ExtendedGridView / ExtendedListView are the same basic GridView / ListView and do not do any visual transformations):

<local:ExtendedGridView  x:Name="gridView" Margin="0"
                             IsSwipeEnabled="True"                                     
                             IsItemClickEnabled="True"
                             SelectionMode="Single"
                             ItemsSource="{Binding GroupCollection}"
                             VerticalAlignment="Stretch"
                             HorizontalAlignment="Stretch">

        <local:ExtendedGridView.DataContext>
            <local:MainViewModel/>
        </local:ExtendedGridView.DataContext>
        <local:ExtendedGridView.Resources>                
            <DataTemplate x:Key="DefaultGridItemTemplate">
                <Grid Width="100*" Height="60*" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <local:ExtendedListView Margin="0"
                                            IsSwipeEnabled="False"
                                            IsItemClickEnabled="True"
                                            ItemsSource="{Binding Group}">
                        <local:ExtendedListView.ItemContainerStyle>
                            <Style
                                TargetType="ListViewItem">
                                <Setter
                                    Property="HorizontalAlignment"
                                    Value="Stretch" />
                                <Setter
                                    Property="VerticalAlignment"
                                    Value="Stretch" />
                            </Style>
                        </local:ExtendedListView.ItemContainerStyle>

                        <local:ExtendedListView.Resources>
                            <DataTemplate x:Key="DefaultInnerListItemTemplate">
                                <TextBlock Text="{Binding Data}" 
                                               FontSize="12" Foreground="Green"/>
                            </DataTemplate>
                        </local:ExtendedListView.Resources>
                        <local:ExtendedListView.ItemTemplate>
                            <Binding Source="{StaticResource DefaultInnerListItemTemplate}"/>
                        </local:ExtendedListView.ItemTemplate>
                    </local:ExtendedListView>
                </Grid>
            </DataTemplate>

            <ItemsPanelTemplate x:Key="DefaultGridPanelTemplate">
                <WrapGrid MaximumRowsOrColumns="7" Orientation="Horizontal" HorizontalChildrenAlignment="Stretch" VerticalChildrenAlignment="Stretch">
                </WrapGrid>
            </ItemsPanelTemplate>
        </local:ExtendedGridView.Resources>
        <local:ExtendedGridView.ItemContainerStyle>
            <Style
                TargetType="GridViewItem">
                <Setter
                    Property="HorizontalAlignment"
                    Value="Stretch" />
                <Setter
                    Property="VerticalAlignment"
                    Value="Stretch" />
            </Style>
        </local:ExtendedGridView.ItemContainerStyle>
        <local:ExtendedGridView.ItemTemplate>
            <Binding Source="{StaticResource DefaultGridItemTemplate}"/>
        </local:ExtendedGridView.ItemTemplate>
        <local:ExtendedGridView.ItemsPanel>
            <Binding Source="{StaticResource DefaultGridPanelTemplate}"/>
        </local:ExtendedGridView.ItemsPanel>
    </local:ExtendedGridView>

How it currently looks:

I'm fairly new to using XAML so maybe I should take a completely different route. Any help and advices are appreciated.

Answer 1

It would be great if you can create multiple visual state for different screen where you need to display this gridview and fix columns width accordingly. you can follow this link