How to run annimation on control in ListBox DataTemplate

2 replies. Latest Post by cbeck on March 18, 2009.

(0)

cbeck

Member

0 points

14 Posts

How to run annimation on control in ListBox DataTemplate

03-11-2009 2:19 PM |

Thanks to all for help on this so far! One more challenge to go.

I have a structure like the below. I would like to use an animation to change Visibility of "lbInner" to Visible when the mouse enters tbOuter and Collapsed when the mouse leaves tbOuter.

Using the VisualTreeHelper to walk the tree I can find lbInner and control the visibility within the mouse events. What I can't get to work is an animation with lbInner as the Target.
> I created a StoryBoard as a resource and tried running it (myStoryBoard.Begin()), but it reports "cannot find lbInner".
> I added states in Blend and tried using VisualSateManager. It returns false. I assume because it cannot find lbInner.

Here is a brief outline of the structure (full XAML is below)
<ListBox x:Name="lbOuter">
<ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel x:Name="InnerStackPanel">
        <TextBlock x:Name="tbOuter"
                         MouseEnter="tbOuter_MouseEnter"
                         MouseLeave="tbOuter_MouseLeave"/>
        <ListBox x:Name="lbInner" Visibility="Collapsed">
            ...
        </ListBox>
      </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Here is what the User Control looks like: http://cbeckPhoto.zenfolio.com/p294334137/e1bd43d6c

Your thoughts on this are greatly appreciated!

Below is the full XAML.

<UserControl ...>
<Grid x:Name="LayoutRoot">
    <StackPanel Background="LightGray">
      <ListBox x:Name="lbOuter" ItemsSource="{Binding}" Background="LightBlue" MinHeight="50">
        <ListBox.ItemTemplate>          <DataTemplate>            <StackPanel x:Name="InnerStackPanel" Background="#FFFFFFFF">
                            <StackPanel.Resources>                <Storyboard x:Name="lbInnerExpand">                  <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"                                     Storyboard.TargetName="lbInner"                                     Storyboard.TargetProperty="(UIElement.Visibility)">                    <DiscreteObjectKeyFrame KeyTime="00:00:00.2000000">                      <DiscreteObjectKeyFrame.Value>                        <Visibility>Visible</Visibility>                      </DiscreteObjectKeyFrame.Value>                    </DiscreteObjectKeyFrame>                  </ObjectAnimationUsingKeyFrames>                </Storyboard>              </StackPanel.Resources>              <TextBlock Text="{Binding}" Foreground="#FF000000" x:Name="tbInner"                         MouseEnter="tbOuter_MouseEnter" MouseLeave="tbOuter_MouseLeave"/>              <ListBox x:Name="lbInner" ItemsSource="{Binding}" Background="#FF90EE90" Foreground="#FF000000"
                       Visibility="Collapsed">                <ListBox.ItemsPanel>                  <ItemsPanelTemplate>                    <controls:WrapPanel/>                  </ItemsPanelTemplate>                </ListBox.ItemsPanel>                <ListBox.ItemTemplate>                          <DataTemplate>                      <Grid x:Name="ItemGrid" Height="20" Width="Auto" IsHitTestVisible="True">                        <Grid.ColumnDefinitions>                          <ColumnDefinition Width="14"/>                          <ColumnDefinition Width="*"/>                        </Grid.ColumnDefinitions>                        <Button Content="X" Grid.Column="0" HorizontalAlignment="Stretch"                           VerticalAlignment="Stretch" Cursor="Hand" Click="Button1_Click"/>                        <TextBlock x:Name="DocTagListTagTextBlock" Text="{Binding}" Margin="0,-0.35,0,0.35"                          Grid.Column="1" VerticalAlignment="Center"/>                      </Grid>                  </DataTemplate>                </ListBox.ItemTemplate>                    </ListBox>            </StackPanel>                                                    </DataTemplate>        </ListBox.ItemTemplate>                                                </ListBox>      <TextBlock Text="TextBlock" TextWrapping="Wrap" x:Name="OutputTextBlock"/>      <Button Content="Button" x:Name="TestButton" Click="TestButton_Click"/>    </StackPanel> </Grid>

</UserControl>

Mog Lian...