Question

我正在尝试构建一个如下所示的CommandBar：

具有带有图标的SecondaryCommands的所需CommandBar

但是我无法找到一种方法来编辑CommandOverflowPresenter的默认样式，以便显示它们在Mail Windows 10通用应用程序中显示的SecondaryCommands，左侧是图标，右侧是文本标签。

CommandOverflowPresenter没有Content属性来围绕它构建控件模板，并将内容元素绑定到AppBarButton Icon和Label属性。

我发现了这个article，但它没有显示AppBarButton的样式。

Stack Overflow还有另一个问题，结论是构建一个自定义的CommandOverflowPresenter样式。你是怎么做到的？

默认CommandOverflowPresenter样式：

<!-- 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>

这就是我的尝试。

CommandOverflowPresenter是一个ItemsControl，我在CommandOverflowPresenter样式中为其ItemTemplate添加了一个Setter，并让Content模板成为默认样式。

运行时，将根据默认样式显示辅助命令，仅显示文本标签，但不显示图标。

也许在ItemTemplate的DataTemplate中没有正确设置绑定？

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

我还尝试使用SymbolIcon和Textblock在AppBarButton标签内添加StackPanel，但这也不起作用。

Answer 1

我们可以编辑AppBarButton的默认样式和模板来实现此目的。我认为没有必要构建自定义CommandOverflowPresenter样式。

Microsoft已为默认模板提供了XAML代码，我们可以在AppBarButton styles and templates找到。我们可以将此样式复制到Page.Resources，并为此样式指定一个类似x:Key="MyAppBarButtonStyle"的键。

默认情况下，图标和文字垂直放置在“ContentRoot”StackPanel中。我们可以改变它，如下所示将它们水平放置。

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

在此之后，我们需要像您提到的文章一样更改“溢出”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>

除此之外，我们可能还需要更改HorizontalAlignment的{{1}}和Width属性，以便AppBarButton可以占据StackPanel的全宽}。

CommandOverflowPresenter

最后，我们可以在<Setter Property="HorizontalAlignment" Value="Stretch" /> <Setter Property="Width" Value="Auto" />。

中使用此样式

SecondaryCommands

完整的风格可能会像：

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

如何在命令栏

1 个答案: