locked
can't find Pivot styles and templates

    Question

  • i dev a winphone runtime app,

    i want to change the Pivot's template,but i can't find the default template of the Pivot.

    Can you tell me if it has provide for developer?

    And where it is ?

    Saturday, March 07, 2015 4:29 PM

Answers

  • You can right-click on the Pivot element in design mode in Visual Studio and choose "Edit Template"->"Edit a Copy...". This will copy the default template into your XAML and you can modify it according to your requirements.

    The following gets rendered in a Windows Phone 8.1 App:

     
    <Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
            <Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
            <Style x:Key="PivotStyle1" TargetType="Pivot">
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <Grid/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Pivot">
                            <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="Orientation">
                                        <VisualState x:Name="Portrait">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Landscape">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                                <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                                    <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                        <PivotHeaderPanel x:Name="Header">
                                            <PivotHeaderPanel.RenderTransform>
                                                <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                            </PivotHeaderPanel.RenderTransform>
                                        </PivotHeaderPanel>
                                        <ItemsPresenter x:Name="PivotItemPresenter">
                                            <ItemsPresenter.RenderTransform>
                                                <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                            </ItemsPresenter.RenderTransform>
                                        </ItemsPresenter>
                                    </PivotPanel>
                                </ScrollViewer>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and please start a new thread if you have a new question.

    • Marked as answer by jingliancui Sunday, March 08, 2015 6:29 AM
    Saturday, March 07, 2015 6:25 PM

All replies

  • You can right-click on the Pivot element in design mode in Visual Studio and choose "Edit Template"->"Edit a Copy...". This will copy the default template into your XAML and you can modify it according to your requirements.

    The following gets rendered in a Windows Phone 8.1 App:

     
    <Thickness x:Key="PivotPortraitThemePadding">19,38,0,0</Thickness>
            <Thickness x:Key="PivotLandscapeThemePadding">19,25,0,0</Thickness>
            <Style x:Key="PivotStyle1" TargetType="Pivot">
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <Grid/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Pivot">
                            <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="Orientation">
                                        <VisualState x:Name="Portrait">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Landscape">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
                                <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                                    <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                        <PivotHeaderPanel x:Name="Header">
                                            <PivotHeaderPanel.RenderTransform>
                                                <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                            </PivotHeaderPanel.RenderTransform>
                                        </PivotHeaderPanel>
                                        <ItemsPresenter x:Name="PivotItemPresenter">
                                            <ItemsPresenter.RenderTransform>
                                                <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                            </ItemsPresenter.RenderTransform>
                                        </ItemsPresenter>
                                    </PivotPanel>
                                </ScrollViewer>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and please start a new thread if you have a new question.

    • Marked as answer by jingliancui Sunday, March 08, 2015 6:29 AM
    Saturday, March 07, 2015 6:25 PM
  • thank you very much !

    it's useful!

    Sunday, March 08, 2015 6:30 AM