UWP中的响应式数据透视表

时间:2017-03-30 12:21:08

标签: uwp pivot

我正在尝试在UWP中开发此演示。 Pivot中有4个PivotItems。除了item1之外,所有项目都可以通过doubletap删除。并且可以通过下面的按钮再次添加。

Xaml Code

<Page
x:Class="DemoAppUWP.View.LoginView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DemoAppUWP.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
    <Style TargetType="PivotHeaderItem">
        <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
        <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
        <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
        <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
        <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
        <Setter Property="Height" Value="48" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
        <Setter Property="HorizontalAlignment" Value="Stretch" ></Setter>
        <!--<Setter Property="Width" Value="300"></Setter>-->
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PivotHeaderItem">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.Resources>
                            <Style  TargetType="ContentPresenter">
                                <Setter Property="FontFamily" Value="XamlAutoFontFamily"/>
                                <Setter Property="FontWeight" Value="SemiBold"/>
                                <Setter Property="FontSize" Value="15"/>
                                <Setter Property="TextWrapping" Value="Wrap"/>
                                <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
                                <Setter Property="TextLineBounds" Value="Full"/>
                                <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
                            </Style>

                        </Grid.Resources>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
                                    <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="UnselectedLocked">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform"
                             Storyboard.TargetProperty="X"
                             Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" />
                                        <DoubleAnimation Storyboard.TargetName="ContentPresenter"
                             Storyboard.TargetProperty="(UIElement.Opacity)"
                             Duration="0" To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                           Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Green" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                           Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                            Storyboard.TargetProperty="Foreground" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                           Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="UnselectedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                           Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                           Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter
                                  x:Name="ContentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                  Margin="{TemplateBinding Padding}"
                                  FontSize="{TemplateBinding FontSize}"
                                  FontFamily="{TemplateBinding FontFamily}"
                                  FontWeight="{TemplateBinding FontWeight}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <ContentPresenter.RenderTransform>
                                <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Page.Resources>
<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="0.50*"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <StackPanel Width="300" Margin="50,50,50,5" BorderBrush="Green" BorderThickness="2" Grid.Row="0"   >
        <RelativePanel  >
            <Pivot x:Name="agendaPivot" Margin="0 0 0 10" DoubleTapped="AgendaPivot_OnDoubleTapped" HorizontalContentAlignment="Stretch" >
                <PivotItem x:Name="Item1" Header="Title1" HorizontalContentAlignment="Stretch" >
                    <StackPanel Margin="100,10">
                        <TextBlock Text="Content1"></TextBlock>
                        <TextBlock Text="Content1"></TextBlock>
                        <TextBlock Text="Content1"></TextBlock>
                        <TextBlock Text="Content1"></TextBlock>
                        <TextBlock Text="Content1"></TextBlock>
                        <TextBlock Text="Content1"></TextBlock>
                    </StackPanel>

                </PivotItem>
                <PivotItem x:Name="Item2" Header="Title2" >
                    <StackPanel Margin="100,10">
                        <TextBlock Text="Content2"></TextBlock>
                        <TextBlock Text="Content2"></TextBlock>
                        <TextBlock Text="Content2"></TextBlock>
                        <TextBlock Text="Content2"></TextBlock>
                        <TextBlock Text="Content2"></TextBlock>
                        <TextBlock Text="Content2"></TextBlock>
                    </StackPanel>
                </PivotItem>
                <PivotItem x:Name="Item3" Header="Title3" >
                    <StackPanel Margin="100,10">
                        <TextBlock Text="Content3"></TextBlock>
                        <TextBlock Text="Content3"></TextBlock>
                        <TextBlock Text="Content3"></TextBlock>
                        <TextBlock Text="Content3"></TextBlock>
                        <TextBlock Text="Content3"></TextBlock>
                        <TextBlock Text="Content3"></TextBlock>
                    </StackPanel>
                </PivotItem>
                <PivotItem x:Name="Item4" Header="Title4" >
                    <StackPanel Margin="100,10">
                        <TextBlock Text="Content4"></TextBlock>
                        <TextBlock Text="Content4"></TextBlock>
                        <TextBlock Text="Content4"></TextBlock>
                        <TextBlock Text="Content4"></TextBlock>
                        <TextBlock Text="Content4"></TextBlock>
                        <TextBlock Text="Content4"></TextBlock>
                    </StackPanel>
                </PivotItem>
            </Pivot>
        </RelativePanel>
    </StackPanel>
    <StackPanel Grid.Row="1" Width="300"  BorderBrush="Green" BorderThickness="2" Orientation="Horizontal" HorizontalAlignment="Center">
        <Button x:Name="btn1" Content="Title2" Click="Btn1_OnClick" Margin="2"></Button>
        <Button x:Name="btn2" Content="Title3" Click="Btn2_OnClick" Margin="2"></Button>
        <Button x:Name="btn3" Content="Title4" Click="Btn3_OnClick" Margin="2"></Button>
    </StackPanel>
</Grid>

xaml.cs代码(删除并添加pivotitems)

public sealed partial class LoginView : Page
{
    public List<PivotItem> tempPivotList = new List<PivotItem>();
    public LoginView()
    {
        this.InitializeComponent();
    }

    private void AgendaPivot_OnDoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
    {
        var commentName = ((FrameworkElement)((UIElement)e.OriginalSource)).DataContext;
        var objPivot = new PivotItem();
        if (commentName is string)
        {
            switch ((string)commentName)
            {
                case "Title2":
                    objPivot = (PivotItem)agendaPivot.Items.FirstOrDefault(s => ((PivotItem)s).Name == "Item2");
                    break;
                case "Title3":
                    objPivot = (PivotItem)agendaPivot.Items.FirstOrDefault(s => ((PivotItem)s).Name == "Item3");
                    break;
                case "Title4":
                    objPivot = (PivotItem)agendaPivot.Items.FirstOrDefault(s => ((PivotItem)s).Name == "Item4");
                    break;
            }
            tempPivotList.Add(objPivot);
            agendaPivot.Items.Remove(objPivot);

        }
    }
    private void AddPivotIem(string commentType)
    {
        var objPivot = (PivotItem)agendaPivot.Items.FirstOrDefault(s => ((PivotItem)s).Name == commentType);
        if (objPivot == null)
        {
            objPivot = (PivotItem)tempPivotList.FirstOrDefault(s => ((PivotItem)s).Name == commentType);
            agendaPivot.Items.Add(objPivot);
            tempPivotList.Remove(objPivot);
        }
    }

    private void Btn1_OnClick(object sender, RoutedEventArgs e)
    {
        AddPivotIem("Item2");
    }

    private void Btn2_OnClick(object sender, RoutedEventArgs e)
    {
        AddPivotIem("Item3");
    }

    private void Btn3_OnClick(object sender, RoutedEventArgs e)
    {
        AddPivotIem("Item4");
    }
}

我想在这里实现的是有2个枢轴项目,然后将区域划分为两个。如果只有一个项目,它应该在整个枢轴中显示出来。

现在我正在获取blcnk空间而不是删除项目,如下图所示 enter image description here

我怎么能得到那个。我试图给horizantalalignment = strech到pivoteitem.but它是wting.please帮助我 谢谢。

1 个答案:

答案 0 :(得分:2)

<Style  TargetType="Pivot">
    <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-->

                    </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="&#xE0E3;"
                                                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="&#xE0E2;"
                                                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"
                                            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="0"
                                            HorizontalContentAlignment="Center"
                                            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>