Hub Control Universal Windows Apps

0
votes

I'm building an universal application for windows (windows 8.1 and windows phone 8.1). I want to use a hub control with only 2 tabs, but for some reason the background won't continue or it won't show the background on the second tab. When I only have one tab it will show a black line on the right. Is there a way to fix those things?

Regards,

Tom

By request i pasted my code. The hubsection can be placed several times. When there is only one or two it won't work. When you add the third it will

<Page
x:Class="RestaurantApp.ListPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RestaurantApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding Source={StaticResource MainVM}}"
mc:Ignorable="d" >
<!--<Page.Transitions>
    <TransitionCollection>
        <NavigationThemeTransition>
            <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                <ContinuumNavigationTransitionInfo></ContinuumNavigationTransitionInfo>
            </NavigationThemeTransition.DefaultNavigationTransitionInfo>
        </NavigationThemeTransition>
    </TransitionCollection>
</Page.Transitions>-->
<Grid x:Name="LayoutRoot">
    <Hub x:Name="Hub" x:Uid="Hub" Header="ducommerce" Background="{StaticResource HubBackgroundImageBrush}">
        <HubSection x:Uid="HubSection1" Header="{Binding SpecialDishes.Name}" >
            <DataTemplate>
                <ListView
                    ItemsSource="{Binding SpecialDishes.Items}"
                    IsItemClickEnabled="True"
                    ContinuumNavigationTransitionInfo.ExitElementContainer="True" ItemTemplate="{StaticResource SmallImageItemWithDescription}">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="Margin" Value="0,0,0,12"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
            </DataTemplate>
        </HubSection>

   </Hub>
</Grid>
</Page>
4
c#windows-phone-8winrt-xamlwindows-phone-8.1
You need to post your code to help understand the issue. Right now, I doubt anybody can help you – Miiite
done. I've placed the code in the original post – Tom Droste

4 Answers

1
votes

You probably see this by now. But...

  1. Your Hub only has a single HubSection, you think it has two.
  2. Your Hub.Background is being set, not your HubSection.Background

Best of luck!

0
votes

I think the problem does not come from the HUB, or the number of HubSections you use. I've used the following code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="LayoutRoot">
        <Hub x:Name="Hub" x:Uid="Hub" Header="ducommerce" Background="{StaticResource background}">
            <HubSection x:Uid="HubSection1" Header="{Binding SpecialDishes.Name}" >
                <DataTemplate>
                    <ListView
                ItemsSource="{Binding Items}"
                IsItemClickEnabled="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Button Content="testbtn"></Button>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0,0,0,12"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </DataTemplate>
            </HubSection>
            <HubSection x:Uid="HubSection1" Header="{Binding SpecialDishes.Name}" >
                <DataTemplate>
                    <ListView
                ItemsSource="{Binding Items}"
                IsItemClickEnabled="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Button Content="testbtn"></Button>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0,0,0,12"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </DataTemplate>
            </HubSection>

            <!--<HubSection x:Uid="HubSection1" Header="{Binding SpecialDishes.Name}" >
                <DataTemplate>
                    <ListView
                ItemsSource="{Binding Items}"
                IsItemClickEnabled="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Button Content="testbtn"></Button>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0,0,0,12"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </DataTemplate>
            </HubSection>-->
        </Hub>
    </Grid>
</Grid>

And the background is displayed on every HubSection, whether there are 1, 2 or 3. Try your code with another brush than your "HubBackgroundImageBrush", like a color brush, and see if it is shown.

0
votes

Try this 

<Hub Header="The Header" Margin="0,27,0,0">

        <Hub.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="The Text" FontSize="66"></TextBlock>
            </DataTemplate>
        </Hub.HeaderTemplate>

        <Hub.Background>
            <ImageBrush ImageSource="Assets/TheBackground.jpg" Stretch="UniformToFill"/>
        </Hub.Background>
</Hub>
0
votes

I'm not sure if this still holds true but according to the linked article the Hub control does not scroll infinitely when it has only one section...

http://blogs.msdn.com/b/thunbrynt/archive/2014/04/08/windows-phone-8-1-for-developers-what-controls-are-new.aspx