2

尝试在 CommandBar 上使用新的 IsDynamicOverflowEnabled 属性时，我遇到了溢出的样式问题。问题如下，当 AppBarButton 的 Style 没有被覆盖并下降到溢出区域时，AppBarButton 的高光会延伸到 Popup 的整个宽度，并且它的悬停/命中检测也是 Popup 的整个宽度。

当它的样式被覆盖时，突出显示仅覆盖文本区域（在本例中为主页），并且其悬停/命中检测仅在该区域上，即使覆盖样式与 generic.xaml 中的样式完全相同。

我注意到在运行时检查属性时，那些未被覆盖的属性正在应用来自 TargetType - FrameworkElement 的另一种样式。

通过查看 generic.xaml，我唯一能看到这种样式更改的地方是 CommandBarOverflowPresenter（见下文）

<CommandBarOverflowPresenter.ItemContainerStyle>
  <Style TargetType="FrameworkElement">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="Width" Value="NaN" />
  </Style>
</CommandBarOverflowPresenter.ItemContainerStyle>

为了消除我正在开发的应用程序中的所有其他噪音，我创建了一个新项目，主页上只有一个 CommandBar 以及复制我的问题所需的必要按钮和文本。下面是mainpage.xaml：

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <Page.Resources>
    <Style x:Key="Style" TargetType="AppBarButton">
      <Setter Property="Background"
              Value="{ThemeResource AppBarButtonBackground}" />
      <Setter Property="Foreground"
              Value="{ThemeResource AppBarButtonForeground}" />
      <Setter Property="BorderBrush"
              Value="{ThemeResource AppBarButtonBorderBrush}" />
      <Setter Property="HorizontalAlignment"
              Value="Left" />
      <Setter Property="VerticalAlignment"
              Value="Top" />
      <Setter Property="FontFamily"
              Value="{ThemeResource ContentControlThemeFontFamily}" />
      <Setter Property="FontWeight"
              Value="Normal" />
      <Setter Property="Width"
              Value="68" />
      <Setter Property="UseSystemFocusVisuals"
              Value="True" />
      <Setter Property="AllowFocusOnInteraction"
              Value="False" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="AppBarButton">
            <Grid x:Name="Root"
                  MinWidth="{TemplateBinding MinWidth}"
                  MaxWidth="{TemplateBinding MaxWidth}"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}">
              <Grid.Resources>
                <Style x:Name="LabelOnRightStyle"
                       TargetType="AppBarButton">
                  <Setter Property="Width"
                          Value="NaN" />
                </Style>
              </Grid.Resources>
              <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="LabelOnRight">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Margin">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="12,14,0,14" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                     Storyboard.TargetProperty="MinHeight">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarThemeCompactHeight}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="0" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="(Grid.Column)">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="1" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="TextAlignment">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Left" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Margin">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="8,15,12,17" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="LabelCollapsed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                     Storyboard.TargetProperty="MinHeight">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarThemeCompactHeight}" />
                      </ObjectAnimationUsingKeyFrames>
                      <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="Collapsed" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="Visible" />
                      </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 AppBarButtonBackgroundPointerOver}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="BorderBrush">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                      </ObjectAnimationUsingKeyFrames>
                      <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="BorderBrush">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPressed}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPressed}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundPressed}" />
                      </ObjectAnimationUsingKeyFrames>
                      <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                     Storyboard.TargetProperty="BorderBrush">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel"
                                                     Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0"
                                                Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                      </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>
                  <VisualState x:Name="GameControllerInputMode">
                    <VisualState.Setters>
                      <Setter Target="OverflowTextLabel.Padding"
                              Value="0,11,0,13" />
                    </VisualState.Setters>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Grid x:Name="ContentRoot"
                    MinHeight="{ThemeResource AppBarThemeMinHeight}">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <ContentPresenter x:Name="Content"
                                  Height="20"
                                  Margin="0,14,0,4"
                                  Content="{TemplateBinding Icon}"
                                  Foreground="{TemplateBinding Foreground}"
                                  HorizontalAlignment="Stretch"
                                  AutomationProperties.AccessibilityView="Raw" />
                <TextBlock x:Name="TextLabel"
                           Grid.Row="1"
                           Text="{TemplateBinding Label}"
                           Foreground="{TemplateBinding Foreground}"
                           FontSize="12"
                           FontFamily="{TemplateBinding FontFamily}"
                           TextAlignment="Center"
                           TextWrapping="Wrap"
                           Margin="2,0,2,6" />
              </Grid>
              <TextBlock x:Name="OverflowTextLabel"
                         Text="{TemplateBinding Label}"
                         Foreground="{TemplateBinding Foreground}"
                         FontSize="15"
                         FontFamily="{TemplateBinding FontFamily}"
                         TextAlignment="Left"
                         TextTrimming="Clip"
                         TextWrapping="NoWrap"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
                         Margin="12,0,12,0"
                         Padding="0,5,0,7"
                         Visibility="Collapsed" />
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>

  <Page.TopAppBar>
    <CommandBar IsDynamicOverflowEnabled="True">
      <CommandBar.Content>
        <TextBlock Text="Text to force the buttons to drop off at some point when the screen is resized" />
      </CommandBar.Content>
      <CommandBar.PrimaryCommands>
        <AppBarButton Label="Edit"
                      Icon="Edit" />
        <AppBarButton Label="People"
                      Icon="People" />
        <AppBarButton Label="Really long text should should make overflow wider"
                      Icon="Highlight" />
        <AppBarButton Label="Home"
                      Icon="Home"
                      Style="{StaticResource Style}" />
      </CommandBar.PrimaryCommands>
    </CommandBar>
  </Page.TopAppBar>
</Page>

如您所见，我在 CommandBar 的内容中有 1 个 CommandBar、1 个 TextBlock，在 CommandBar 的 PrimaryCommands 中有 4 个 AppBarButtons。只有 1 个 AppBarButtons 样式被覆盖（Home 样式），并且它被覆盖的样式直接从该位置的 generic.xaml 中获取 - C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration \中性\UAP\10.0.14393.0\通用

为什么会这样？是否有任何已知的解决方法？

4

1 回答 1

2

如您所知，当AppBarButton添加到SecondaryCommands时，它将显示在 Popup 中。如果您检查 Visual Studio 中的Live Visual Tree，您会发现它AppBarButton已添加到名为“SecondaryItemsControl”的CommandBarOverflowPresenter中。
在此处输入图像描述

您在下面找到的样式CommandBarOverflowPresenter.ItemContainerStyle用于重置' AppBarButtonsWidth和HorizontalAlignment属性，因为默认情况下是和设置为，如果我们使用默认样式，则不能占用 Popup 的整个宽度。AppBarButtonWidth68HorizontalAlignmentLeftAppBarButton

<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="68"/>

但是，下面的样式CommandBarOverflowPresenter.ItemContainerStyle仅适用于AppBarButton带有隐式样式的样式。如果显式设置 的Style属性AppBarButton，它将失去其功能。这就是为什么改变样式会AppBarButton破坏动态溢出的自动样式的原因。

作为一种解决方法，您可以尝试更改WidthandHorizontalAlignment属性，例如在什么下CommandBarOverflowPresenter.ItemContainerStyle设置MiniWidth为限制AppBarButton的宽度。

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

PS：这种解决方法可能并不适用于所有场景，尤其是AppBarButton当Label. 您可能需要根据自己的场景来决定是否使用它。

更新：

您的回答提出了另一个问题，为什么只有隐式样式才能继承 this CommandBarOverflowPresenter.ItemContainerStyle？

这与XAML 资源引用的查找行为有关。您可以认为Style已明确设置的 s 具有最高优先级。设置Style属性后，XAML 系统将不会查找其他样式。

Ref ResourceDictionary 和 XAML 资源引用：

XAML 框架在决定为未设置Style和ContentTemplate或ItemTemplate属性的控件使用哪种样式和模板时，还会查找隐式样式资源（使用TargetType而不是x:Key或x:Name的那些）。

所以一旦你设置Style了 for AppBarButton，下面的隐式样式CommandBarOverflowPresenter.ItemContainerStyle就不起作用了。

以下是演示此行为的简单示例。

<Page ...>
    <Page.Resources>
        <Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
            <Setter Property="Background" Value="Red" />
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Background" Value="Green" />
                    <Setter Property="Foreground" Value="White" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListViewItem Style="{StaticResource ListViewItemStyle1}">1</ListViewItem>
            <ListViewItem Background="Blue">2</ListViewItem>
            <ListViewItem>3</ListViewItem>
            <ListViewItem>4</ListViewItem>
        </ListView>
    </Grid>
</Page>

它看起来像：
在此处输入图像描述

如您所见，对于第一项，由于我已经Style明确设置了属性，它不会使用ListView.ItemContainerStyle. 对于第二项，由于我没有设置Style属性，它会使用 下的隐式样式ListView.ItemContainerStyle，但是已经显式设置的属性具有更高的优先级。所以这个项目的前景是白色的，但它的背景是蓝色的。而对于第三项和第四项，由于它们使用优先级最低的默认样式，因此ListView.ItemContainerStyle将使用下面的隐式样式而不是默认样式。

于 2016-12-08T10:02:26.897 回答