How to begin storyboard based on ListBoxItem selection? - wpf

Question

I encounter a problem that I cannot solve. I hope to find an answer here. I need a listbox to hide half way when a certain listboxitem is selected. I setup a storyboard with opacity mask animation which work fine in blend. My problem I cannot initiate BeginStoryboard. I tried numerous ways and no success. I need to hide the listbox to reveal the content behind it. I generate listboxitems from XML data file and based on the name node I planned to initiate storyboard playing.
Here what I have.
I created DataTemplate which I set in ListBoxItem Style:
<DataTemplate x:Key="SelectedListBoxItemDataTemplate">
<StackPanel x:Name="DataItemSelected" Orientation="Horizontal" Margin="12,0,0,0" >
<TextBlock FontFamily="Arial" Text="►" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{Binding XPath=state}" Margin="-4, 0,6,4"/>
<Image x:Name="ListBoxImage" Source="{Binding XPath=icon}" Margin="4,4,14,4" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" />
<TextBlock x:Name="textBlock" Text="{Binding XPath=name}" LineHeight="22" Foreground="#FFFFFFFF" FontSize="16" />
<Border x:Name="PART_Icon" Background="{x:Null}" Width="{Binding NodeValue.Width}" HorizontalAlignment="Left" Padding="3,0"></Border>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding XPath=name}" Value="SERVERS">
<Setter TargetName="PART_Icon" Property="Background" Value="Black" />
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HideListBox}" x:Name="HideListBox_BeginStoryboard"/>
</DataTrigger.EnterActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I need to run this storyboard which I keep in Window.Resources:
<Storyboard x:Key="HideListBox">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="Nav_ListBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0.069"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="Nav_ListBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0.069"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Nav_ListBox">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Nav_ListBox">
<EasingColorKeyFrame KeyTime="0" Value="#00000000"/>
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="#00000000"/>
</ColorAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="Nav_ListBox">
<EasingPointKeyFrame KeyTime="0" Value="1.076,0.501"/>
<EasingPointKeyFrame KeyTime="0:0:0.4" Value="1,0.5"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="Nav_ListBox">
<EasingPointKeyFrame KeyTime="0" Value="0.035,0.501"/>
<EasingPointKeyFrame KeyTime="0:0:0.4" Value="0.2,0.5"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
I am getting errors that "Nav_ListBox" object cannot be found. I understand that listbox object is not avaible from the datatemplate level. I am wondering what will be the right solution to enable animation to play and eventualy to remove on click the othe listboxitem. Thank you in advance.

Answer 1

I put together something quick to hopefully help you on your way (new default WPF application, MainWindow's DataContext set to itself). I ended up using an IValueConverter to get the Name from the generated XmlLinkedNode out of the SelectedItem of the ListBox, but there should be a more elegant way using XPath statements I'm not familiar with. Basically declare your Storyboard on the ListBoxes Style, not in the Datatemplate:
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<XmlDataProvider x:Key="persons"
XPath="persons/person"
Source="xmldata.xml" />
<local:SelectionConverter x:Key="selectionConverter" />
</Window.Resources>
<Grid>
<ListBox Background="White" ItemsSource="{Binding Source={StaticResource persons}}" x:Name="lst">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding XPath=name}" />
<TextBlock Text="{Binding XPath=prop}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=lst, Path=SelectedItem, Converter={StaticResource selectionConverter}}"
Value="b">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:1">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Green" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Duration="0:0:1">
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="White" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
</Grid>
</Window>
MainWindow codebehind:
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
}
}
SelectionConverter.cs
namespace WpfApplication1
{
public class SelectionConverter : IValueConverter
{
#region IValueConverter Members
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (value == null) ? null : (value as XmlLinkedNode).SelectNodes("name")[0].InnerText;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
}
Sample data (Add to your project as XML File):
<?xml version="1.0" encoding="utf-8" ?>
<persons>
<person>
<name>a</name>
<prop>3</prop>
</person>
<person>
<name>b</name>
<prop>3</prop>
</person>
<person>
<name>c</name>
<prop>3</prop>
</person>
</persons>