2016-07-09 8 views
0

ich ein CommandBar zu bauen bin versucht, die wie folgt aussieht:Wie Symbole SecondaryCommands in Befehlsleiste hinzufügen

Wunsch CommandBar mit SecondaryCommands, die Symbole

Aber ich kann nicht einen Weg finden, haben Bearbeiten Sie den Standardstil von CommandOverflowPresenter, um SecondaryCommands so anzuzeigen, wie sie in der Mail Windows 10 Universal App angezeigt werden, mit Symbolen auf der linken Seite und Textbeschriftungen auf der rechten Seite.

Der CommandOverflowPresenter verfügt nicht über eine Content-Eigenschaft, um eine Steuerelementvorlage um ihn herum zu erstellen und Inhaltselemente an AppBarButton Icon und Label-Eigenschaften zu binden.

Ich fand diese article, aber es zeigt nicht den Stil für den AppBarButton.

Es gab eine weitere Frage zu Stack Overflow, und die Schlussfolgerung besteht darin, einen benutzerdefinierten CommandOverflowPresenter-Stil zu erstellen. Wie machst du das?

Standard CommandOverflowPresenter Stil:

<!-- Default style for Windows.UI.Xaml.Controls.CommandBarOverflowPresenter --> 
<Style TargetType="CommandBarOverflowPresenter"> 
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" /> 
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" /> 
    <Setter Property="MaxWidth" Value="{ThemeResource CommandBarOverflowMaxWidth}"/> 
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /> 
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="CommandBarOverflowPresenter"> 
       <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
         BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" > 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="DisplayModeStates"> 
          <VisualState x:Name="DisplayModeDefault" /> 
          <VisualState x:Name="FullWidthOpenDown" > 
           <VisualState.Setters> 
            <Setter Target="LayoutRoot.BorderThickness" Value="0,0,0,1" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="FullWidthOpenUp" > 
           <VisualState.Setters> 
            <Setter Target="LayoutRoot.BorderThickness" Value="0,1,0,0" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ScrollViewer 
         HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
         VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
         VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
         ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" 
         AutomationProperties.AccessibilityView="Raw"> 
         <ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7"/> 
        </ScrollViewer> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Dies ist, was ich versuchte.

CommandOverflowPresenter ist ein ItemsControl, und ich habe einen Setter für ItemTemplate im CommandOverflowPresenter-Stil hinzugefügt und die Inhaltsvorlage im Standardformat beibehalten.

Beim Ausführen werden die sekundären Befehle gemäß dem Standardstil angezeigt. Es werden nur Textbeschriftungen angezeigt, nicht jedoch die Symbole.

Vielleicht sind die Bindungen in der DataTemplate von ItemTemplate nicht richtig eingerichtet?

<CommandBar.CommandBarOverflowPresenterStyle> 
    <Style TargetType="CommandBarOverflowPresenter"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="CommandBarOverflowPresenter"> 
        <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" > 

         <!--<Grid.Resources> 
          <DataTemplate x:Key="SecondaryMenu"> 
           <StackPanel Orientation="Horizontal"> 
            <SymbolIcon Symbol="{TemplateBinding AppBarButton.Icon}"/> 
            <TextBlock Text="{TemplateBinding AppBarButton.Label}" /> 
           </StackPanel> 
          </DataTemplate> 
         </Grid.Resources>--> 

         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="DisplayModeStates"> 
           <VisualState x:Name="DisplayModeDefault" /> 
           <VisualState x:Name="FullWidthOpenDown" > 
            <VisualState.Setters> 
             <Setter Target="LayoutRoot.BorderThickness" Value="0,0,0,1" /> 
            </VisualState.Setters> 
           </VisualState> 
           <VisualState x:Name="FullWidthOpenUp" > 
            <VisualState.Setters> 
             <Setter Target="LayoutRoot.BorderThickness" Value="0,1,0,0" /> 
            </VisualState.Setters> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 

         <ScrollViewer 
          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
          ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" 
          AutomationProperties.AccessibilityView="Raw"> 
          <ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7"> 
          </ItemsPresenter> 
         </ScrollViewer> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 

     <Setter Property="ItemTemplate"> 
      <Setter.Value> 
       <DataTemplate x:DataType="AppBarButton"> 
        <StackPanel Orientation="Horizontal"> 
         <SymbolIcon Symbol="{Binding Icon}" /> 
         <TextBlock Text="{Binding Label}" /> 
        </StackPanel> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</CommandBar.CommandBarOverflowPresenterStyle> 

Ich habe auch versucht einen Stackpanel innerhalb der AppBarButton Tags mit einem SymbolIcon und einem Textblock hinzuzufügen, aber das hat nicht funktioniert.

Antwort

0

Wir können den Standardstil und die Vorlage von AppBarButton bearbeiten, um dies zu erreichen. Und ich denke, es gibt keine Notwendigkeit, einen benutzerdefinierten CommandOverflowPresenter Stil zu bauen.

Microsoft hat XAML-Code für die Standardvorlage bereitgestellt, die wir unter AppBarButton styles and templates finden können. Wir können diesen Stil in Page.Resources kopieren und diesem Stil einen Schlüssel wie x:Key="MyAppBarButtonStyle" geben.

Standardmäßig werden das Symbol und der Text vertikal in "ContentRoot" StackPanel platziert. Wir können es wie folgt ändern, um sie horizontal zu platzieren.

Danach müssen wir den „Überlauf“ VisualState wie der Artikel, den Sie auf das Symbol, um sicherzustellen, erwähnt ändern können, in dem Untermenü angezeigt.

<VisualState x:Name="Overflow"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState> 

Daneben können wir müssen auch die AppBarButtonHorizontalAlignment und Width Eigenschaft ändern wie folgt, so dass die StackPanel volle Breite CommandOverflowPresenter nehmen.

<Setter Property="HorizontalAlignment" Value="Stretch" /> 
<Setter Property="Width" Value="Auto" /> 

Schließlich können wir dieses Modell auch in SecondaryCommands verwenden.

<CommandBar.SecondaryCommands> 
    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}" 
        Click="AppBarButton_Click" 
        Icon="Like" 
        Label="Like" /> 
    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}" 
        Click="AppBarButton_Click" 
        Icon="Dislike" 
        Label="Dislike" /> 
</CommandBar.SecondaryCommands> 

Der komplette Stil gefallen könnten:

<Style x:Key="MyAppBarButtonStyle" TargetType="AppBarButton"> 
    <Setter Property="HorizontalAlignment" Value="Stretch" /> 
    <Setter Property="Width" Value="Auto" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="AppBarButton"> 
       <Grid x:Name="Root" 
         MinWidth="{TemplateBinding MinWidth}" 
         MaxWidth="{TemplateBinding MaxWidth}" 
         Background="{TemplateBinding Background}"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="ApplicationViewStates"> 
          <VisualState x:Name="FullSize" /> 
          <VisualState x:Name="Compact"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Overflow"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="OverflowWithToggleButtons"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="InputModeStates"> 
          <VisualState x:Name="InputModeDefault" /> 
          <VisualState x:Name="TouchInputMode"> 
           <VisualState.Setters> 
            <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}" Orientation="Horizontal"> 
         <ContentPresenter x:Name="Content" 
              Margin="12,0,0,0" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Center" 
              AutomationProperties.AccessibilityView="Raw" 
              Content="{TemplateBinding Icon}" 
              Foreground="{TemplateBinding Foreground}" /> 
         <TextBlock x:Name="TextLabel" 
            Margin="12,0,12,0" 
            VerticalAlignment="Center" 
            FontFamily="{TemplateBinding FontFamily}" 
            FontSize="15" 
            Foreground="{TemplateBinding Foreground}" 
            Text="{TemplateBinding Label}" 
            TextAlignment="Center" 
            TextWrapping="Wrap" /> 
        </StackPanel> 

        <TextBlock x:Name="OverflowTextLabel" 
           Margin="12,0,12,0" 
           HorizontalAlignment="Stretch" 
           VerticalAlignment="Center" 
           FontFamily="{TemplateBinding FontFamily}" 
           FontSize="15" 
           Foreground="{TemplateBinding Foreground}" 
           Padding="0,5,0,7" 
           Text="{TemplateBinding Label}" 
           TextAlignment="Left" 
           TextTrimming="Clip" 
           TextWrapping="NoWrap" 
           Visibility="Collapsed" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
+0

Amazing! Es klappt. Danke mein Herr! –