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

时间:2017-03-20 10:16:46

标签: c# .net xaml uwp

我正在尝试为我的应用创建日历组件。目前,我正在处理日历视图,该视图旨在显示7天的广播月,其中每天都是一系列事件。

为此,我需要告知GridView我总是希望它的格式化方式是在每行中保存7个元素,而它们之间没有间隙。底层集合将始终包含七个元素中的多个。

我目前拥有的内容(ExtendedGridView / ExtendedListView与基本GridView / ListView相同,不进行任何直观转换:

<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>

目前看起来如何:

Screenshot of GridView

我使用XAML相当新,所以也许我应该采取完全不同的路线。任何帮助和建议都表示赞赏。

1 个答案:

答案 0 :(得分:2)

如果您可以为不同的屏幕创建多个视觉状态,您需要显示此网格视图并相应地修复列宽,这将是很棒的。你可以按照link

进行操作