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

时间:2010-09-05 04:02:49

标签: wpf templates vsm

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

发生的事情是,虽然背景和边框正在完美变化,但前景并非如此。如果我使用的画笔通过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 Technologies

1 个答案:

答案 0 :(得分:16)

VisualStateManager无法控制通过绑定设置其值的属性。在您的示例中,BackgroundBorderBrush都设置为本地值(Transparent),因此VSM可以为它们设置动画。另一方面,使用Foreground设置TemplateBinding,因此如果绑定值生效,VSM将无法为其设置动画。

这是VisualStateManager的一般限制,您将在使用它的所有示例中看到它。解决这个问题的一个典型策略是使用图层和不透明度来呈现颜色动画的幻觉,而真正发生的事情是从一个元素到另一个元素的淡化。这是有效的,因为您可以完全控制隐藏层,而不必将其绑定到任何东西。不幸的是,这不适合您的需求,因为元素不是静态的;你不能有两个文本框。

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