具有GridViews和DataBinding的动态HubSections的集线器

本文关键字：动态 集线器 HubSections DataBinding GridViews 具有 | 更新日期: 2023-09-27 17:58:32

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

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

那么，如何将具有数据绑定的（？DataTemplate？）GridView添加到HubSection？

具有GridViews和DataBinding的动态HubSections的集线器

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

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

相关文章：