CODEWITHSUNDEEP
c#wpfanimationstoryboard
Nedim Hozić
Nedim Hozić

Reputation: 1901

Disable Storyboard or Animation in WPF

I created a simple notification window with animation and some message. But, can I disable animation or storyboard on eg. MouseEnter event, like a Facebook notification. Gradually reduced the opacity, and when I drag the Mouse on the window, then set opacity to 100%. How to do? Here is a xaml code: 

 WindowStyle="None" AllowsTransparency="True" Background="Transparent" >
<Grid x:Name="gridData" RenderTransformOrigin="0,1" MouseRightButtonDown="Window_MouseRightButtonDown" MouseEnter="Grid_MouseEnter">
    <Border BorderThickness="1" Background="SkyBlue" BorderBrush="Black" CornerRadius="10">
        <StackPanel Margin="20">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="32"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="40"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="txtTitle" Grid.Row="0" Grid.Column="0" Text="" FontWeight="Bold" VerticalAlignment="Center"/>
                <Image x:Name="image" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Visibility="Collapsed"/>
                <TextBlock x:Name="txtMessage" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="" TextWrapping="Wrap"/>
            </Grid>
        </StackPanel>
    </Border>

    <Grid.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded" >
            <BeginStoryboard >
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                        <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                        <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                        <SplineDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Grid.RenderTransform>
        <ScaleTransform ScaleY="1" />
    </Grid.RenderTransform>

</Grid>

Upvotes: 0

Views: 3187

Answers (1)

Steven Rands
Steven Rands

Reputation: 5421

Add a name to your BeginStoryboard:

<BeginStoryboard Name="ScaleAndFadeOut">

then add another event trigger for a different event, and use a StopStoryboard element:

<Grid.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        ...
    </EventTrigger>

    <EventTrigger RoutedEvent="FrameworkElement.MouseMove">
        <StopStoryboard BeginStoryboardName="ScaleAndFadeOut" />
    </EventTrigger>
</Grid.Triggers>

MSDN: "How to: Use Event Triggers to Control a Storyboard After It Starts"

Upvotes: 1

Related Questions