Unable to animate a border's visibility or opacity

14 Dec 2021, 12:54

I'm trying to "blink" a border either by animating it's visibility or by animating it's BorderBrush's opacity. So I have a DataTemplate for a "StereoMtd" datatype. When ErrorBorderFlash is true I try to load the storyboard but nothing happens. I'm able to blink the border opacity OK, but that blinks the entire thing, not just the border. I'm not sure how to specify the borderbrushes opacity. I've tried targetproperties like (Border.BorderBrush).(SolidColorBrush.Opacity) but that doesn't work either. Any ideas?

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Modules.Measurement">

...
...

    <!-- Blink animation -->
    <!--<Storyboard x:Key="BlinkAnimation" RepeatBehavior="Forever">
        <DoubleAnimation 
            Storyboard.TargetProperty="Opacity"
            From="0"
            To="1"
            AutoReverse="True"
            BeginTime="0:0:1"
            Duration="0:0:0.08" />
        <DoubleAnimation 
            Storyboard.TargetProperty="Opacity"
            From="1"
            To="1"
            AutoReverse="True"
            Duration="0:0:0.4" />
        <DoubleAnimation 
            Storyboard.TargetProperty="Opacity"
            From="1"
            To="0"
            AutoReverse="True"
            Duration="0:0:0.08" />
    </Storyboard>-->

    <Storyboard x:Key="BlinkAnimation" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
            <DiscreteObjectKeyFrame KeyTime="00:00:10" Value="{x:Static Visibility.Collapsed}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    <DataTemplate 
        x:Name="StereoMtdDataTemplate"
        DataType="{x:Type local:StereoMtd}">
        <Border 
            x:Name="border"
            BorderThickness="2"
            BorderBrush="{StaticResource BackgroundBrush}"
            Background="{StaticResource BackgroundBrush}"
            CornerRadius="6"
            HorizontalAlignment="Left"
            VerticalAlignment="Center">
            <TextBlock
                Text="{Binding DisplayString}" 
                Margin="2"
                Foreground="White" 
                FontSize="28"/>
        </Border>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Path=ErrorBorder}" Value="True">
                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource WarnBrush}"/>
                <Setter TargetName="border" Property="BorderThickness" Value="2"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=ErrorBorderFlash}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource BlinkAnimation}"/>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ResourceDictionary>

16 Dec 2021, 14:10

Hi,

The problem is that the storyboard repeat behavior and duration does not allow the Collapsed state to be visible, you should try with the following:

    <Storyboard x:Key="BlinkAnimation" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="0:0:2" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="00:00:0" Value="{x:Static Visibility.Visible}"/>
            <DiscreteObjectKeyFrame KeyTime="00:00:1" Value="{x:Static Visibility.Collapsed}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

And also consider adding a StopStoryboard in the ExitActions to stop the forever animation:

<DataTrigger.EnterActions>
  <BeginStoryboard x:Name="BlinkAnim" Storyboard="{StaticResource BlinkAnimation}"/>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
  <StopStoryboard BeginStoryboardName="BlinkAnim"/>
</DataTrigger.ExitActions>

22 Dec 2021, 13:51

That works but blinks the border and all it's child controls. I want to just blink the border somehow...

22 Dec 2021, 16:23

Hi, if you are interested in animating only the Border's BorderBrush then the template should look something like this:

<DataTemplate x:Name="StereoMtdDataTemplate" DataType="{x:Type local:StereoMtd}">
    <DataTemplate.Resources>
        <Storyboard x:Key="BlinkAnimation" RepeatBehavior="Forever">
          <DoubleAnimationUsingKeyFrames Duration="0:0:2"
                                         Storyboard.TargetProperty="BorderBrush.Opacity"
                                         Storyboard.TargetName="border">
              <DiscreteDoubleKeyFrame KeyTime="00:00:0" Value="1"/>
              <DiscreteDoubleKeyFrame KeyTime="00:00:1" Value="0"/>
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </DataTemplate.Resources>
    <Border x:Name="border"
              BorderThickness="2"
              BorderBrush="{StaticResource BackgroundBrush}"
              Background="{StaticResource BackgroundBrush}"
              CornerRadius="6"
              HorizontalAlignment="Left"
              VerticalAlignment="Center">
        <TextBlock Text="DisplayString" 
                   Margin="2"
                   Foreground="White" 
                   FontSize="28"/>
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=ErrorBorder}" Value="True">
          <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource WarnBrush}"/>
          <Setter TargetName="border" Property="BorderThickness" Value="2"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=ErrorBorderFlash}" Value="True">
          <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="BlinkAnim" Storyboard="{StaticResource BlinkAnimation}"/>
          </DataTrigger.EnterActions>
          <DataTrigger.ExitActions>
            <StopStoryboard BeginStoryboardName="BlinkAnim"/>
          </DataTrigger.ExitActions>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Is that what you are looking for?

22 Dec 2021, 16:43

That is blinking the opacity of the children as well for me

22 Dec 2021, 19:23

Are you sure that the animation has Storyboard.TargetProperty="BorderBrush.Opacity"?

Unable to animate a border's visibility or opacity

Unable to animate a border's visibility or opacity

Re: Unable to animate a border's visibility or opacity

Re: Unable to animate a border's visibility or opacity

Re: Unable to animate a border's visibility or opacity

Re: Unable to animate a border's visibility or opacity

Re: Unable to animate a border's visibility or opacity

Who is online