How to flash error text using WPF animation

问题

I have textbox displayed using the DataTemplate. In the below code TextBoxViewModel is derived from IDataErrorInfo.

protected String m_ValidationErrorMessage;
protected String ValidationErrorMessage
{
    get { return m_ValidationErrorMessage; }
}

private bool m_ShowErrorMessage = false;
public bool ShowErrorMessage
{
    get { return m_ShowErrorMessage; }
    set { this.m_ShowErrorMessage = value; }
}

private String m_DisplayValue;
public String DisplayValue
{
    get { return this.m_DisplayValue; }
    set
    {
        if (m_DisplayValue != value)
        {
            if (IsTextValid(value, out m_ValidationErrorMessage))
            {
                // Set data to model
                this.SendPropertyChangedEvent(nameof(this.DisplayValue));
            }
            else
            {
                ShowErrorMessage = true;
            }
        }
    }
}

public string this[string columnName]
{
    get
    {
        if (columnName == nameof(this.DisplayValue))
        {
            if (ShowErrorMessage)
            {
                return ValidationErrorMessage;
            }
        }
        return null;
    }
}

xaml for TextBoxViewModel

<DataTemplate DataType="{x:Type vms:TextBoxViewModel}">
    <DockPanel>
        <Label Content="{Binding Path=DisplayName}" MinWidth="120" MaxWidth="150"/>
        <TextBox DockPanel.Dock="Left" Text="{Binding Path=DisplayValue,Mode=TwoWay, UpdateSourceTrigger=Default,ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"/>
    </DockPanel>
</DataTemplate


<ControlTemplate x:Key="ErrorTemplate">
    <StackPanel Orientation="Horizontal">
        <AdornedElementPlaceholder x:Name="textBox"/>
        <ItemsControl ItemsSource="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ErrorContent}" Foreground="Red"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</ControlTemplate>

I am trying to flash the error text for few seconds and hiding it after that. Is there any way to achieve this using the XAML (WPF animation)?

回答1:

You could for example animate the Opacity property of the TextBlock using a DoubleAnimation. Something like this:

<ControlTemplate x:Key="ErrorTemplate">
    <StackPanel Orientation="Horizontal">
        <AdornedElementPlaceholder x:Name="textBox"/>
        <ItemsControl ItemsSource="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ErrorContent}" Foreground="Red">
                        <TextBlock.Triggers>
                            <EventTrigger RoutedEvent="Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0" To="1" 
                                                         AutoReverse="False" 
                                                         Duration="0:0:0.5" 
                                                         RepeatBehavior="3x" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </TextBlock.Triggers>
                    </TextBlock>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</ControlTemplate>

来源：https://stackoverflow.com/questions/60615672/how-to-flash-error-text-using-wpf-animation

标签

wpf

xaml