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.
Amazing! Es klappt. Danke mein Herr! –