带有 GridView 和 DataBinding 的动态 HubSections 集线器

Question

我想通过代码创建一个包含多个 HubSection 的 Hub。每个 HubSection 都拥有一个 GridView，因此看起来每个 HubSection 都是一个表格（全屏），我向左/向右滑动以查看每个表格。 在我的 XAML 页面中只有集线器，其他的东西应该由代码完成。 HubSections 应该在运行时创建。为此，我使用本地设置存储来保存有关此的一些信息，例如有多少 HubSection 等。 创建新的 HubSection 没问题，但我坚持为每个 HubSection 添加一个 GridView，因为我不明白这里的逻辑。看起来我必须添加一个 DataTemplate 和一个 GridView，但我的尝试都失败了。

注意：每个 GridView 也有它自己的来自可观察集合的数据绑定。

那么如何将带有数据绑定的 (?DataTemplate?) GridView 添加到 HubSection 中？

Answer 1

使用 DataTemplate，您可以构建布局。我在一个项目中使用了以下模板来每天显示一些数据并为每天创建一个部分：

<Page.Resources>
<CollectionViewSource x:Name="HubViewModel"/>
<DataTemplate x:Key="DataTemplate">
            <Grid Background="Transparent" Width="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,20">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0" HorizontalAlignment="Center">
                    <TextBlock Text="{Binding SumShipmentsSA}" Style="{ThemeResource HeaderTextBlockStyle}" TextAlignment="Center" TextWrapping="NoWrap"/>
                </StackPanel>
                <StackPanel Grid.Row="1" HorizontalAlignment="Center">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Uid="SummaryHubNat" Text="National" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
                        <TextBlock Text="{Binding CountShipmentsNationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Uid="SummaryHubInt" Text="International" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
                        <TextBlock Text="{Binding CountShipmentsInternationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Uid="SummaryHubCharter" Text="Charter" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
                        <TextBlock Text="{Binding CountShipmentsCharterSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>  
</Page.Resources> 
.
.
<Hub x:Name="MainHub" DataContext="{Binding Source={StaticResource HubViewModel}}" Margin="0,0,0,20"/>

在代码页面中，我使用以下方法创建了部分：

 private void AddHubSection(IEnumerable<DaySummary> list)
        {
            if (list != null)
            {
                list = list.OrderByDescending(x => x.Date);
                foreach (var item in list)
                {
                    if (item.Date.Date.Equals(DateTime.Now.Date))
                    {
                        continue;
                    }

                    HubSection hubSection = new HubSection();
                    TextBlock headerTextBlock = new TextBlock();
                    headerTextBlock.Text = item.Date.ToString("dddd dd.MMM");
                    headerTextBlock.FontSize = 15;
                    hubSection.Header = headerTextBlock;
                    hubSection.Margin = new Thickness(0);

                    object dataTemplate;
                    this.Resources.TryGetValue("DataTemplate", out dataTemplate);
                    hubSection.ContentTemplate = dataTemplate as DataTemplate;
                    hubSection.DataContext = item;
                    hubSection.DoubleTapped += HubSection_DoubleTapped;
                    MainHub.Sections.Add(hubSection);
                }
            }
        }

我认为该示例可以帮助您在尝试时获得乐趣。