Cannot begin storyboard based on ListBoxItem selection???

Question

0 down vote favorite

It become really confusing since I started it. It supposed to be something simple but I already spent a good deal of time and cannot find a way around it. I need to run a storyboard on listboxitem selected with the node is 'name' and value is 'SERVERS'. The storyboard will change margins of the border with x:Name="ListBoxBorder". This border is a parent of the listbox itself. I am really stuck with it. It supposed to be something simple but I have no way around it. I am wondering if someone can help me to understand what I am missing in my particular case. Please review the code. I am highly appreciate your help. Here what I have. XAML:    <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>      <XmlDataProvider x:Key="PagesData" XPath="/Pages" Source="Data/NavList_DataSource.xml" />      <DataTemplate x:Key="ListBoxItemDataTemplate">     <StackPanel x:Name="DataItem" Orientation="Horizontal" Margin="12,0,0,0" >          <Image Source="{Binding XPath=@icon}" />      <TextBlock x:Name="textBlock" Text="{Binding XPath=@name}" />     </StackPanel>   </DataTemplate>   <DataTemplate x:Key="SelectedListBoxItemDataTemplate">    <StackPanel x:Name="DataItemSelected" Orientation="Horizontal" Margin="12,0,0,0" >      <Image x:Name="ListBoxImage" Source="{Binding XPath=@icon}" />      <TextBlock x:Name="textBlock" Text="{Binding XPath=@name}" />     </StackPanel>   </DataTemplate>      <Style x:Key="ListBoxItemContainerStyle" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">       <Setter Property="Background" Value="Transparent"/>    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>    <Setter Property="Padding" Value="2,0,0,0"/>    <Setter Property="IsEnabled" Value="{Binding XPath=@IsEnabled}"/>    <Setter Property="ContentTemplate" Value="{StaticResource ListBoxItemDataTemplate}"/>        <Setter Property="Template" >     <Setter.Value>      <ControlTemplate TargetType="{x:Type ListBoxItem}">       <Border x:Name="Bd"         BorderBrush="{TemplateBinding BorderBrush}"         BorderThickness="{TemplateBinding BorderThickness}"         Background="{TemplateBinding Background}"         Padding="{TemplateBinding Padding}"         SnapsToDevicePixels="true">                <ContentPresenter x:Name="contentPresenter"        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />       </Border>              <ControlTemplate.Triggers>                <Trigger Property="IsSelected" Value="true">         <Setter Property="ContentTemplate" Value="{StaticResource SelectedListBoxItemDataTemplate}"/>         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>         <Setter Property="Background" TargetName="Bd" Value="{DynamicResource Selection}"/>        </Trigger>                <MultiTrigger>         <MultiTrigger.Conditions>          <Condition Property="IsSelected" Value="true"/>          <Condition Property="Selector.IsSelectionActive" Value="True"/>         </MultiTrigger.Conditions>         <Setter Property="Background" TargetName="Bd" Value="{DynamicResource Selection}"/>         <Setter Property="Foreground" Value="#FFFFFFFF"/>         <Setter Property="OpacityMask" TargetName="contentPresenter" Value="Black"/>         <Setter Property="Background" Value="#FF181818"/>        </MultiTrigger>                <Trigger Property="IsEnabled" Value="false">         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>        </Trigger>       </ControlTemplate.Triggers>      </ControlTemplate>     </Setter.Value>    </Setter>   </Style>       <Storyboard x:Key="RetractPane_In">    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="ListBoxBorder">     <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static HorizontalAlignment.Stretch}"/>     <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static HorizontalAlignment.Left}"/>    </ObjectAnimationUsingKeyFrames>    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="ListBoxBorder">     <EasingDoubleKeyFrame KeyTime="0" Value="0"/>     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.51"/>    </DoubleAnimationUsingKeyFrames>    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ListBoxBorder">     <EasingThicknessKeyFrame KeyTime="0" Value="0"/>     <EasingThicknessKeyFrame KeyTime="0:0:0.3" Value="0,0,145,0"/>    </ThicknessAnimationUsingKeyFrames>   </Storyboard>     <Storyboard x:Key="RetractPane_Out">    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="ListBoxBorder">     <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static HorizontalAlignment.Left}"/>     <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static HorizontalAlignment.Stretch}"/>    </ObjectAnimationUsingKeyFrames>    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="ListBoxBorder">     <EasingDoubleKeyFrame KeyTime="0" Value="0.51"/>     <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>    </DoubleAnimationUsingKeyFrames>    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ListBoxBorder">     <EasingThicknessKeyFrame KeyTime="0" Value="0,0,145,0"/>     <EasingThicknessKeyFrame KeyTime="0:0:0.3" Value="0"/>    </ThicknessAnimationUsingKeyFrames>   </Storyboard> </Window.Resources>   <Grid>   <Border x:Name="ListBoxBorder" Grid.Column="0" Margin="0" Background="#FFF3F3F3" HorizontalAlignment="Left">          <Border.Effect>           <DropShadowEffect Direction="358" ShadowDepth="4" BlurRadius="4" Opacity="0"/>          </Border.Effect>          <ListBox x:Name="Nav_ListBox"           SelectedValuePath="@UriSource"           SelectedIndex="0"           ItemsSource="{Binding Source={StaticResource PagesData}, XPath=page}"           ItemContainerStyle="{DynamicResource ListBoxItemContainerStyle}"           ClipToBounds="True" >                     <ListBox.Style>            <Style>             <Style.Triggers>              <DataTrigger  Binding="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem[name].InnerText}" Value="SERVERS">              <DataTrigger.EnterActions>                <BeginStoryboard Storyboard="{StaticResource RetractPane_In}" x:Name="RetractPane_In_BeginStoryboard"/>               </DataTrigger.EnterActions>               <DataTrigger.ExitActions>                 <RemoveStoryboard BeginStoryboardName="RetractPane_In_BeginStoryboard"/>               </DataTrigger.ExitActions>              </DataTrigger>             </Style.Triggers>            </Style>           </ListBox.Style>          </ListBox>         </Border>    </Grid> </Window>

XML:

 <?xml version="1.0" encoding="utf-8"?>
<Pages xmlns="">
 <page id="0" icon="Resources/Icon0.png" name="PAGES" UriSource="Pages/PAGE.xaml" ></page>
 <page id="1" icon="Resources/Icon1.png" name="SERVERS" UriSource="Pages/Servers.xaml"></page>
 <page id="2" icon="Resources/Icon2.png" name="OTHER" UriSource="Pages/Other.xaml"></page>
</Pages>

Thank you in advance!