Expand / Collapse Animation

[Rob]

I am working with the RadTreeView.  Is there a way to disable (or customize) the animation used when expanding or collapsing the tree?  The tree I am working with has a large number of items and the animation is dirving me and my users crazy...

[Tihomir Petkov]

Hello Rob,

You can do two things:
 - disable animations globally: AnimationManager.IsGlobalAnimationEnabled = false;
 - disable animations only on your treeview items:

Declare the following namespace in your application XAML:

xmlns:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"

Create a style:

<Style TargetType="telerikNavigation:RadTreeViewItem" x:Key="itemStyle">
<Setter Property="telerikAnimation:AnimationManager.IsAnimationEnabled" Value="false" />
</Style>

And finally, assign that style to either the ItemContainerStyle property of your treeview (in case you are data binding it) or to the Style property of individual treeview items (in case you a specifying the items declaratively in XAML).

Let me know if this solves your problem.

Regards,
Tihomir Petkov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Rob]

Do you know if this is still working in the latest release?

I tried both methods and only one of them seems to work.

A) This seems to work fine...

Telerik.Windows.Controls.Animation.AnimationManager.IsGlobalAnimationEnabled = false;

B) But this method doesn't seem to have any effect..

 

<UserControl.Resources>
  <Style TargetType="radnav:RadTreeViewItem" x:Key="itemStyle">
    <Setter Property="telerikAnimation:AnimationManager.IsAnimationEnabled" Value="false" />
  </Style>
</UserControl.Resources>

<Grid x:Name="grdHistoryPanelAnnotation" Background="White">
  <Grid.Resources>
    <rad:HierarchicalDataTemplate x:Key="HistoricalEventInfoHeaderEdt" ItemContainerStyle="{StaticResource itemStyle}">
      <Grid Margin="0,0,20,0" Grid.Row="1">
        <Grid.RowDefinitions>
          <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="150" />
          <ColumnDefinition Width="180" />
          <ColumnDefinition Width="180" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" Text="{Binding FieldName}" Foreground="#FF000000" FontFamily="Portable User Interface" FontSize="10.5"/>
        <TextBlock Grid.Row="0" Grid.Column="1" TextWrapping="Wrap" Text="{Binding OldValue}" Foreground="#FF000000" FontFamily="Portable User Interface" FontSize="10.5"/>
        <TextBlock Grid.Row="0" Grid.Column="2" TextWrapping="Wrap" Text="{Binding NewValue}" Foreground="#FF000000" FontFamily="Portable User Interface" FontSize="10.5"/>
      </Grid>
    </rad:HierarchicalDataTemplate>

    <rad:HierarchicalDataTemplate x:Key="HistoricalEventDetails" ItemsSource="{Binding EventInfos}" ItemTemplate="{StaticResource HistoricalEventInfoHeaderEdt}" ItemContainerStyle="{StaticResource itemStyle}">
      <Grid Grid.Row="1">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" MaxHeight="18"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="150" />
          <ColumnDefinition Width="150" />
          <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
        <TextBlock Margin="0,0,0,0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" TextWrapping="Wrap" Text="{Binding s}" Foreground="#FF000000" FontSize="10.5" FontWeight="Normal" FontFamily="Portable User Interface" />
      </Grid>
    </rad:HierarchicalDataTemplate>

    <rad:HierarchicalDataTemplate x:Key="HistoricalEventDisplayTemplate" ItemsSource="{Binding EventDetails}" ItemTemplate="{StaticResource HistoricalEventDetails}" ItemContainerStyle="{StaticResource itemStyle}">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" MaxHeight="18" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="165" />
          <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding d}" FontFamily="Portable User Interface" Foreground="#FF000000" FontWeight="Bold" FontSize="10.5" />
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding p}" Foreground="#FF000000" FontWeight="Bold" FontSize="10.5" FontFamily="Portable User Interface" />
      </Grid>
    </rad:HierarchicalDataTemplate>

  </Grid.Resources>

  <radnav:RadTreeView x:Name="radTree" Grid.Row="1" Grid.Column="0"  Margin="0,2,0,0" IsLineEnabled="True" ItemsSource="{Binding}" ItemTemplate="{StaticResource HistoricalEventDisplayTemplate}"  ItemContainerStyle="{StaticResource itemStyle}"  />

</Grid>

namespace SilverlightApplication93
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();

            ObservableCollection<HistoricalEvent> x = new ObservableCollection<HistoricalEvent>();

            for (int i = 1; i <= 30; i++)
            {

                HistoricalEvent he = new HistoricalEvent()
                {
                    d = DateTime.Now,
                    p = ((i % 3).Equals(0) ? "by Rob" : "by Osama"),
                    EventDetails = new ObservableCollection<HistoricalEventDetail>
                    {
                        new HistoricalEventDetail()
                        {
                            s = ((i % 3).Equals(0) ? "Rob's Comments" : "Osama's Comments"),
                        },
                        new HistoricalEventDetail()
                        {
                            s = "Show Changed Fields",
                            EventInfos = new ObservableCollection<EventInfo>()
                            {
                                new EventInfo() { FieldName = (string.Format("Field {0}", i)), NewValue = (string.Format("Field {0} New Value", i)), OldValue = (string.Format("Field {0} Old Value", i)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+18)), NewValue = (string.Format("Field {0} New Value", i+18)), OldValue = (string.Format("Field {0} Old Value", i+18)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+37)), NewValue = (string.Format("Field {0} New Value", i+37)), OldValue = (string.Format("Field {0} Old Value", i+37)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+12)), NewValue = (string.Format("Field {0} New Value", i+12)), OldValue = (string.Format("Field {0} Old Value", i+12)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+19)), NewValue = (string.Format("Field {0} New Value", i+19)), OldValue = (string.Format("Field {0} Old Value", i+19)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+210)), NewValue = (string.Format("Field {0} New Value", i+210)), OldValue = (string.Format("Field {0} Old Value", i+210)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+43)), NewValue = (string.Format("Field {0} New Value", i+43)), OldValue = (string.Format("Field {0} Old Value", i+43)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+17)), NewValue = (string.Format("Field {0} New Value", i+17)), OldValue = (string.Format("Field {0} Old Value", i+17)) },
                                new EventInfo() { FieldName = (string.Format("Field {0}", i+10)), NewValue = (string.Format("Field {0} New Value", i+10)), OldValue = (string.Format("Field {0} Old Value", i+10)) },
                            }
                        }

                    }
                };

                x.Add(he);
            }

            this.DataContext = x;


            Telerik.Windows.Controls.Animation.AnimationManager.IsGlobalAnimationEnabled = false;

        }

    }

    public class HistoricalEvent
    {

        public DateTime d { get; set; }

        public string p { get; set; }

        private ObservableCollection<HistoricalEventDetail> _EventDetails;
        public ObservableCollection<HistoricalEventDetail> EventDetails
        {
            get
            {
                if (_EventDetails == null)
                    _EventDetails = new ObservableCollection<HistoricalEventDetail>();
                return _EventDetails;
            }
            set
            {
                _EventDetails = value;
            }
        }
    }

    public class HistoricalEventDetail
    {
        public string s { get; set; }
        private ObservableCollection<EventInfo> _EventInfos;
        public ObservableCollection<EventInfo> EventInfos
        {
            get
            {
                if (_EventInfos == null)
                    _EventInfos = new ObservableCollection<EventInfo>();
                return _EventInfos;
            }
            set
            {
                _EventInfos = value;
            }
        }
    }

    public class EventInfo
    {

        public string FieldName { get; set; }
        public string OldValue { get; set; }
        public string NewValue { get; set; }
    }

}

[Bobi]

Hi Rob,

Instead of stetting ItemsContainerStyle you can simply disable the animation in XAML by:

<telerikNavigation:RadTreeView telerikAnimation:AnimationManager.IsAnimationEnabled="False"  />
Alternatively if you want to use Style :

<Style TargetType="telerikNavigation:RadTreeView" x:Key="itemStyle">
            <Setter Property="telerikAnimation:AnimationManager.IsAnimationEnabled" Value="false" />
  </Style>
...
<telerikNavigation:RadTreeView  Style="{StaticResource itemStyle}" />

I hope that this will help you.

Best wishes,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[The Dev]

I want to do this through code to temporarily turn it off whilst I do ExpandAll().

i.e.
 AnimationManager.SetIsAnimationEnabled(myTreeView, false);
myTreeview.ExpandAll();
 AnimationManager.SetIsAnimationEnabled(myTreeView, true);

This doesn't work, what am I doing wrong.

Also, I want the tree to expand as soon as data is loaded, where is the best place for this ?

Many thanks

D

[Hristo]

Hi Dave Clark,

Can you try the following piece of code:

private void StopAnimation_Click(object sender, RoutedEventArgs e)
{
    AnimationManager.IsGlobalAnimationEnabled = false;
}

private void StartAnimation_Click(object sender, RoutedEventArgs e)
{
    AnimationManager.IsGlobalAnimationEnabled = true;
}

Please let us know if you need more help or the provided solution is not working in your case.

Kind regards,
Hristo
the Telerik team