UWP VisualState - 修改整个 class（例如按钮）

Question

在 UWP 中，我们可以很容易地更改按钮的属性，例如基于 window 大小，使用 visualstate.setters

<VisualState x:Name="VisualStateNarrow" >
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowHeight="{StaticResource NarrowMinHeight}" />
            </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="btnTest.Height" Value="100"/>
                    <Setter Target="btnTest.Width" Value="100"/>
                    ....
                </VisualState.Setters>
            </VisualState>
....

现在假设我有很多按钮。不是手动输入每个条目，btnA.Height.., BtnB.Height... 等等，有没有办法在 custom.xaml?

中输入它们

我正在尝试类似的东西：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:controls="using:Template10.Controls">

<x:Double x:Key="CustomHeightN">100</x:Double>
<x:Double x:Key="CustomWidthN">100</x:Double>

<ResourceDictionary.ThemeDictionaries
    <ResourceDictionary x:Key="VisualStateNarrow" >
        <Style TargetType="Button">
            <Setter Property="Height" Value="{ThemeResource CustomHeightN}" />
            <Setter Property="Width" Value="{ThemeResource CustomWidthN}" />
        </Style>
    </ResourceDictionary>
....

当然，它不起作用。谁能偶然提出一些建议？

Answer 1

最简单的方法是覆盖按钮模板并将您的状态添加到它的 VisualStateManager。

在这里，我在现有状态管理器中创建了一个新的 AdaptiveGroup，它将更改按钮根网格的宽度和高度（为清楚起见，已删除部分样式）

<Style TargetType="Button">      
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="buttonRoot">
                            <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates" />
                            <VisualStateGroup x:Name="FocusStates" />

                            <VisualStateGroup x:Name="AdaptiveGroups">
                                    <VisualState x:Name="narrow" />
                                    <VisualState x:Name="wide">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="800" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="buttonRoot.Width" Value="200" />
                                            <Setter Target="buttonRoot.Height" Value="200" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

完整代码：

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

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
            <Setter Property="Padding" Value="12,4,12,4" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="buttonRoot">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                               Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                               Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                               Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                 Storyboard.TargetProperty="Opacity"
                                                 To="1"
                                                 Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                 Storyboard.TargetProperty="Opacity"
                                                 To="1"
                                                 Duration="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>

                                <VisualStateGroup x:Name="AdaptiveGroups">
                                    <VisualState x:Name="narrow" />
                                    <VisualState x:Name="wide">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="800" />
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="buttonRoot.Width" Value="200" />
                                            <Setter Target="buttonRoot.Height" Value="200" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Margin="3">
                            <ContentPresenter x:Name="ContentPresenter"
                                      Content="{TemplateBinding Content}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                      AutomationProperties.AccessibilityView="Raw"/>
                        </Border>
                            <Rectangle x:Name="FocusVisualWhite"
                               IsHitTestVisible="False"
                               Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="1.5" />
                            <Rectangle x:Name="FocusVisualBlack"
                               IsHitTestVisible="False"
                               Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="0.5" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Page.Resources>

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="button 1" />
        <Button Content="button 2" />
        <Button Content="button 3" />
        <Button Content="button 4" />

    </StackPanel>
</Page>

UWP VisualState - 修改整个 class（例如按钮）

UWP VisualState - Modifying entire class (Button for example)

c#

button

visualstates

uwp

template10