UWP Rahmen für Pivot Header erstellen

Ich verwende Pivot, um ein Menü mit 3 Optionen zu erstellen. Der Code ist unten.UWP Rahmen für Pivot Header erstellen

<Pivot x:Name="menuPivot" Margin="0" SelectedIndex="0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.ColumnSpan="2" SelectionChanged="ListView_SelectionChanged"> 

     <PivotItem Header="Day" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0,0,10,0" /> 
     <PivotItem Header="Week" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="0,0,10,0" /> 
     <PivotItem Header="Month" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="-1,0,0,0" Background="#FFFB0000" BorderBrush="{StaticResource currentThemeColor}" /> 
    </Pivot>

Ich brauche diesen Blick für das Menü zu erreichen:

Bisher habe ich den Pivots Standardstil für Kopfzeile mit folgendem Code geändert:

<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="Transparent" /> 
    <Setter Property="Foreground" Value="Gray" /> 
    <!-- original value {ThemeResource SystemControlForegroundBaseMediumBrush} --> 
    <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" /> 
    <Setter Property="Height" Value="48" /> 
    <Setter Property="VerticalContentAlignment" Value="Center" /> 
    <Setter Property="HorizontalContentAlignment" 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 x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter"> 
          <Setter Property="FontFamily" Value="Segoe UI" /> 
          <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> 
         <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}"> 
          <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" /> 
          <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" /> 
          <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" /> 

         </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="{StaticResource currentThemeColor}" /> 
             <!-- original value {ThemeResource SystemControlHighlightAltBaseHighBrush} --> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </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>

ich diesen Blick:

Ich kann nicht herausfinden, wie Grenzen wie die auf dem ersten Bild hinzufügen, und wie Sie ändern die Rahmenfarbe des ausgewählten Headers?

Auch, wenn Sie denken, dass dies auf eine einfachere Weise mit einer anderen Steuerung als Pivot getan werden kann, wäre das auch hilfreich.

Quelle

2016-05-31 alminh

Sie vier Border in der PivotHeaderItem Vorlage wie folgt hinzufügen:

<Style TargetType="PivotHeaderItem"> 
    <!--...--> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="PivotHeaderItem"> 
       <Grid x:Name="Grid" Background="{TemplateBinding Background}" Width="100"> 
        <!--...--> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <!--...--> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
             Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" 
             Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightLine" 
             Storyboard.TargetProperty="Width"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="2" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedLine" 
             Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> 
            </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> 
        <Border x:Name="TopLine" Height="3" Background="Blue" VerticalAlignment="Top" HorizontalAlignment="Stretch" /> 
        <Border x:Name="BottomLine" Height="2" Background="LightGray" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" /> 
        <Border x:Name="RightLine" Width="1" Background="LightGray" VerticalAlignment="Center" 
          HorizontalAlignment="Right" Height="{TemplateBinding FontSize}" /> 
        <Border x:Name="SelectedLine" Height="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" 
          Background="LightGray" Margin="15,0,0,0" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

ich Teil des Codes im Stil zeigt kommentiert für klar, was ich geändert haben, können Sie sehen, dass ich eine Breite Grid gab zum Testen hier können Sie es entfernen.

Ich änderte auch die Selected Visual State, um den Vordergrund des Headers, "Separator" s Breite und meine SelectedLine Hintergrund zu ändern. Hier ist das Renderbild meines Stils:

Quelle

2016-06-01 05:52:23

Feng-MSFT Das funktioniert wie ein Zauber! Aber das Problem ist, ich habe 2 Pivots, eine für das Menü und andere für die verschiedenen Inhalte. Gibt es eine Möglichkeit, diesen Header-Stil auf nur einen Drehpunkt anzuwenden? – alminh

@alminh, es gibt eine sehr einfache Möglichkeit, dies zu tun, Sie können ein 'Grid'-Steuerelement außerhalb Ihres gewünschten' Pivot' setzen und den Stil in die Ressourcen dieses Rasters einfügen. –

@ Feng-MSFT Danke, es funktioniert jetzt gut. – alminh

Sie könnten Ihr eigenes Steuerelement mit einem 3 (oder 5, wenn Sie Separatoren in ihren eigenen Spalten setzen) Spaltenraster von RadioButtons an der Spitze, um die Überschriften anzuzeigen. Wenn man sich die default template anschaut, sieht es so aus, als wäre es eine hübsche Blackbox und man könnte besser mit der eigenen umgehen. Sie können auch einfach die Header aus dem Standard entfernen und haben ein 3-Spalten-Raster über dem neu gestalteten Pivot.

Quelle

2016-05-31 22:43:45

Vielen Dank für Ihre Unterstützung. Es ist eine interessante Lösung. Ich werde es sicher versuchen. – alminh

Antwort

Verwandte Themen