Question

我想在我的应用中使用自定义的Pivot控件。我需要它与我在警报应用程序中看到的完全一样，我在其中添加了屏幕截图，如下所示：

我想要带有图标和文字的标签
每个标签在选中时都应更改颜色

我将如何实现这一目标？

Answer 1

基本上，您应该使用标准的数据透视控制 - 但不是文本放置您自己的用户控件或分组到标题内容。

<Pivot Style="{StaticResource TabsStylePivotStyle}">
    <PivotItem>
        <PivotItem.Header>
            <local:TabHeader Label="item 1" Glyph="&#xE719;" />
        </PivotItem.Header>
        <TextBlock Text="Content content content" />
    </PivotItem>
    <PivotItem>
        <PivotItem.Header>
            <local:TabHeader Label="item 2" Glyph="&#xE721;" />
        </PivotItem.Header>
        <TextBlock Text="Content content content" />
   </PivotItem>
   <PivotItem>
       <PivotItem.Header>
           <local:TabHeader Label="item 3" Glyph="&#xE723;" />
       </PivotItem.Header>
       <TextBlock Text="Content content content" />
   </PivotItem>

这是an official code sample（注意方案3）。

Answer 2

来自Universal Sample

    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;
    }

<强> CS

        <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="&#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"

                                            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>

数据透视风格

//*[@id='fileListVideo']//*[starts-with(@class,'qq-upload-button')]

如何在UWP中创建Tab Header Pivot控件？

2 个答案: