Question

我尝试创建具有Label和TextBox的UserControl。我想让我的控件具有自定义的视觉状态集。所以我用xaml编写了这段代码：

<UserControl x:Class="OgameApp.Components.TextField"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:OgameApp.Components"
         mc:Ignorable="d" 
         d:DesignWidth="500"
         Validation.ErrorTemplate="{x:Null}">

<UserControl.Resources>
    <Style TargetType="Label">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="Padding" Value="0 0 0 5" />
        <Setter Property="Foreground" Value="#FF6D6D6D" />
    </Style>

    <Style TargetType="TextBox">
        <Setter Property="FontSize" Value="16" />
    </Style>
</UserControl.Resources>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup Name="CommonStates">
        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:3" />
        </VisualStateGroup.Transitions>

        <VisualState Name="Normal" />
        <VisualState Name="Focus">
            <Storyboard>
                <ColorAnimation To="Blue" Storyboard.TargetName="LabelControl" Storyboard.TargetProperty="Foreground" />
            </Storyboard>
        </VisualState>
        <VisualState Name="Success" />
        <VisualState Name="Error" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>


<StackPanel Name="WrapperControl">
    <Label Name="LabelControl" Content="Binding Label" />
    <TextBox Name="TextBoxControl" Text="{Binding Value}" Validation.Error="TextBox_Error" GotFocus="TextBox_GotFocus"/>
</StackPanel>

并在我的UserControl类中：

public partial class TextField : UserControl
{
    public static readonly DependencyProperty LabelProperty;
    public static readonly DependencyProperty ValueProperty;

    static TextField() {
        LabelProperty = DependencyProperty.Register("Label", typeof(string), typeof(TextField));
        ValueProperty = DependencyProperty.Register("Value", typeof(string), typeof(TextField));
    }

    public string Label
    {
        get { return (string)GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    public string Value
    {
        get
        {
            return (string)GetValue(ValueProperty);
        }
        set
        {
            SetValue(ValueProperty, value);
        }
    }

    public TextField()
    {
        InitializeComponent();

        WrapperControl.DataContext = this;
    }

    private void TextBox_Error(object sender, ValidationErrorEventArgs e)
    {
        VisualStateManager.GoToState(this, "Error", true);
    }

    private void TextBox_GotFocus(object sender, RoutedEventArgs e)
    {
        VisualStateManager.GoToState(this, "Focus", true);
        VisualStateManager.GoToState(LabelControl, "Focus", true);
    }
}

因此，我很重视当我将焦点放在控件的Textbox元素上时，标签的可视状态将更改，而前景色将更改为。但这不会发生。

Answer 1

您需要为此添加触发器。

尝试为鼠标事件定义触发器，它将解决您的问题。

<Style.Triggers>
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="True" />
        <Condition Property="IsMouseOver" Value="True" />
    </MultiTrigger.Conditions>
    <Setter ... />
</MultiTrigger>

Answer 2

所以几个小时后我找到了解决方法。

首先，我尝试将VisualStateManager.VisualStateGroups块移到StackPanel中。然后，我得到运行时错误，它说明ColorAnimation无法将颜色设置为Foreground属性。所以我将其更改为Foreground.Color。

这是我的工作xaml：

<UserControl x:Class="OgameApp.Components.TextField"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:OgameApp.Components"
         mc:Ignorable="d" 
         d:DesignWidth="500"
         Validation.ErrorTemplate="{x:Null}">

<UserControl.Resources>
    <Style TargetType="Label">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="Padding" Value="0 0 0 5" />
        <Setter Property="Foreground" Value="#FF6D6D6D" />
    </Style>

    <Style TargetType="TextBox">
        <Setter Property="FontSize" Value="16" />
    </Style>
</UserControl.Resources>

<StackPanel Name="WrapperControl" Loaded="WrapperControl_Loaded">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="CommonStates">
            <VisualState Name="Normal" />
            <VisualState Name="Focus">
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="LabelControl" Storyboard.TargetProperty="Foreground.Color" To="Blue" Duration="0:0:3" />
                </Storyboard>
            </VisualState>
            <VisualState Name="Success" />
            <VisualState Name="Error" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Label Name="LabelControl" Content="Binding Label" />
    <TextBox Name="TextBoxControl" Text="{Binding Value}" Validation.Error="TextBox_Error" GotFocus="TextBox_GotFocus"/>
</StackPanel>

在可视状态下更改标签前景色

2 个答案: