Skip to main content Skip to footer

Mimic the Windows 8 Xbox Music App with C1TabControl

The C1TabControl allows you to display multiple pages of content while saving screen real estate. Using the C1TabControl we can replicate the UI of the new Xbox Music Windows 8.1 app. We will use the control to display tabs along the left edge, as well as some nested tabs for each page. When the user selects any tab the content will animate smoothly onto the screen. TabControl_Entrance First, define some styles for C1TabControl, C1TabItem and some TextBlocks.


<UserControl.Resources>  
    <Style x:Key="TabListStyle" TargetType="c1:C1TabControl">  
        <Setter Property="Margin" Value="20 10" />  
        <Setter Property="BorderThickness" Value="0" />  
        <Setter Property="SelectedBackground" Value="Green" />  
        <Setter Property="TabStripBackground" Value="#555555" />  
        <Setter Property="CanUserReorder" Value="False" />  
        <Setter Property="Padding" Value="0" />  
    </Style>  
    <Style x:Key="TabItemStyle" TargetType="c1:C1TabItem">  
        <Setter Property="Foreground" Value="White" />  
    </Style>  
    <Style x:Key="SectionTitleTextStyle" TargetType="TextBlock">  
        <Setter Property="FontSize" Value="30" />  
        <Setter Property="FontWeight" Value="Light" />  
        <Setter Property="Margin" Value="20 5" />  
    </Style>  
    <Style x:Key="SectionContentTextStyle" TargetType="TextBlock">  
        <Setter Property="FontSize" Value="14" />  
        <Setter Property="Margin" Value="10" />  
        <Setter Property="TextWrapping" Value="Wrap"/>  
    </Style>  
    <Style x:Key="TabHeaderTextStyle" TargetType="TextBlock">  
        <Setter Property="FontSize" Value="20" />  
        <Setter Property="Width" Value="160" />  
        <Setter Property="Foreground" Value="White" />  
        <Setter Property="Margin" Value="10 0" />  
    </Style>  
    <Style x:Key="TabHeaderIconStyle" TargetType="TextBlock">  
        <Setter Property="FontSize" Value="20" />  
        <Setter Property="FontFamily" Value="Segoe UI Symbol"/>  
        <Setter Property="Foreground" Value="White" />  
    </Style>  
    <Style x:Key="TransitionGrid" TargetType="Grid">  
        <Setter Property="Transitions">  
            <Setter.Value>  
                <TransitionCollection>  
                    <EntranceThemeTransition />  
                </TransitionCollection>  
            </Setter.Value>  
        </Setter>  
    </Style>  
</UserControl.Resources>  

Next, define a C1TabControl with three C1TabItems. We can specify the tab strip background as well as the selected tab background by simply setting these Brush properties. Set the TabStripPlacement to Left and the Padding to 0.


<c1:C1TabControl x:Name="c1TabControl1"  
            CanUserReorder="False"  
            TabStripPlacement="Left"  
            TabStripBackground="#555555"  
            Background="Transparent"  
            BorderThickness="0"  
            Padding="0"  
            SelectedBackground="Green">  
    <!-- Collection Tab-->  
    <c1:C1TabItem Padding="10 5">  
        <c1:C1TabItem.Header>  
            <StackPanel Orientation="Horizontal">  
                <TextBlock Text="&#xE189;"  
                    Style="{StaticResource TabHeaderIconStyle}" />  
                <TextBlock Text="Collection"  
                    Style="{StaticResource TabHeaderTextStyle}"/>  
            </StackPanel>  
        </c1:C1TabItem.Header>  
        <Grid Background="White"  
        RequestedTheme="Light">  
            <Grid Style="{StaticResource TransitionGrid}">  
                <Grid.RowDefinitions>  
                    <RowDefinition Height="Auto"/>  
                    <RowDefinition />  
                </Grid.RowDefinitions>  
                <TextBlock Text="Collection"  
                    Style="{StaticResource SectionTitleTextStyle}"/>  
                <c1:C1TabControl x:Name="c1TabControl2"  
                            Grid.Row="1"  
                            Style="{StaticResource TabListStyle}">  
                    <c1:C1TabItem Header="Albums" Style="{StaticResource TabItemStyle}">  
                        <Grid Style="{StaticResource TransitionGrid}">  
                            <TextBlock Style="{StaticResource SectionContentTextStyle}"> Lorem ipsum dolor sit amet...</TextBlock>  
                        </Grid>  
                    </c1:C1TabItem>  
                    <c1:C1TabItem Header="Artists" Style="{StaticResource TabItemStyle}">  
                        <Grid Style="{StaticResource TransitionGrid}">  
                            <TextBlock Style="{StaticResource SectionContentTextStyle}"> Lorem ipsum dolor sit amet...</TextBlock>  
                        </Grid>  
                    </c1:C1TabItem>  
                    <c1:C1TabItem Header="Songs" Style="{StaticResource TabItemStyle}">  
                        <Grid Style="{StaticResource TransitionGrid}">  
                            <TextBlock Style="{StaticResource SectionContentTextStyle}">Lorem ipsum dolor sit amet...</TextBlock>  
                        </Grid>  
                    </c1:C1TabItem>  
                </c1:C1TabControl>  
            </Grid>  
        </Grid>  
    </c1:C1TabItem>  

    <!-- Radio Tab-->  
    <c1:C1TabItem Padding="10 5">  
        <c1:C1TabItem.Header>  
            <StackPanel Orientation="Horizontal">  
                <TextBlock Text="&#xE2DF;"  
                    Style="{StaticResource TabHeaderIconStyle}"  
                    FontSize="18"/>  
                <TextBlock Text="Radio"  
                    Style="{StaticResource TabHeaderTextStyle}"/>  
            </StackPanel>  
        </c1:C1TabItem.Header>  
        ...  
    </c1:C1TabItem>  

    <!-- Explore Tab-->  
    <c1:C1TabItem Padding="10 5">  
        <c1:C1TabItem.Header>  
            <StackPanel Orientation="Horizontal">  
                <TextBlock Text="&#xE109;"  
                    Style="{StaticResource TabHeaderIconStyle}"/>  
                <TextBlock Text="Explore"  
                    Style="{StaticResource TabHeaderTextStyle}"/>  
            </StackPanel>  
        </c1:C1TabItem.Header>  
        ...  
    </c1:C1TabItem>  
</c1:C1TabControl>  

For each C1TabItem, define the header as a StackPanel containing the icon and text label. In this case, the icon is just another TextBlock showing a Segoe UI Symbol.

Entrance Animation

One of the key pieces to replicating the Xbox Music UI is the entrance animation that occurs on contents when the user switches tabs. This can be easily achieved by adding an EntranceThemeTransition element to the tabs contents, in this case a Grid element. It’s achieved in the XAML above through the TransitionGrid style:


<Style x:Key="TransitionGrid" TargetType="Grid">  
    <Setter Property="Transitions">  
        <Setter.Value>  
            <TransitionCollection>  
                <EntranceThemeTransition />  
            </TransitionCollection>  
        </Setter.Value>  
    </Setter>  
</Style>  

Performance Tip

A key property to note on the C1TabControl is the UnselectedContentMode property. This property determines how unselected tab content is rendered: outside the visual tree or collapsed. If you need to access UI elements across tabs then you should set this to collapsed. But for best performance, you should keep it set to outside the visual tree so elements are not rendered until necessary.

Conclusion

As you can see in this short sample, the C1TabControl not only provides a classic tab user interface, but it can be used to create some modern variations of tabs. It saves you the time of having to create the ListBox for the tab headers and the logic for switching between tabs. You can download the C1TabControl as part of Studio for WinRT XAML.

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus