Argthtjtr

How to display a blinking notification message over parts of the main window of an application, while keeping the controls below of the overlay reachable (clickable) if the overlay is turned off?

The easy part is to create the overlay and build a storyboard for the animation:

<Window.Resources>

    <Style x:Key="ds_NotificationStyle" TargetType="DockPanel">

        <Setter Property="Opacity" Value="0" />

        <Style.Triggers>

            <DataTrigger Binding="{Binding EnableNotification}" Value="True">

                <DataTrigger.EnterActions>

                    <BeginStoryboard Name="ds_BeginCallNotification">

                        <Storyboard>

                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2" />

                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.4" Duration="0:0:0.4" AutoReverse="True" RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </DataTrigger.EnterActions>

                <DataTrigger.ExitActions>

                    <StopStoryboard BeginStoryboardName="ds_BeginCallNotification" />

                </DataTrigger.ExitActions>

            </DataTrigger>

        </Style.Triggers>

    </Style>

</Window.Resources>

Further below in the XAML, the overlay elements (there is a grid populated with other elements and the following DockPanel is placed above of them):

<DockPanel Grid.RowSpan="2" Name="ds_NotificationPanel" Style="{StaticResource ds_NotificationStyle}" Panel.ZIndex="200" Background="AntiqueWhite" Height="100" VerticalAlignment="top">

    <Viewbox>

        <TextBlock Text="{Binding IncomingCallNotification}" Margin="5" Foreground="Brown" FontWeight="Bold" />

    </Viewbox>

</DockPanel>

But there is a problem now with the overlay, blocking all the controls underneath of it.

To solve this, the DockPanel's visibility has to be set to Collapsed. But how to adjust this visibility before and after the animation?

Toggle the visibility at the beginning, using an animation that targets runtime zero of the storyboard:

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">

    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>

</ObjectAnimationUsingKeyFrames>

But at the same location, I had no idea how to reset the visibility back to Collapsed.

Using another Storyboard that is run at the ExitActions trigger solved this issue:

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">

    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />

</ObjectAnimationUsingKeyFrames>

Here is the complete solution (the DockPanel elements arent' changed):

<Window.Resources>

    <Style x:Key="ds_NotificationStyle" TargetType="DockPanel">

        <Setter Property="Opacity" Value="0" />

        <Setter Property="Visibility" Value="Collapsed" />

        <Style.Triggers>

            <DataTrigger Binding="{Binding EnableNotification}" Value="True">

                <DataTrigger.EnterActions>

                    <BeginStoryboard Name="ds_BeginCallNotification">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">

                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>

                            </ObjectAnimationUsingKeyFrames>

                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2" />

                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.4" Duration="0:0:0.4" AutoReverse="True" RepeatBehavior="Forever" />

                        </Storyboard>

                    </BeginStoryboard>

                </DataTrigger.EnterActions>

                <DataTrigger.ExitActions>

                    <StopStoryboard BeginStoryboardName="ds_BeginCallNotification" />

                    <BeginStoryboard>

                        <Storyboard>

                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="00:00:00.2" />

                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility">

                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </BeginStoryboard>

                </DataTrigger.ExitActions>

            </DataTrigger>

        </Style.Triggers>

    </Style>

</Window.Resources>

This may be easy and obvious for many of you, but it took me some times to figure it out. As I would have been grateful for such an answer, I have posted my solution here.