进行条件样式更改 w/o 触发器

Question

我是第一次尝试使用 AppBar，在理解如何从风格上执行我希望 AppBar 执行的操作时遇到了一些困难。

以下是我定义的一些数据模板，因此我可以在 AppBar 中的按钮上使用图标。我不喜欢股票 AppBarButton，因为它将按钮和图标堆叠在一起。无论如何我都看不到让它们水平堆叠，所以我只使用了自定义按钮模板。

<DataTemplate x:Key="NewFolderIconTemplate">
    <Path Data="M10,4L12,6H20A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z"
            Fill="Black" 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            Width="24"
            Height="24"
            Margin="0 0 10 0"/>
</DataTemplate>
<DataTemplate x:Key="RefreshIconTemplate">
    <Path Data="M19,12H22.32L17.37,16.95L12.42,12H16.97C17,10.46 16.42,8.93 15.24,7.75C12.9,5.41 9.1,5.41 6.76,7.75C4.42,10.09 4.42,13.9 6.76,16.24C8.6,18.08 11.36,18.47 13.58,17.41L15.05,18.88C12,20.69 8,20.29 5.34,17.65C2.22,14.53 2.23,9.47 5.35,6.35C8.5,3.22 13.53,3.21 16.66,6.34C18.22,7.9 19,9.95 19,12Z"
            Fill="Black" 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            Width="24"
            Height="24"
            Margin="0 0 10 0"/>
</DataTemplate>
<DataTemplate x:Key="SortingIconTemplate">
    <Path Data="M9.25,5L12.5,1.75L15.75,5H9.25M15.75,19L12.5,22.25L9.25,19H15.75M8.89,14.3H6L5.28,17H2.91L6,7H9L12.13,17H9.67L8.89,14.3M6.33,12.68H8.56L7.93,10.56L7.67,9.59L7.42,8.63H7.39L7.17,9.6L6.93,10.58L6.33,12.68M13.05,17V15.74L17.8,8.97V8.91H13.5V7H20.73V8.34L16.09,15V15.08H20.8V17H13.05Z"
            Fill="Black" 
            HorizontalAlignment="Stretch"
            VerticalAlignment="Center"
            Width="24"
            Height="24"
            Margin="0 0 10 0"/>
</DataTemplate>

接下来是实际的AppBar。我在垂直堆栈面板中放置了一系列按钮，并将堆栈面板放在应用栏中，这样我就可以获得垂直菜单效果。

<Page.TopAppBar>
    <AppBar HorizontalAlignment="Right"
            Background="Transparent">

        <AppBar.Resources>
            <Style TargetType="Button"
                   x:Key="AppBarButton">
                <Setter Property="HorizontalAlignment"
                        Value="Stretch" />
                <Setter Property="Background"
                        Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
                <Setter Property="HorizontalContentAlignment"
                        Value="Left" />
            </Style>
        </AppBar.Resources>

        <StackPanel HorizontalAlignment="Right">
            <Button Command="{Binding Path=RefreshDirectoryListCommand}"
                    Style="{StaticResource AppBarButton}">
                <StackPanel Orientation="Horizontal">
                    <ContentControl ContentTemplate="{StaticResource RefreshIconTemplate}"
                                    VerticalAlignment="Center"
                                    Margin="0 0 10 0"/>
                    <TextBlock Text="Refresh" />
                </StackPanel>
            </Button>
            <Button Command="{Binding Path=CreateNewFolderCommand}"
                    Style="{StaticResource AppBarButton}">
                <StackPanel Orientation="Horizontal">
                    <ContentControl ContentTemplate="{StaticResource NewFolderIconTemplate}"
                                    VerticalAlignment="Center"
                                    Margin="0 0 10 0"/>
                    <TextBlock Text="New Folder" />
                </StackPanel>
            </Button>
            <Button Command="{Binding Path=SortListCommand}"
                    Style="{StaticResource AppBarButton}">
                <StackPanel Orientation="Horizontal">
                    <ContentControl ContentTemplate="{StaticResource SortingIconTemplate}"
                                    VerticalAlignment="Center"
                                    Margin="0 0 10 0"/>
                    <TextBlock Text="Sort" />
                </StackPanel>
            </Button>
        </StackPanel>
    </AppBar>
</Page.TopAppBar>

我正在努力解决一些问题。

AppBar 的内容弹出在 AppBar 旁边，而不是在它下面，就像下拉菜单一样。有没有办法配置 ApPBar 以这种方式运行，或者我是否必须设置自定义控件模板的样式？

当我将鼠标悬停在它们上面时，会呈现边框。 UWP 应用程序似乎不再有触发器，那么更改鼠标悬停外观的最佳方式是什么？我仍然可以通过样式来实现吗，还是必须更换控件模板？

在我的 AppBar 中选择一个按钮会使该按钮变得半透明，从而使其下方的内容渗入。设置此样式的最佳方式是什么？我想保留模糊动画，并删除透明度：/

AppBar 本身的背景设置为白色，但是当我将鼠标悬停在它上面时，背景是灰色的。我想一旦我知道如何解决类似的边框问题和按钮上的透明度问题就可以解决这个问题。

这似乎更像是我不知道如何在缺少触发器的情况下正确设置样式的问题。其他人通常会做什么来实现这些影响，构建自定义控件模板？如果是这样，Microsoft 是否为原始模板提供 XAML，这样您就不必 100% 从头开始？

Answer 1

是的，通常我们需要使用自定义控件模板来实现这些效果。 Microsoft 已经为默认模板提供了 XAML 代码，您可以在 Default control styles and templates. Also in Visual Studio, open Document Outline view, select the control you want to edit and right click then select the "Edit Template" option and then "Edit a cpoy...". After this you can see the default template in the place you've chosen. By default, it's in your <Page.Resources>. Here we need the template of AppBar and Button.

找到它们

Is there a way to configure the ApPBar to act this way, or do I have to style a custom control template?

在AppBar的模板中，我们可以看到如下代码：
```
<Grid x:Name="ContentRoot" ... >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    ...
    <ContentControl x:Name="ContentControl" ... />
    <Button x:Name="ExpandButton" Grid.Column="1" ... >
    ...
<Grid>
```
所以默认情况下 AppBar 的内容显示在 "ExpandButton" 的左侧。如果你想让它显示在"ExpandButton"下，你需要把它的模板完全改写成你自己的。

UWP apps don't seem to have triggers anymore, so what is the best way to change how the mouse over looks?

在 UWP 中，我们使用 VisualState 而不是触发器来更改控件在不同状态下的视觉外观。而在Button的模板中，有如下代码：

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
            Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
        Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
    </Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
        Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
        Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
        Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
    </Storyboard>
</VisualState>

要在鼠标悬停时移除边框，我们可以移除

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
    Storyboard.TargetProperty="BorderBrush">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>

来自 "PointerOver" VisualState。

What would be the best way to style this? I'd like to keep the blurring animation, and remove the transparency.

同样我们可以改变

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                            Storyboard.TargetProperty="Background">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>

在 "Pressed" VisualState 中删除透明度。

I imagine this can be solved once I know how to solve the similar issue with borders and the transparency issue on the buttons.

是的，这是按钮上的类似问题。 "ExpandButton" 具有以下样式：

<Style x:Key="EllipsisButton" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Padding" Value="0,0,9,0"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Right"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Width" Value="{ThemeResource AppBarExpandButtonThemeWidth}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您还需要在 "PointerOver" VisualState 中更改背景。但请注意，如果您的样式是在 <Page.Resources> 中定义的，您需要将此样式的键更改为 "MyEllipsisButton" 之类的其他内容，并在 AppBar 的模板中将此新样式设置为名为 Button 的 "EllipsisButton" 或 AppBar 仍将使用系统 Generic.xaml 中定义的 "EllipsisButton" 样式，您的自定义样式将不起作用。

进行条件样式更改 w/o 触发器

Make conditional style changes w/o triggers

xaml

winrt-xaml

win-universal-app

uwp