For some reason when I set two expanders beside one another, the first expander seems to be behind the second one and wont expand out the expander set beside it? Is there a way I can fix this in the code below?
<Grid>
<StackPanel Orientation="Horizontal" Margin="0,0,195,0">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1.2" Duration="0:0:0.35" Storyboard.TargetName="listBox" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander x:Name="expander" Expanded="expander_Expanded" ExpandDirection="Right" Width="29">
<ListBox x:Name="listBox">
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBox.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="1"/>
</ListBox.LayoutTransform>
</ListBox>
</Expander>
<StackPanel Orientation="Horizontal" Margin="0,0,342,0" Width="318">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander1">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1.2" Duration="0:0:0.35" Storyboard.TargetName="listBox1" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander ExpandDirection="Right" Name="expander1" Width="29">
<ListBox Name="listBox1">
<ListBox.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="1" />
</ListBox.LayoutTransform>
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
</ListBox>
</Expander>
</StackPanel>
</StackPanel>
</Grid>
Remove Width="29" in
<Expander x:Name="expander"
Expanded="expander_Expanded"
ExpandDirection="Right"
Width="29">
and all will be okay.
Related
Whay I give that error "'ScaleTransform' name cannot be found in the name scope of 'System.Windows.Controls.ListView'." when ScaleTransform in another trigger, but whe I set it in Image.Triggers it work fine?
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
<Image x:Name="Img" Source="{Binding Source}" Height="128" Width="128" Focusable="True">
<Image.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Triggers>
<EventTrigger RoutedEvent="ListView.SelectionChanged">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True" />
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListView.Triggers>
</ListView>
and I try that but also not working:
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
<Image x:Name="Img" Source="{Binding Source}" Height="128" Width="128" Focusable="True">
<Image.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Triggers>
<EventTrigger RoutedEvent="ListView.SelectionChanged">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.Target="{Binding MyAnimatedScaleTransform}" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True" />
<DoubleAnimation Storyboard.Target="{Binding MyAnimatedScaleTransform}" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListView.Triggers>
</ListView>
I find that controllers in DataTemplate cannot be accessed, so i change my cod Xaml to:
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
<Image x:Name="Img" Source="{Binding Source}" Height="128" Width="128" Focusable="True">
<Image.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True" />
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
Now I have been returned to my main problem, when I click second time on image before first animation be ended (Reverse), the image don't revert to original size.
I have a problem with an animantion of an UserControl.
The animation runs only once.
If I have multiple instances of my UserControl in another window, the animation is called for every Instance of the UserControl.
<UserControl x:Class="My_UserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Margin="10,10">
<UserControl.Resources>
<Storyboard x:Key="CartTicket_Whip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/>
<DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton">
<BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="UserControlGrid" Height="60">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid.Effect>
<DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect>
</Grid.Effect>
<DockPanel Background="White">
<Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60">
</Button>
<TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="20" FontWeight="Bold" Margin="10">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
<StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
<TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
<TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/>
<TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</DockPanel>
</Grid>
</UserControl>
You can set the FillBehavior property of your Storyboard to Stop in this way:
<UserControl.Resources>
<Storyboard x:Key="CartTicket_Whip" FillBehavior="Stop">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/>
<DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
I hope it helps.
Ok, I got it... sorry it is a dump coincidance! Because I changed the skew of the Grid element, to have a bob up and down effect, the hole usercontrol had this effect.
Now in my window I put five of this UserControls in a Grid, under each other...
So there was the effect, that on every click it seems that evrey UserControl started the animation...
So here the new code, where I make the storyboard for a child element (the dockPanel):
<UserControl x:Class="MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Margin="10,10">
<UserControl.Resources>
<Storyboard x:Key="CartTicket_Whip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlDockPanel">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-1.5"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton">
<BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="UserControlGrid" Height="60">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid.Effect>
<DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect>
</Grid.Effect>
<DockPanel x:Name="UserControlDockPanel" Background="White" RenderTransformOrigin="0.5,0.5">
<DockPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</DockPanel.RenderTransform>
<Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60">
</Button>
<TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="20" FontWeight="Bold" Margin="10">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
<StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
<TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
<TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/>
<TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</DockPanel>
</Grid>
</UserControl>
Hi I want to make this expander align veritically rather than horizontaly with the arrow facing vertically aswell atm it looks like this:
Open:
Closed:
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1" Duration="0:0:0.25" Storyboard.TargetName="listBox" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander x:Name="expander" Header="Expander" Expanded="expander_Expanded">
<ListBox x:Name="listBox">
<ListBoxItem Content="ListBoxItem" />
<ListBoxItem Content="ListBoxItem" />
<ListBoxItem Content="ListBoxItem" />
<ListBox.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="0"/>
</ListBox.LayoutTransform>
</ListBox>
</Expander>
</StackPanel>
Change the ExpandDirection.
I'm trying to display a list of bound data in a then get a Canvas to animate behind each row. I'm having trouble getting a Storyboard to Begin when I place it inside a template. Here is an example of the XAML I have so far:
<ListBox x:Name="MyListBox" Background="Transparent" Foreground="White" Height="200" Width="400" BorderThickness="0" Margin="0">
<ListBox.ItemTemplate>
<DataTemplate x:Name="MySingleDataTemplate">
<StackPanel Orientation="Horizontal" x:Name="MySingleStackPanel" Margin="0">
<StackPanel.Resources>
<Storyboard x:Name="MySingleStoryboard" BeginTime="0:0:1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Canvas99" Storyboard.TargetProperty="Width"
AutoReverse="True" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="400" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</StackPanel.Resources>
<Grid Background="Black" x:Name="MySingleGrid" Margin="0" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" Width="300" />
<ColumnDefinition x:Name="Col1" Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" x:Name="Row0" />
</Grid.RowDefinitions>
<Canvas Background="{Binding CanvasColour}" Grid.Row="0" Grid.Column="0" x:Name="Canvas99" HorizontalAlignment="Left" />
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Field1}" Margin="0"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Field2}" Margin="0"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can I call the equivalent of the C#:
MySingleStoryboard.Begin();
Is there a way I can get it to start from C# or are there some other properties or Triggers I can use in Silverlight? Or am I going about it in completely the wrong way?
thankyou
Mike
Managed to answer my own question! I need to add to my StackPanel, like this:
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="MySingleStoryboard" BeginTime="0:0:1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Canvas99" Storyboard.TargetProperty="Width"
AutoReverse="True" RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="400" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
Works a treat, now I just need to get rid of all the margins/boarders etc on the listbox and I'll be happy.... for now.
Mike
I'm having the darndest time figuring this out: say I've got two Button and three TextBlocks. I want either button to trigger a simple Storyboard on ALL TextBlocks. Currently I'm trying to define a generic Textblock style that contains the Storyboard, and then the trigger comes from any Button click. This is the closest I've come but the app crashes on startup...what am I don't wrong here:
<Window.Resources>
<Style TargetType="TextBlock" >
<Setter Property="Foreground" Value="Blue" />
<Style.Resources>
<Storyboard x:Key="TextBlockOpacity" Storyboard.TargetProperty="Opacity">
<DoubleAnimation From="0" To="1" />
</Storyboard>
</Style.Resources>
</Style>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
<BeginStoryboard Storyboard="{StaticResource TextBlockOpacity}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Button x:Name="button" HorizontalAlignment="Left" Margin="51,54,0,0" VerticalAlignment="Top" Width="96" Height="45" Content="Button"/>
<TextBlock x:Name="textBlock1" Margin="228,54,172,0" VerticalAlignment="Top" Height="45" FontSize="26.667" Text="TextBlock" TextWrapping="Wrap" />
<TextBlock x:Name="textBlock2" Margin="228,103,172,0" VerticalAlignment="Top" Height="45" FontSize="26.667" Text="Hello" TextWrapping="Wrap"/>
</Grid>
If you "dedicate" the button to changing the opacity, you could harness its DataContext and animate it. Then simply bind your elements' Opacity to the DataContext:
(I've also refactored your xaml a bit)
<Window x:Class="SomeNamespace.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Storyboard x:Key="TextBlockOpacity" Storyboard.TargetName="button1" Storyboard.TargetProperty="DataContext" >
<DoubleAnimation From="0.1" To="1"/>
</Storyboard>
<Style TargetType="TextBlock" >
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Background" Value="LightGray" />
<Setter Property="FontSize" Value="26.667" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="Height" Value="45" />
<Setter Property="Opacity" Value="{Binding ElementName=button1, Path=DataContext}"/>
</Style>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard Storyboard="{StaticResource TextBlockOpacity}" >
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ListBox.SelectionChanged">
<BeginStoryboard Storyboard="{StaticResource TextBlockOpacity}" >
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Button x:Name="button1" HorizontalAlignment="Left" Margin="51,54,0,0" VerticalAlignment="Top" Width="96" Height="45" Content="Button">
<Button.DataContext>
<System:Double>0</System:Double>
</Button.DataContext>
</Button>
<Button x:Name="button2" HorizontalAlignment="Right" Margin="0,54,29,0" VerticalAlignment="Top" Width="96" Height="45" Content="Button"/>
<ListBox x:Name="listBox1" Height="50" VerticalAlignment="Top">
<ListBox.Items>
<System:String>Text1</System:String>
<System:String>Text2</System:String>
</ListBox.Items>
</ListBox>
<TextBlock x:Name="textBlock1" Margin="51,114,61,0" Text="TextBlock" Height="45" VerticalAlignment="Top" Width="166" />
<TextBlock x:Name="textBlock2" Margin="51,0,74,42" Text="Hello" Height="45" Width="153" VerticalAlignment="Bottom" />
</Grid>
</Window>
Also note one thing - this is the approach to use if you want to minimize your code, and make it all happen in xaml. Your approach would anmate the Opacity of the whole Window. That's why in the code above, TextBlocks bind to the button's DataContext, which is itself animated.
It is of course doable without binding to a common value (the DataContext), but then you need to repeat X animations (because you need to set X TargetNames). This approach above is more easily extendable and maintainable.
EDIT
Added another Button and a ListBox for variety :)
Based on kek444's Xaml-only solution, I present a slightly improved version that doesn't rely on the DataContext of the button and can have multiple triggers.
<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>
<UIElement x:Key="OpacityCounter" Opacity="0"/>
<Style TargetType="TextBlock">
<Setter Property="Opacity" Value="{Binding Source={StaticResource OpacityCounter}, Path=Opacity}" />
</Style>
<Storyboard x:Key="OnClick1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.Target="{StaticResource OpacityCounter}" 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="button1">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button2">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="button1" Width="131" Height="37" Content="Button 1" Margin="0,0,0,22"/>
<Button x:Name="button2" Width="131" Height="37" Content="Button 2" Margin="0,0,0,22"/>
</StackPanel>
<TextBlock x:Name="textBlock" Height="27" Text="TextBlock 1" TextWrapping="Wrap" />
<TextBlock x:Name="textBlock1" Height="27" Text="TextBlock 2" TextWrapping="Wrap" />
<TextBlock x:Name="textBlock2" Height="27" Text="TextBlock 3" TextWrapping="Wrap" />
<TextBlock x:Name="textBlock3" Height="27" Text="TextBlock 4" TextWrapping="Wrap" />
</StackPanel>
</Grid>
</Window>
To use a ListBox as a trigger mechanism (provided you have a ListBox named "listbox1" someplace, add the following to Window.Triggers:
<EventTrigger RoutedEvent="Selector.SelectionChanged" SourceName="listbox1">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
or to trigger off a specific ListBoxItem, you'll need (where item1 is a named ListBoxItem):
<EventTrigger RoutedEvent="ListBoxItem.Selected" SourceName="item1">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
In your sample, you are defining the Storyboard inside a Style as a Resource, but then you are trying to access it as a Window resource. Try moving the Storyboard declaration to Window.Resources, then reference the Storyboard in the Style.
I don't know right off if it will do what you want, but I would start there.