How to access controls inside HubSection in Windows 8.1

Question

I am using a HubSection as below:

<HubSection Header="Section1">
  <DataTemplate>
    <TextBox />
  </DataTemplate>
</HubSection>

<HubSection Header="Section1">
  <DataTemplate>
    <TextBox />
  </DataTemplate>
</HubSection>

<HubSection Header="Section1">
  <DataTemplate>
    <TextBox />
  </DataTemplate>
</HubSection>

Now I am having a JSON from which I want to bind the textboxes inside all the HubSection

Below is the class for the JSON data:

class RootObject
{
    public string Text1 { get; set; }
    public string Text2 { get; set; }
    public string Text3 { get; set; }
}

Now according to this question and this article, I can very well use the Loaded event for the TextBox as below and set the value.

<TextBox Loaded="TextBox_Loaded" />

private void TextBox_Loaded(object sender, RoutedEventArgs e)
{
    var txtBox = (TextBox)sender;
    txtBox.Text = "Some Text";
}

But the problem is that it will not be good to do so if I have few more controls to bind/access inside each of the HubSection.

So can someone please tell me if there is another simple way to bind the controls.

You could use [Stack Panel](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.stackpanel.aspx) in your Data Template and add controls to the Stack Panel. In this way, you can have more controls to bind or access inside each of the HubSection. — Zhendong Wu - MSFT, Nov 01 '16 at 09:05
@MattewWu-MSFT But still I have three `HubSection`s and I want to bind all the controls in all the `HubSection` from a single object like here `RootObject`. — Deepak Sharma, Nov 01 '16 at 17:46
@DeepakSharma Do you want to generate the `HubSections` dynamically or is it a defined count of 3? — rbr94, Nov 03 '16 at 12:27
@rbr94 It is a defined count. All I want is to bind all the controls inside all of the `HubSection` from my `RootObject` class defined above. — Deepak Sharma, Nov 03 '16 at 14:32
@DeepakSharma If I understand you correctly. That means that you want to bind the first `TextBox.Text` property to `Text1` of `RootObject`, the second to `Text2` and so on? Do you want to use `RootObject` to fill the textboxes or do you want to do it the other way? — rbr94, Nov 03 '16 at 14:40
@rbr94 `That means that you want to bind the first TextBox.Text property to Text1 of RootObject, the second to Text2 and so on?` YES. Thats exactly what I want. And yes I want to use `RootObject` as that is what I am parsing the JSON into. — Deepak Sharma, Nov 03 '16 at 14:47

score 0 · Answer 1 · answered Nov 03 '16 at 15:09

Try this:

C#:

In the code behind class (e.g. a Page) you need to define a property containing the RootObject. Note that you maybe need to implement INotifyPropertyChanged if you want to react to a change of this property value.

public Page1 : Page {
    public RootObject RootObject { get; set; }
}

XAML:

In your XAML you then should simply use bindings to the properties of RootObject like this:

<HubSection Header="Section1">
  <DataTemplate>
    <TextBox Text="{Binding RootObject.Text1}" />
  </DataTemplate>
</HubSection>

<HubSection Header="Section2">
  <DataTemplate>
    <TextBox Text="{Binding RootObject.Text2}"/>
  </DataTemplate>
</HubSection>

score 0 · Accepted Answer · answered Nov 05 '16 at 05:17

Hope This Helps

C#

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        RootObject ro = new RootObject() {Text1 = "Header1JsonData",Text2= "Header2JsonData",Text3= "Header3JsonData"};
        this.DataContext = ro;

    }
}

public class RootObject
{
    public string Text1 { get; set; }
    public string Text2 { get; set; }
    public string Text3 { get; set; }
}

}

XAML

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Hub >
        <HubSection Header="Section1">
            <DataTemplate>
                <TextBox  Text="{Binding Text1}"/>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Section1">
            <DataTemplate>
                <TextBox Text="{Binding Text2}"/>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Section1">
            <DataTemplate>
                <TextBox  Text="{Binding Text3}"/>
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

Output

How to access controls inside HubSection in Windows 8.1

2 Answers2