Vfrdtyky

I want a customized Pivot control in my app. I need it to be exactly as I've seen in an alarm app from which I've added a screenshot, below:

• I want the tab with icons and text


• Each tab should change its color when it's selected

How would I achieve this?

Fullscreen screenshot of the alarm app

Basically, you should use standard pivot control for that -- but instead of text put your own user controls or grouped into header content.

<Pivot Style="{StaticResource TabsStylePivotStyle}">

    <PivotItem>

        <PivotItem.Header>

            <local:TabHeader Label="item 1" Glyph="" />

        </PivotItem.Header>

        <TextBlock Text="Content content content" />

    </PivotItem>

    <PivotItem>

        <PivotItem.Header>

            <local:TabHeader Label="item 2" Glyph="" />

        </PivotItem.Header>

        <TextBlock Text="Content content content" />

   </PivotItem>

   <PivotItem>

       <PivotItem.Header>

           <local:TabHeader Label="item 3" Glyph="" />

       </PivotItem.Header>

       <TextBlock Text="Content content content" />

   </PivotItem>

Here is an official code sample (pay attention to scenario 3).

From Universal Sample

<UserControl

x:Class="UniversalProject.UWP.Controls.TabHeader"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:UniversalProject.UWP.Controls"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" Width="64" Height="68" IsTabStop="False"

d:DesignHeight="300"

d:DesignWidth="400">



<StackPanel >

    <FontIcon

        HorizontalAlignment="Center"

        Margin="0,12,0,0"

        Glyph="{Binding Glyph}"

        FontSize="16" />

    <TextBlock

        FontFamily="Segoe UI"

        Text="{Binding Label}"

        Style="{StaticResource CaptionTextBlockStyle}"

        LineStackingStrategy="BlockLineHeight"

        LineHeight="14"

        MaxLines="2"

        IsTextScaleFactorEnabled="False"

        TextAlignment="Center"

        HorizontalAlignment="Center"

        Margin="2,5,2,7" />

</StackPanel>

cs

    public static readonly DependencyProperty GlyphProperty = DependencyProperty.Register("Glyph", typeof(string), typeof(TabHeader), null);

    public string Glyph

    {

        get { return GetValue(GlyphProperty) as string; }

        set { SetValue(GlyphProperty, value); }

    }



    public static readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string), typeof(TabHeader), null);



    public string Label

    {

        get { return GetValue(LabelProperty) as string; }

        set { SetValue(LabelProperty, value); }

    }





    public TabHeader()

    {

        this.InitializeComponent();

        this.DataContext = this;

    }

Pivot style

        <Setter Property="Template">



            <Setter.Value>



                <ControlTemplate TargetType="Pivot">



                    <Grid x:Name="RootElement"



                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"



                        VerticalAlignment="{TemplateBinding VerticalAlignment}"



                        Background="{TemplateBinding Background}">







                        <Grid.Resources>



                            <Style x:Key="BaseContentControlStyle" TargetType="ContentControl">



                                <Setter Property="FontFamily" Value="Segoe UI" />



                                <Setter Property="FontWeight" Value="SemiBold" />



                                <Setter Property="FontSize" Value="15" />



                                <Setter Property="Template">



                                    <Setter.Value>



                                        <ControlTemplate TargetType="ContentControl">



                                            <ContentPresenter



                                                Margin="{TemplateBinding Padding}"



                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"



                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"



                                                Content="{TemplateBinding Content}"



                                                ContentTemplate="{TemplateBinding ContentTemplate}"



                                                ContentTransitions="{TemplateBinding ContentTransitions}"



                                                OpticalMarginAlignment="TrimSideBearings" />



                                        </ControlTemplate>



                                    </Setter.Value>



                                </Setter>



                            </Style>







                            <Style x:Key="TitleContentControlStyle" BasedOn="{StaticResource BaseContentControlStyle}" TargetType="ContentControl">



                                <Setter Property="FontWeight" Value="SemiLight" />



                                <Setter Property="FontSize" Value="24" />



                            </Style>







                            <!-- While used here to remove the spacing between header items, the PivotHeaderItem template can also be used to



                            display custom 'selected' visuals -->



                            <Style TargetType="PivotHeaderItem">



                                <Setter Property="Padding" Value="0" />



                            </Style>



                        </Grid.Resources>







                        <VisualStateManager.VisualStateGroups>



                            <VisualStateGroup x:Name="Orientation">



                                <VisualState x:Name="Portrait">



                                    <Storyboard>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />



                                        </ObjectAnimationUsingKeyFrames>



                                    </Storyboard>



                                </VisualState>



                                <VisualState x:Name="Landscape">



                                    <Storyboard>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />



                                        </ObjectAnimationUsingKeyFrames>



                                    </Storyboard>



                                </VisualState>



                            </VisualStateGroup>



                            <VisualStateGroup x:Name="NavigationButtonsVisibility">



                                <VisualState x:Name="NavigationButtonsHidden" />



                                <VisualState x:Name="NavigationButtonsVisible">



                                    <Storyboard>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="Opacity">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />



                                        </ObjectAnimationUsingKeyFrames>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="IsEnabled">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True" />



                                        </ObjectAnimationUsingKeyFrames>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="Opacity">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />



                                        </ObjectAnimationUsingKeyFrames>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="IsEnabled">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True" />



                                        </ObjectAnimationUsingKeyFrames>



                                    </Storyboard>



                                </VisualState>



                            </VisualStateGroup>



                            <VisualStateGroup x:Name="HeaderStates">



                                <VisualState x:Name="HeaderDynamic" />



                                <VisualState x:Name="HeaderStatic">



                                    <Storyboard>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />



                                        </ObjectAnimationUsingKeyFrames>



                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility">



                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />



                                        </ObjectAnimationUsingKeyFrames>



                                    </Storyboard>



                                </VisualState>



                            </VisualStateGroup>



                        </VisualStateManager.VisualStateGroups>



                        <Grid.RowDefinitions>



                            <RowDefinition Height="Auto" />



                            <RowDefinition Height="*" />



                        </Grid.RowDefinitions>







                        <ContentControl x:Name="TitleContentControl"



                            Margin="{StaticResource PivotPortraitThemePadding}"



                            Content="{TemplateBinding Title}"



                            ContentTemplate="{TemplateBinding TitleTemplate}"



                            IsTabStop="False"



                            Style="{StaticResource TitleContentControlStyle}"



                            Visibility="Collapsed" />







                        <Grid Grid.Row="1">







                            <Grid.Resources>



                                <ResourceDictionary>



                                    <ResourceDictionary.ThemeDictionaries>



                                        <ResourceDictionary x:Key="Default">



                                            <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />



                                            <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />



                                        </ResourceDictionary>



                                        <ResourceDictionary x:Key="Light">



                                            <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />



                                            <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />



                                        </ResourceDictionary>



                                        <ResourceDictionary x:Key="HighContrast">



                                            <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemColorWindowColor}" />



                                            <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemColorButtonTextColor}" />



                                        </ResourceDictionary>



                                    </ResourceDictionary.ThemeDictionaries>







                                    <ControlTemplate x:Key="NextTemplate" TargetType="Button">



                                        <Border x:Name="Root"



                                            Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"



                                            BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"



                                            BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}">



                                            <VisualStateManager.VisualStateGroups>



                                                <VisualStateGroup x:Name="CommonStates">



                                                    <VisualState x:Name="Normal" />



                                                    <VisualState x:Name="PointerOver">



                                                        <Storyboard>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                        </Storyboard>



                                                    </VisualState>



                                                    <VisualState x:Name="Pressed">



                                                        <Storyboard>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                        </Storyboard>



                                                    </VisualState>



                                                </VisualStateGroup>



                                            </VisualStateManager.VisualStateGroups>



                                            <FontIcon x:Name="Arrow"



                                                HorizontalAlignment="Center"



                                                VerticalAlignment="Center"



                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"



                                                FontSize="12"



                                                Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"



                                                Glyph=""



                                                MirroredWhenRightToLeft="True"



                                                UseLayoutRounding="False" />



                                        </Border>



                                    </ControlTemplate>







                                    <ControlTemplate x:Key="PreviousTemplate" TargetType="Button">



                                        <Border x:Name="Root"



                                            Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"



                                            BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"



                                            BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}">



                                            <VisualStateManager.VisualStateGroups>



                                                <VisualStateGroup x:Name="CommonStates">



                                                    <VisualState x:Name="Normal" />



                                                    <VisualState x:Name="PointerOver">



                                                        <Storyboard>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                        </Storyboard>



                                                    </VisualState>



                                                    <VisualState x:Name="Pressed">



                                                        <Storyboard>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">



                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />



                                                            </ObjectAnimationUsingKeyFrames>



                                                        </Storyboard>



                                                    </VisualState>



                                                </VisualStateGroup>



                                            </VisualStateManager.VisualStateGroups>



                                            <FontIcon x:Name="Arrow"



                                                HorizontalAlignment="Center"



                                                VerticalAlignment="Center"



                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"



                                                FontSize="12"



                                                Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"



                                                Glyph=""



                                                MirroredWhenRightToLeft="True"



                                                UseLayoutRounding="False" />



                                        </Border>



                                    </ControlTemplate>



                                </ResourceDictionary>



                            </Grid.Resources>







                            <ScrollViewer x:Name="ScrollViewer"



                                Margin="{TemplateBinding Padding}"



                                VerticalContentAlignment="Stretch"



                                BringIntoViewOnFocusChange="False"



                                HorizontalScrollBarVisibility="Hidden"



                                HorizontalSnapPointsAlignment="Center"



                                HorizontalSnapPointsType="MandatorySingle"



                                Template="{StaticResource ScrollViewerScrollBarlessTemplate}"



                                VerticalScrollBarVisibility="Disabled"



                                VerticalScrollMode="Disabled"



                                VerticalSnapPointsType="None"



                                ZoomMode="Disabled">



                                <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">



                                    <Grid x:Name="PivotLayoutElement" >



                                        <Grid.RowDefinitions>



                                            <RowDefinition Height="Auto" />



                                            <RowDefinition Height="*" />



                                        </Grid.RowDefinitions>







                                        <!-- By setting the column definitions to *,Auto,* allows the tabs to be centered by default -->



                                        <Grid.ColumnDefinitions>



                                            <ColumnDefinition Width="*" />



                                            <ColumnDefinition Width="Auto" />



                                            <ColumnDefinition Width="*" />



                                        </Grid.ColumnDefinitions>



                                        <Grid.RenderTransform>



                                            <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />



                                        </Grid.RenderTransform>







                                        <!--  This border is used as a backplate for the header area  -->



                                        <Border



                                            Grid.ColumnSpan="3"



                                            Background="{ThemeResource SystemControlPageBackgroundChromeMediumBrush}"



                                            BorderBrush="{ThemeResource SystemControlForegroundChromeMediumBrush}"



                                            BorderThickness="0,0,0,1" />







                                        <ContentPresenter x:Name="LeftHeaderPresenter"



                                            HorizontalAlignment="Stretch"



                                            VerticalAlignment="Stretch"



                                            Content="{TemplateBinding LeftHeader}"



                                            ContentTemplate="{TemplateBinding LeftHeaderTemplate}" />



                                        <ContentControl x:Name="HeaderClipper"



                                            Grid.Column="1"



                                            HorizontalContentAlignment="Stretch"



                                            UseSystemFocusVisuals="True">



                                            <ContentControl.Clip>



                                                <RectangleGeometry x:Name="HeaderClipperGeometry" />



                                            </ContentControl.Clip>



                                            <Grid Background="Transparent">



                                                <PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed" />



                                                <PivotHeaderPanel x:Name="Header">



                                                    <PivotHeaderPanel.RenderTransform>



                                                        <TransformGroup>



                                                            <CompositeTransform x:Name="HeaderTranslateTransform" />



                                                            <CompositeTransform x:Name="HeaderOffsetTranslateTransform" />



                                                        </TransformGroup>



                                                    </PivotHeaderPanel.RenderTransform>



                                                </PivotHeaderPanel>



                                            </Grid>



                                        </ContentControl>



                                        <Button x:Name="PreviousButton"



                                            Grid.Column="1"



                                            Width="20"



                                            Height="36"



                                            Margin="{ThemeResource PivotNavButtonMargin}"



                                            HorizontalAlignment="Left"



                                            VerticalAlignment="Top"



                                            Background="Transparent"



                                            IsEnabled="False"



                                            IsTabStop="False"



                                            Opacity="0"



                                            Template="{StaticResource PreviousTemplate}"



                                            UseSystemFocusVisuals="False" />



                                        <Button x:Name="NextButton"



                                            Grid.Column="1"



                                            Width="20"



                                            Height="36"



                                            Margin="{ThemeResource PivotNavButtonMargin}"



                                            HorizontalAlignment="Right"



                                            VerticalAlignment="Top"



                                            Background="Transparent"



                                            IsEnabled="False"



                                            IsTabStop="False"



                                            Opacity="0"



                                            Template="{StaticResource NextTemplate}"



                                            UseSystemFocusVisuals="False" />



                                        <ContentPresenter x:Name="RightHeaderPresenter"



                                            Grid.Column="2"



                                            HorizontalAlignment="Stretch"



                                            VerticalAlignment="Stretch"



                                            Content="{TemplateBinding RightHeader}"



                                            ContentTemplate="{TemplateBinding RightHeaderTemplate}" />



                                        <ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">



                                            <ItemsPresenter.RenderTransform>



                                                <TransformGroup>



                                                    <TranslateTransform x:Name="ItemsPresenterTranslateTransform" />



                                                    <CompositeTransform x:Name="ItemsPresenterCompositeTransform" />



                                                </TransformGroup>



                                            </ItemsPresenter.RenderTransform>



                                        </ItemsPresenter>



                                    </Grid>



                                </PivotPanel>



                            </ScrollViewer>



                        </Grid>



                    </Grid>



                </ControlTemplate>



            </Setter.Value>



        </Setter>



    </Style>