Data binding to hub section in C# XAML

Question

I'm trying to design a very basic application for windows phone (C#/XAML). At first, I used the hub template, but I got lost so I decided to go step by step and started from a blank app and added a hub.

I managed to bind data between two distinct pages, with line codes such as TextBox.DataContext = DataContext ... but I'd like to bind data properly to hub sections, which is not as easy since hub elements lie in "DataTemplate" which cannot be accessed.

I spent the last two weeks reading documentation, tutorials, etc... Now I've read so many different sources that I am totally lost and do not know what I should do.

Here is my app : A "Players" class (player name and score); and a simple page with a hub control that has 2 sections.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace App1
{
class Players
{
    private string playerName;
    public string PlayerName
    {
        get { return playerName; }
        set { playerName = value; }
    }
    private int playerScore;
    public int PlayerScore
    {
        get { return playerScore; }
        set { playerScore = value; }
    }                
}
}

The code behind is very basic, I just created a list of that I populated with only two players. All I want to do, for now, is to understand how the data binding can work.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace App1
{
    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        List<Players> players = new List<Players>();

        this.InitializeComponent();
        this.NavigationCacheMode = NavigationCacheMode.Required;

        Players player1 = new Players();  Players player2 = new Players();
        player1.PlayerName = "Vince"; player1.PlayerScore = 2;  player2.PlayerName = "Mike"; player2.PlayerScore = 42;
        players.Add(player1); players.Add(player2);
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {

    }
}
}

All I'd like to do, for now, is to understand how the data binding works. For example, I would like to have a TextBox in my hub that would display player1.PlayerName. My XAML code, as of today looks as :

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


<Page.Resources>
    <local:Players x:Key="PlayerDataSource"/>        
</Page.Resources>

<Page.DataContext>
    <Binding Source="{StaticResource PlayerDataSource}"/>
</Page.DataContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <Hub x:Name="Hub1" Grid.Row="1" DataContext="Players">
        <HubSection x:Name="HubSec1">
            <DataTemplate>
                <StackPanel>
                <TextBlock Text="Hello"></TextBlock>
                <TextBox x:Name="tb1"></TextBox>
                </StackPanel>
            </DataTemplate>
        </HubSection>

        <HubSection x:Name="HubSec2">
            <DataTemplate>
                <StackPanel>
                <TextBlock Text="Section2"></TextBlock>
                <TextBlock Text="Trying to bind"/>
                    <TextBlock Text="{Binding PlayerName}"/>
                </StackPanel>
            </DataTemplate>
        </HubSection>
    </Hub>

</Grid>

I know how to bind a full list to an element such as a listbox (with a ItemsSource={Binding} in XAML + ListBox.DataContext = players in code behind), but here I would like to display only one given element of my players... I have tried to add a xmlns:data="clr-namespace" but this does not seem to be working (the IDE does not propose any auto-completion)

I am probably doing something wrong somewhere... but can't figure out where exactly. As mentionned above, I have tried so many different options that I am totally lost now...

I haven't worked with Windows phone, but some of your code seems questionable. Firstly, in your MainPage constructor, you are creating a list of players and populating this list. The scope of this list is only the constructor. I don't see how the xaml will have access to this list. Secondly, the DataContext binding on the Hub doesn't look quite right either. If you want to use the DataContext of the page in the hub, you could possible use DataContext="{Binding}" instead. — failedprogramming
Thanks for taking some time to help. I'll try and check accordingly. About your first comment (about the constructor), what should I change ? — Mike
I guess the easiet way would probably be to convert your List<Players> into an ObservableCollection<Players> instead. After that you can simply bind this collection to the hub1 datacontext. e.g. Hub1,DataContext = players; Have a look at msdn.microsoft.com/en-us/library/windows/apps/… for some data-binding examples. If you want something more advanced, you can also look at channel9.msdn.com/Shows/Inside+Windows+Phone/… for using MVVM pattern. — failedprogramming

Mike Mike · Accepted Answer · 2015-04-16T21:51:10

OK, I finally found out what was wrong in my code. First, in the xaml, for each list box, make sure to add the binding

 <ListBox x:Name="lb" ItemsSource="{Binding}" Grid.Column="1">

Then, for example, to bind to a textbox, I simply added :

<TextBlock Text="{Binding PlayerName}" FontSize="32" Grid.Column="0"/>

And in the code behind, a simple :

            MainHub.DataContext = players;

And that was it, everything binds perfectly now. Thanks for your help

Data binding to hub section in C# XAML

1 Answers