1

New to WPF. Simple scenario. Can't figure out the right way to do this.

Say I have a single Button. I also have four TextBlocks. I want that one button to trigger an animation (Opacity from 0 to 1) on all of the TextBlocks at the same time.

Thanks in advance!

Improve this question

1 Answer 1

Reset to default
1

This should do it...

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication1.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480"> <Window.Resources> <Storyboard x:Key="OnClick1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock3" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Window.Triggers> <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button"> <BeginStoryboard Storyboard="{StaticResource OnClick1}"/> </EventTrigger> </Window.Triggers> <Grid x:Name="LayoutRoot"> <StackPanel> <Button x:Name="button" Width="131" Height="37" Content="Button" Margin="0,0,0,22"/> <TextBlock x:Name="textBlock" Height="27" Text="TextBlock 1" TextWrapping="Wrap" Opacity="0"/> <TextBlock x:Name="textBlock1" Height="27" Text="TextBlock 2" TextWrapping="Wrap" Opacity="0"/> <TextBlock x:Name="textBlock2" Height="27" Text="TextBlock 3" TextWrapping="Wrap" Opacity="0"/> <TextBlock x:Name="textBlock3" Height="27" Text="TextBlock 4" TextWrapping="Wrap" Opacity="0"/> </StackPanel> </Grid> </Window>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Isn't there a better way ? I'm not very experienced with animations, but it seems wrong to repeat the same thing 4 times...
Thank you, thank you, thank you...now, just to go a little deeper, what if I had a block of X TextBlocks, say in a Grid Column. How could I assign the Storyboard to ALL TextBlocks in that grid without having to do an Animation for each one separately?
If you're going to have a lot of similar animations for a bunch of elements, you'll probably want to define it all in code and programmatically generate the animations for the storyboard. AFAIK, there is no pure-Xaml way to do that.
There IS a pure-xaml way to do that. stackoverflow.com/questions/1238515/…
Nice trick. I posted a slight-variant of your solution at stackoverflow.com/questions/1238515/… that will work for multiple triggers without the need for adding a DataContext to the buttons.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.