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

Question

我已经实现了一个自定义文本框，可以在MouseOver事件中更改BorderBrush(在这种情况下，它会更改BorderBrash，但我可以更改其他属性(。

现在，如果我想在MouseOver上自定义BorderBrush的颜色，并用不同的"；鼠标上的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>

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中使用TemplatedPrent，因此我将故事板作为静态资源添加到边界的资源中，并在VisualStateManager中使用它。这个技巧在这里解释。

然后你可以使用不同鼠标边框刷颜色的IconTextBoxes：

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