Question

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

注意：每个GridView也有自己的Observable Collection数据绑定。

那么如何将（？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"/>

在Code页面中，我使用以下方法创建Section：

 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);
                }
            }
        }

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

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

1 个答案: