带有带有 GridViews 和 DataBinding 的动态 HubSections 的 Hub

Question

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

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

那么如何将具有数据绑定的（？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);
                }
            }
        }

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

带有带有 GridViews 和 DataBinding 的动态 HubSections 的 Hub

Hub with dynamic HubSections with GridViews and DataBinding

c#

xaml

uwp

windows-10-universal

uwp-xaml