locked
How to animate HierarchicalDataTemplate in a treeview? RRS feed

  • Question

  • Hi! I have a treeview with a custom item template which is described in HierarchicalDataTemplate.

    It's looks really simple: 

    <TreeView x:Name="C_Tree" IsTextSearchEnabled="True" HorizontalContentAlignment="Stretch" Margin="0,20,0,5" Grid.Row="1" Background="#FFE5E5E5" >
                        <TreeView.Resources>
    
                            <HierarchicalDataTemplate DataType="{x:Type custom:TVI}" ItemsSource="{Binding Children}">
                               <TextBlock Text="{Binding Brand}" Foreground="{Binding Color}"  Margin="2,2,2,2"/>
                                <HierarchicalDataTemplate.ItemTemplate>
                                    <DataTemplate  DataType="{x:Type custom:TVIc}">
    
                                        <Grid HorizontalAlignment="Stretch" Height="56" Margin="0" VerticalAlignment="Stretch" Width="Auto">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="56"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Border x:Name="mask" Background="White" Width="50" Height="50" CornerRadius="4"/>
                                            <StackPanel Orientation="Horizontal" Grid.Column="0" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="3,3,3,3">
                                                <StackPanel.OpacityMask>
                                                    <VisualBrush Visual="{Binding ElementName=mask}"/>
                                                </StackPanel.OpacityMask>
                                                <Image x:Name="L_Image" RenderOptions.BitmapScalingMode="HighQuality" Source="{Binding Image}" Width="50" Height="50" Opacity="{Binding Opacity}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                                            </StackPanel>
                                            <Border BorderBrush="LightGray" Width="52" Height="52" BorderThickness="1" CornerRadius="4"/>
                                            <StackPanel Margin="5,0,0,0" HorizontalAlignment="Left" Grid.Column="1" VerticalAlignment="Center">
                                                <TextBlock x:Name="L_Title" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0" FontWeight="Bold"><Run Language="ru-ru" Text="{Binding Model}" Foreground="{Binding Color}"/></TextBlock>
                                                <TextBlock x:Name="L_Text" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,0,0,0" FontSize="10" Foreground="#FF636363"><Run Language="ru-ru" FontStyle="Italic" Text="{Binding Price}"/></TextBlock>
                                            </StackPanel>
                                        </Grid>
                                    </DataTemplate>
                                </HierarchicalDataTemplate.ItemTemplate>
                            </HierarchicalDataTemplate>
                        </TreeView.Resources>
                    </TreeView>

    There simple textblock as a root element (level 1) and few textblocks with image on level 2. I would like to make appearance of this elements more smooth. Like 0:0:0 Opacity = 0, and at 0:0:0.5 Opacity = 1. My main problem is to create and assign this animation to both parts of this template. I'm using vb.net express 2012 and here is no kind of StoryBoard like in Blend. But I cant do it in Blend either because such thing like HierarchicalDataTemplate have no visualization. So, I'm stuck... Does anyone know, how it could be done? Thanks!


    Aleksey

    Sunday, July 28, 2013 12:54 PM

Answers

  • I just tried it and here is the XAML for my treeview , with the event trigger.

            <TreeView Name="tvMain" TreeViewItem.Expanded="tvMain_Expanded" Grid.Column="0" SelectedItemChanged="tvMain_SelectedItemChanged">
                <TreeView.Resources>
                    <Style TargetType="{x:Type TreeViewItem}">
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         Duration="00:00:02"
                                                         From="0"
                                                         To="1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </TreeView.Resources>
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Converter={StaticResource gli}}">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Background" Value="LightGoldenrodYellow"></Setter>
                                    <Setter Property="Foreground" Value="Black"></Setter>
                                    <Setter Property="FontSize" Value="13"></Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Path=Type}" Value="0">
                                            <Setter Property="Background" Value="Linen"></Setter>
                                            <Setter Property="FontSize" Value="14"></Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </StackPanel.Resources>
                            <TextBlock Text="{Binding Path=Name}">
                            </TextBlock>
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
                <!--<TreeView.ItemContainerStyle>
                    <Style TargetType="TreeViewItem" >
                        <EventSetter Event="TreeView.MouseMove" Handler="tvMain_MouseMove"></EventSetter>
                    </Style>
                </TreeView.ItemContainerStyle>-->
                <TreeView.ContextMenu>
                    <ContextMenu>
                        <MenuItem Click="MenuItem_Click">TestIt</MenuItem>
                    </ContextMenu>
                </TreeView.ContextMenu>
            </TreeView>
    

    Hope this helps

    LS


    Lloyd Sheen

    • Marked as answer by Newfriend Sunday, July 28, 2013 3:31 PM
    Sunday, July 28, 2013 3:23 PM

All replies

  • Have you considered EventTrigger?

    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:02" From="0" To="1" /> </Storyboard> </BeginStoryboard> </EventTrigger>

    Sunday, July 28, 2013 1:08 PM
  • Hi, thanks for the storyboard, but question is not really about it content. Mostly I'm interested in which part of my code I should insert it?

    Aleksey

    Sunday, July 28, 2013 3:16 PM
  • I just tried it and here is the XAML for my treeview , with the event trigger.

            <TreeView Name="tvMain" TreeViewItem.Expanded="tvMain_Expanded" Grid.Column="0" SelectedItemChanged="tvMain_SelectedItemChanged">
                <TreeView.Resources>
                    <Style TargetType="{x:Type TreeViewItem}">
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         Duration="00:00:02"
                                                         From="0"
                                                         To="1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </TreeView.Resources>
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Converter={StaticResource gli}}">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Background" Value="LightGoldenrodYellow"></Setter>
                                    <Setter Property="Foreground" Value="Black"></Setter>
                                    <Setter Property="FontSize" Value="13"></Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Path=Type}" Value="0">
                                            <Setter Property="Background" Value="Linen"></Setter>
                                            <Setter Property="FontSize" Value="14"></Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </StackPanel.Resources>
                            <TextBlock Text="{Binding Path=Name}">
                            </TextBlock>
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
                <!--<TreeView.ItemContainerStyle>
                    <Style TargetType="TreeViewItem" >
                        <EventSetter Event="TreeView.MouseMove" Handler="tvMain_MouseMove"></EventSetter>
                    </Style>
                </TreeView.ItemContainerStyle>-->
                <TreeView.ContextMenu>
                    <ContextMenu>
                        <MenuItem Click="MenuItem_Click">TestIt</MenuItem>
                    </ContextMenu>
                </TreeView.ContextMenu>
            </TreeView>
    

    Hope this helps

    LS


    Lloyd Sheen

    • Marked as answer by Newfriend Sunday, July 28, 2013 3:31 PM
    Sunday, July 28, 2013 3:23 PM
  • Oh, now I got it! Thanks!

    Aleksey

    Sunday, July 28, 2013 3:31 PM
  • There you go sqlguy posted you the code with eventtrigger
    Sunday, July 28, 2013 8:47 PM