views:

517

answers:

2

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!

+1  A: 

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>
SergioL
Isn't there a better way ? I'm not very experienced with animations, but it seems wrong to repeat the same thing 4 times...
Thomas Levesque
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?
LSTayon
Yeah Thomas, that's what I'm saying...
LSTayon
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.
SergioL
There IS a pure-xaml way to do that. http://stackoverflow.com/questions/1238515/wpf-its-gotta-be-easier-than-im-making-it/1239063#1239063
kek444
Nice trick. I posted a slight-variant of your solution at http://stackoverflow.com/questions/1238515/wpf-its-gotta-be-easier-than-im-making-it/1239565#1239565 that will work for multiple triggers without the need for adding a DataContext to the buttons.
SergioL
A: 

Just to be visible as an option here, see my answer to a similar question.

kek444