изменить цвет метки переднего плана в визуальном состоянии

Question

Я пытаюсь создать свой UserControl, который имеет Label и TextBox. Я хочу, чтобы мой контроль имел пользовательский набор визуальных состояний. Итак, я написал этот код в 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

Итак, через несколько часов я нахожу решение.

Прежде всего я пытаюсь переместить блок 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>

Answer 2

Для этого нужно добавить триггер.

Попробуйте определить триггер для события мыши, это решит вашу проблему.

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