UWP改变AppBarButton的风格打破了动态溢出的自动样式

时间：2016-12-07 12:18:35

标签： c# xaml uwp commandbar

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

如果它的样式被覆盖，则突出显示仅覆盖文本区域（在本例中为home），并且其悬停/命中检测仅在此区域上方，即使覆盖样式与该样式完全相同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。只覆盖了一个AppBarButtons样式（Home 1），它被覆盖的样式直接从generic.xaml从这个位置抓取 - C：\ Program Files（x86）\ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \中性\ UAP \ 10.0.14393.0 \通用

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

1 个答案:

答案 0 :(得分：2)

正如您所知，AppBarButton添加到SecondaryCommands时，它会显示在Popup中。如果您在Visual Studio中使用Live Visual Tree进行检查，则会发现AppBarButton已添加到名为＆{34; SecondaryItemsControl＆＃34;的CommandBarOverflowPresenter中。 enter image description here

您在CommandBarOverflowPresenter.ItemContainerStyle下找到的样式用于重置AppBarButton的{​​{1}}和Width属性，默认为HorizontalAlignment } AppBarButton Width，68设置为HorizontalAlignment，如果我们使用默认样式，则Left无法使用AppBarButton占据Popup的整个宽度。

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

但是，CommandBarOverflowPresenter.ItemContainerStyle下的样式仅适用于具有隐式样式的AppBarButton。如果明确设置Style AppBarButton属性，它将失去其功能。这就是改变AppBarButton样式打破动态溢出自动样式的原因。

作为一种变通方法，您可以尝试更改Width和HorizontalAlignment属性，例如CommandBarOverflowPresenter.ItemContainerStyle下的内容，并将MiniWidth设置为限制AppBarButton＆＃39 ;宽度。

<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时。您可能需要根据您的方案确定是否使用它。

<强>更新

  

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

这与Lookup behavior for XAML resource references有关。您可以认为已明确设置的Style具有最高优先级。设置Style属性后，XAML系统将不会查找其他样式。

参考ResourceDictionary and XAML resource references：

  

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

因此，为Style设置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>

它看起来像：
enter image description here

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

相关问题
最新问题