如何更改视觉状态值并重用具有不同属性值的控件？

问题描述

我已经实现了一个自定义文本框，该文本框会在MouSEOver事件上更改BorderBrush（在这种情况下，它会更改BorderBrush，但是我可以更改其他属性）。

现在，如果我想在MouSEOver上自定义BorderBrush的颜色，并使用不同的“ MouSEOver上的BorderBrush”颜色创建不同的文本框，该如何使用可视状态呢？ 有没有一种方法可以为每个文本框定义不同的样式？

<ResourceDictionary>

    <Style targettype="{x:Type local:IconTextBox}">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Black"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate targettype="{x:Type local:IconTextBox}">
                    <Border x:Name="Border"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}">
                        <visualstatemanager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="normal" />
                                <VisualState x:Name="MouSEOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                            Storyboard.TargetName="Border">
                                            <EasingColorKeyFrame KeyTime="0"
                                                Value="Green" />
                                                <!-- I want to change that Green -->

                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </visualstatemanager.VisualStateGroups>

                        <ScrollViewer x:Name="PART_ContentHost"
                                    Focusable="False"
                                    HorizontalScrollBarVisibility="Hidden"
                                    VerticalScrollBarVisibility="Hidden" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

解决方法

您不需要使用单独的样式来更改颜色。您可以将依赖项属性添加到IconTextBox并根据该属性更改颜色。

在IconTextBox.cs中声明一个依赖项属性：

public Color MouseOverBorderBrushColor
{
    get { return (Color)GetValue(MouseOverBorderBrushColorProperty); }
    set { SetValue(MouseOverBorderBrushColorProperty,value); }
}

public static readonly DependencyProperty MouseOverBorderBrushColorProperty =
    DependencyProperty.Register("MouseOverBorderBrushColor",typeof(Color),typeof(IconTextBox),new PropertyMetadata(null));

以您的风格绑定到属性：

<ControlTemplate TargetType="{x:Type local:IconTextBox}">
    <Border x:Name="Border"
        BorderThickness="{TemplateBinding BorderThickness}"
        BorderBrush="{TemplateBinding BorderBrush}"
        Background="{TemplateBinding Background}">
        <Border.Resources>
            <ResourceDictionary>
                <Storyboard x:Key="ColorStoryboard">
                    <ColorAnimationUsingKeyFrames
                    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                    Storyboard.TargetName="Border">
                        <EasingColorKeyFrame KeyTime="0"
                        Value="{Binding MouseOverBorderBrushColor,RelativeSource={RelativeSource TemplatedParent}}" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </ResourceDictionary>
        </Border.Resources>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" Storyboard="{StaticResource ColorStoryboard}" />

            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer x:Name="PART_ContentHost"
            Focusable="False"
            HorizontalScrollBarVisibility="Hidden"
            VerticalScrollBarVisibility="Hidden" />
    </Border>
</ControlTemplate>

请注意，您不能在VisualStateManager中使用TemplatedParent，因此我将情节提要板作为静态资源添加到边框的资源中，并在VisualStateManager中使用了它。 here对此技巧进行了说明。

然后，您可以将IconTextBoxes与不同的鼠标悬停在边框笔刷颜色上：

<local:IconTextBox MouseOverBorderBrushColor="Green" />
<local:IconTextBox MouseOverBorderBrushColor="Red" />