locked
Hubsections and ContentTemplate and ContentControl

    Question

  • I have a simple windows store app, based on the hub template.

    The main hub contains 8 very similar hubsections. So instead of copy/pasting each hubsection properties I'd like to use some kind of template.

    Each hubsection is like so:

    <HubSection Width="350" x:Uid="HubSection1" Header="Header1">
    
    <DataTemplate>          
          <ListBox x:Name="lbMilitary" ItemsSource="{Binding}" Grid.Column="1" Background="Red">
        <ListBox.ItemTemplate>
      <DataTemplate>
      <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="12"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBlock Style="{StaticResource PlayerNameTextBlockTemplate}" Text="{Binding PlayerName}"/>
      <TextBox Text="{Binding PlayerScore1, Mode=TwoWay}"  Style="{StaticResource TbTemplate}/>
      </Grid>      
      </DataTemplate>
    </ListBox.ItemTemplate>
    </ListBox>
    </DataTemplate>
    </HubSection>

    So, to simplify my XAML I have written a contentcontrol, like so:

     <Page.Resources>
            <ResourceDictionary>         
                <DataTemplate x:Key="TemplateTest">
                    <ContentControl>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="24" />
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ListBox Grid.Column="0">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock FontSize="32" Text="{Binding PlayerName}"/>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Grid>
                    </ContentControl>
                </DataTemplate>            
            </ResourceDictionary>
        </Page.Resources>

    And I am trying to use this template like so:

    <HubSection x:Name="HubSecTest" Header="Test" ContentTemplate="{StaticResource TemplateTest}"> </HubSection>

    If inside my control I simply insert a simple element such as a textblock, it seems to be working. But with a listbox (such as the one in the full hubsection model), nothing displays.

    What am I doing wrong ?

    Also, another difficulty is that in my TextBox that is bound to PlayerScore I would like to be able to choose a specific binding for each separate hubsection, like so :

    <HubSection x:Name="HubSecTest" Header="Test" ContentTemplate="{StaticResource TemplateTest}">
    <!-- Bind the textblock to "PlayerName" -->
    <!-- Bind the TextBox to "PlayerScore1" -->
     </HubSection>
    
    <!-- Next hubsection -->
    
    <HubSection x:Name="HubSecTest" Header="Test" ContentTemplate="{StaticResource TemplateTest}">
    <!-- Bind the textblock to "PlayerName" as in the previous section BUT -->
    <-- Bind the TextBox to "PlayerScore2" -->
     </HubSection>

    Thanks :)

    Friday, April 24, 2015 5:48 PM

All replies

  • Hi MikePeter,

    >>If inside my control I simply insert a simple element such as a textblock, it seems to be working. But with a listbox (such as the one in the full hubsection model), nothing displays.

    Please bind the ListBox to a ObservableCollection in the xaml, after that it worked very well in my side:

     <ListBox Grid.Column="0" ItemsSource="{Binding TestHubList}">
    ........

    >>Also, another difficulty is that in my TextBox that is bound to PlayerScore I would like to be able to choose a specific binding for each separate hubsection
    Could you please try to tell me if the TextBox that is bound to PlayerScore also is inside in the ListBox? Does the PlayerScore<1..n> use the same ItemSource as the ListBox? If so I will recommend you put this TextBox in the Hub control separately.


    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.





    Monday, April 27, 2015 10:03 AM
    Moderator
  • Thank you very much for your answer.

    I'll try to answer your question as accurately as possible (I'm still rather new to all this ...).

    Both TextBlock and TextBox are included in a single ListBox in my basic design, as you can see in the first code example. Therefore, I guess my second code example is incomplete since the template should also include a TextBox in addition to the TextBlock, like so :

    <DataTemplate x:Key="TemplateTest">
        <ContentControl>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="24" />
                    <ColumnDefinition Width="*"/>
                 </Grid.ColumnDefinitions>
                  <ListBox Grid.Column="0">
                    <ListBox.ItemTemplate>
                      <DataTemplate>
                          <TextBlock FontSize="32" Text="{Binding PlayerName}"/>
                          <TextBox Text="{Binding}"/>
                      </DataTemplate>
                    </ListBox.ItemTemplate>
                  </ListBox>
             </Grid>
         </ContentControl>
    </DataTemplate>            

    Here, I have left <TextBox Text={Binding}"/> since in each separate HubSection I would like to be able to bind this TextBox to different properties (while the TextBlock will always be bound to PlayerName).

    From your answer, I understand that this is not possible and that I should use 2 ListBox in my template.

    However, I do not understand how I could do so. How would it be possible in XAML ? (if not, should I do it from code behind and how ?)

    For example, what could I do when defining the HubSection below ?

    <HubSection x:Name="HubSecTest" Header="Test" ContentTemplate="{StaticResource TemplateTest}">
    
     </HubSection>

    Is there a code that could allow binding the TextBlock or TexBox to different properties (for the TextBlock it is easy since I can define it in the template) ?

    The itemsource is indeed the same. I have created a class called Players.cs into which the properties Players.PlayerName and Players.PlayerScore<1..n> are defined.

    Thank you again for your time.


    • Edited by MikePeter Monday, April 27, 2015 7:36 PM
    Monday, April 27, 2015 7:29 PM