Friday, April 24, 2015

Hubsections and ContentTemplate and ContentControl

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 :)

No comments:

Post a Comment