如何更改 visualstate 值并重用具有不同属性值的控件？

Question

我实现了一个自定义文本框，它在 MouseOver 事件中更改 BorderBrush（在本例中它更改了 BorderBrush，但我可以更改其他属性）。

现在，如果我想自定义 MouseOver 上的 BorderBrush 颜色并创建具有不同“鼠标悬停时的 BorderBrush”颜色的不同文本框，如何使用 visualstates 来实现？有没有办法不用为每个文本框定义不同的样式？

<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>

Answer 1

您不需要单独的样式来更改颜色。您可以将依赖项属性添加到 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 中使用了它。这个技巧解释 .

然后您可以使用不同的鼠标悬停在边框画笔颜色上的 IconTextBoxes:

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

如何更改 visualstate 值并重用具有不同属性值的控件？

How to change visualstate values and reuse the control with different properties values?

wpf

triggers

custom-controls

visualstatemanager

reusability