使用 Visual State Manager 设置前台的问题

Question

我有一个 WPF 应用程序，我正在尝试使用 .Net v4 Visual State Manager 设置 TextBox 的样式。具体来说，我正在尝试为 MouseOver 状态设置前景和背景的颜色。

发生的情况是，虽然背景和边框完美地变化，但前景却没有。如果我使用的画笔通过 StaticResource 获得颜色，那么前景根本不会改变。如果我使用的画笔通过 DynamicResource 获得颜色，那么当我将鼠标悬停在 TextBox 上时，所有 TextBox 的前景都会发生变化。显然，要么我做错了什么，要么我想做的事情根本不可能使用 VSM（这将是相当令人失望的）。

以下是我正在使用的资源：

<Color x:Key="ControlBackgroundColor" R="178" G="178" B="178" A="255" />
<Color x:Key="ControlForegroundColor" R="0" G="0" B="0" A="255" />
<Color x:Key="BorderColor" R="127" G="127" B="127" A="255" />
<Color x:Key="MouseOverControlBackgroundColor" R="0" G="0" B="0" A="255" />
<Color x:Key="MouseOverControlForegroundColor" R="255" G="255" B="255" A="255" />
<Color x:Key="MouseOverBorderColor" R="178" G="178" B="178" A="255" />

<SolidColorBrush PresentationOptions:Freeze="True" x:Key="ControlBackgroundBrush" Color="{DynamicResource ControlBackgroundColor}" />
<SolidColorBrush PresentationOptions:Freeze="True" x:Key="ControlForegroundBrush" Color="{DynamicResource ControlForegroundColor}" />
<SolidColorBrush PresentationOptions:Freeze="True" x:Key="BorderBrush" Color="{DynamicResource BorderColor}" />

<SolidColorBrush PresentationOptions:Freeze="True" x:Key="MouseOverControlBackgroundBrush" Color="{DynamicResource MouseOverControlBackgroundColor}" />
<SolidColorBrush PresentationOptions:Freeze="True" x:Key="MouseOverControlForegroundBrush" Color="{DynamicResource MouseOverControlForegroundColor}" />
<SolidColorBrush PresentationOptions:Freeze="True" x:Key="MouseOverBorderBrush" Color="{DynamicResource MouseOverBorderColor}" />

<Style TargetType="{x:Type TextBox}" >
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="Margin" Value="1" />
    <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
    <Setter Property="Background" Value="{DynamicResource ControlBackgroundBrush}" />
    <Setter Property="Foreground" Value="{DynamicResource ControlForegroundBrush}" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid x:Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="{DynamicResource MouseOverBorderColor}" Duration="0:0:0.3"/>
                                    <ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{DynamicResource MouseOverControlBackgroundColor}" Duration="0:0:0.3"/>
                                    <ColorAnimation Storyboard.TargetName="PART_ContentHost" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="{DynamicResource MouseOverControlForegroundColor}" Duration="0:0:0.3"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid x:Name="ContentGrid">
                            <Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent" Background="Transparent">
                                <ScrollViewer x:Name="PART_ContentHost" Padding="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}" BorderThickness="0" IsTabStop="False"/>
                            </Border>
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

让我感到很奇怪的是，无论我使用静态资源还是动态资源，以完全相同的方式创建和动画的背景画笔和边框画笔都能完美工作，但前景色却不行。

如果有人有任何想法，或者如果有更好的方法来做到这一点，我很乐意听到。

大卫·穆林 IMA 技术

Answer 1

VisualStateManager 无法控制通过绑定设置值的属性。在您的示例中，Background 和 BorderBrush 都设置为本地值 (Transparent)，因此 VSM 可以为它们设置动画。另一方面，Foreground 是使用TemplateBinding 设置的，因此如果绑定值有效，VSM 将无法对其进行动画处理。

这是VisualStateManager 的一般限制，您将在使用它的所有示例中看到它。解决这个问题的一个典型策略是使用图层和不透明度来产生彩色动画的错觉，而实际上正在发生的是从一个元素到另一个元素的淡入淡出。这是有效的，因为您可以完全控制隐藏层，而不必将其绑定到任何东西。不幸的是，这不能满足您的需求，因为该元素不是静态的；你不能有两个文本框。

最终效果是，我认为您不能同时为文本前景色设置动画并允许用户指定前景色。