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.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>
XML:
<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>
Thank you in advance.