views:

20

answers:

0

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.