Hub with dynamic HubSections with GridViews and DataBinding

Question

I would like to create a Hub with several HubSections via code. Each HubSection owns a single GridView so it look like every HubSection is a table (fullscreen) and I swipe left/right to view every table. In my XAML page is only Hub the other stuff should be done by code. The HubSections should be created at runtime. For this I use a local settings storage to save some information about this, like how many HubSections etc. Creating new HubSections is no problem but I'm stuck at adding a GridView to each HubSection because I don't understand the logic here. It looks like I have to add a DataTemplate and a GridView but my attempts all failed.

Note: each GridView has also it's own databinding from a Observable Collection.

So how to add a (?DataTemplate?) GridView with databinding to a HubSection ?

Answer 1

With a DataTemplate you build your layout. I have used in a Project following template to show a few data per day and create one Section for each day:

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

In the Code page I used the following method to create to the 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);
                }
            }
        }

I think the example can help you have fun while trying.