WPF more then one DataTrigger - wpf

Question

Would you know why the XAML below is not working. It looks like I can not have more than one DataTrigger for an element. Those Storyboards within DataTrigger, as you can tell are being executed on a button click.
The end reason is that on a button click, one grid should slide up, and the other slide down, achieving sort of accordian animation. Thanks
<StackPanel Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0">
<!--Add New Banner Grid-->
<!--<Grid DockPanel.Dock="Top" Background="#FFE0FFD2" Height="50">-->
<Grid x:Name="grdAddBunner">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="#FFE0FFD2"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btnEditBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="150" To="0" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=btnAddBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="150" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Content="Add New Banner" HorizontalAlignment="Center" Foreground="DarkGreen" FontWeight="Bold"></Label>
<Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" Content="Fund"></Label>
<telerik:RadComboBox Grid.Row="1" Grid.Column="1" telerik:StyleManager.Theme="Windows8" Margin="3" ItemsSource="{Binding LstFund}"></telerik:RadComboBox>
<Label Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" Content="Banner"></Label>
<TextBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" telerik:StyleManager.Theme="Windows8" Margin="3" Text="{Binding AddBannerName}"></TextBox>
<Button Grid.Row="3" Grid.Column="1" Content="Save" Command="{Binding AddBannerCmd}" Height="25" Width="80" HorizontalAlignment="Left"></Button>
<Button Grid.Row="3" Grid.Column="2" Content="Calcel" Height="25" Width="80" HorizontalAlignment="Right"></Button>
</Grid>
</Grid>
<!--Edit Existing Banner Grid-->
<!--<Grid DockPanel.Dock="Top" Background="#FFFFF7D2" Height="50">-->
<Grid x:Name="grdEditBanner">
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="#FFFFF7D2"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btnAddBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="150" To="0" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=btnEditBunner, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="150" Duration="0:0:0.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Content="Edit Existing Banner" HorizontalAlignment="Center" Foreground="#FF5B6400" FontWeight="Bold"></Label>
<Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" Content="Fund"></Label>
<telerik:RadComboBox Grid.Row="1" Grid.Column="1" telerik:StyleManager.Theme="Windows8" Margin="3" ItemsSource="{Binding LstFund}" SelectedItem="{Binding SelectedBannerFund}"></telerik:RadComboBox>
<Label Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" Content="Banner"></Label>
<TextBox Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" telerik:StyleManager.Theme="Windows8" Margin="3" Text="{Binding SelectedBannerName}"></TextBox>
<Button Grid.Row="3" Grid.Column="1" Content="Save" Command="{Binding UpdateBannerCmd}" Height="25" Width="80" HorizontalAlignment="Left"></Button>
<Button Grid.Row="3" Grid.Column="2" Content="Calcel" Height="25" Width="80" HorizontalAlignment="Right"></Button>
</Grid>
</Grid>
</StackPanel>

Answer 1

The "IsPressed" lets you know when the button is "active" this changes again when you release the button.
Have you tried moving this to a command binding on the button and set properties on your viewModel that those grids can use to set styles on themselves?