Why does Grid Splitters interfere with Grid column width animations?

Why does Grid Splitters interfere with Grid column width animations?

Hi, I have a grid lenght animation on a grid column, then i putted a grid splitter. That is interfering with the animation, it doest work if i manully mess with the grid splitter. Any tips? Thx, Nuno sinosoidal I got this working based on the sample posted by Laurent Bugnion in this thread: Code Snippet <Window x:Class="GridLenghtAnimationTestProject.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="600" Width="800"> <Grid Background="#FFFF0000"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="button1" Click="Button_Click" Content="Click!" /> <StackPanel Grid.Column="1" x:Name="CollapsingPanel" Background="#FFF2FF00"> <Label x:Name="Collapsing" Content="Collapsing" /> </StackPanel> <Thumb Grid.Column="2" Width="10" x:Name="GridSplitter" Cursor="SizeWE" DragDelta="GridSplitter_DragDelta" /> <Label Grid.Column="3" Content="Some other content goes here" /> </Grid> </Window> public partial class Window1 : Window { private bool visible = true; public Window1() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { if (visible == true) { Collapse(); } else { Expand(); } } private void GridSplitter_DragDelta(object sender, DragDeltaEventArgs e) { Double value = CollapsingPanel.ActualWidth + e.HorizontalChange; CollapsingPanel.Width = value > 0 ? value : 0; } private void Expand() { Storyboard sb = new Storyboard(); DoubleAnimation expandAnimation = new DoubleAnimation(); expandAnimation.From = 0; expandAnimation.To = 300; expandAnimation.Duration = new TimeSpan(0, 0, 0, 0, 200); sb.Children.Add(expandAnimation); Storyboard.SetTargetProperty(expandAnimation, new PropertyPath("Width")); sb.FillBehavior = FillBehavior.Stop; sb.Completed += delegate { CollapsingPanel.Width = expandAnimation.To.Value; }; sb.Begin(CollapsingPanel); button1.Content = "Collapse Column"; visible = true; } private void Collapse() { Storyboard sb = new Storyboard(); DoubleAnimation collapseAnimation = new DoubleAnimation(); collapseAnimation.From = 300; collapseAnimation.To = 0; collapseAnimation.Duration = new TimeSpan(0, 0, 0, 0, 200); sb.Children.Add(collapseAnimation); Storyboard.SetTargetProperty(collapseAnimation, new PropertyPath("Width")); sb.FillBehavior = FillBehavior.Stop; sb.Completed += delegate { CollapsingPanel.Width = collapseAnimation.To.Value; }; sb.Begin(CollapsingPanel); button1.Content = "Show Column"; visible = false; } } Hope this helps Marco Zhou An old problem unfortunately. The value assigned via the GridSplitter is treated as local assignment and thus has precedence over the value set via the animation. As soon as the GridSplitter is manually moved, this value is fixed. See this thread for a couple of ideas for working around this issue. John JohnB2007 Animated property value will always take precedence over the locally set value, so you might have other things messed up with the animation, could you please show us the code? Thanks Marco Zhou This is my code. GridLenghtAnimation was taken from a project in codeproject : http://www.codeproject.com/KB/WPF/GridLengthAnimation.aspx private void ExpandNetworkExplorer() { GridLengthAnimation gla = new GridLengthAnimation(); gla.From = new GridLength(0, GridUnitType.Star); gla.To = new GridLength(0.3, GridUnitType.Star); gla.Duration = new TimeSpan(0, 0, 0, 0, 200); mainGrid.ColumnDefinitions[0].BeginAnimation(ColumnDefinition.WidthProperty, gla); Storyboard sb = new Storyboard(); DoubleAnimation daX = new DoubleAnimation(-networkExplorerBorder.ActualWidth, 0, new Duration(new TimeSpan(0, 0, 0, 0, 200))); daX.FillBehavior = FillBehavior.HoldEnd; Storyboard.SetTargetName(daX, TranslateTransformName); Storyboard.SetTargetProperty(daX, new PropertyPath(TranslateTransform.XProperty)); sb.Children.Add(daX); //sb.BeginTime = new TimeSpan(0, 0, 0, 0, 150); sb.Begin(networkExplorerBorder); // animation for the button rotation Storyboard rotateButton = (Storyboard)this.FindResource("networkExplorerHideAndShowButtonRotateUp"); this.BeginStoryboard(rotateButton); networkExplorerHideAndShowMenuItem.Header = "Hide Network Explorer"; networkExplorerVisible = true; } private void CollapseNetworkExplorer() { // animation for the network explorer x translate Storyboard sb = new Storyboard(); DoubleAnimation daX = new DoubleAnimation(0, -networkExplorerBorder.ActualWidth, new Duration(new TimeSpan(0, 0, 0, 0, 200))); daX.FillBehavior = FillBehavior.HoldEnd; Storyboard.SetTargetName(daX, TranslateTransformName); Storyboard.SetTargetProperty(daX, new PropertyPath(TranslateTransform.XProperty)); sb.Children.Add(daX); sb.Begin(networkExplorerBorder);   // animation for the network explorer column width GridLengthAnimation gla = new GridLengthAnimation(); gla.From = new GridLength(0.3, GridUnitType.Star); gla.To = new GridLength(0, GridUnitType.Star); gla.Duration = new TimeSpan(0, 0, 0, 0, 200); //gla.BeginTime = new TimeSpan(0, 0, 0, 0, 150); mainGrid.ColumnDefinitions[0].BeginAnimation(ColumnDefinition.WidthProperty, gla); // animation for the button rotation Storyboard rotateButton = (Storyboard)this.FindResource("networkExplorerHideAndShowButtonRotateDown"); this.BeginStoryboard(rotateButton); networkExplorerHideAndShowMenuItem.Header = "Show Network Explorer";   networkExplorerVisible = false; }   Thx, Nuno sinosoidal Could you please provide a complete and ready to run example? this can help us directly pinpoint the problem. Thanks Marco Zhou Hi, Here is the sample project: http://www.monologica.com/GridLenghtAnimationTestProject.zip Try to first use the button provided. After that, use the grid splitter (red), and then try to use the button again. Thx for the time, Best regards, Nuno sinosoidal I got this working based on the sample posted by Laurent Bugnion in this thread: Code Snippet <Window x:Class="GridLenghtAnimationTestProject.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="600" Width="800"> <Grid Background="#FFFF0000"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button x:Name="button1" Click="Button_Click" Content="Click!" /> <StackPanel Grid.Column="1" x:Name="CollapsingPanel" Background="#FFF2FF00"> <Label x:Name="Collapsing" Content="Collapsing" /> </StackPanel> <Thumb Grid.Column="2" Width="10" x:Name="GridSplitter" Cursor="SizeWE" DragDelta="GridSplitter_DragDelta" /> <Label Grid.Column="3" Content="Some other content goes here" /> </Grid> </Window> public partial class Window1 : Window { private bool visible = true; public Window1() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { if (visible == true) { Collapse(); } else { Expand(); } } private void GridSplitter_DragDelta(object sender, DragDeltaEventArgs e) { Double value = CollapsingPanel.ActualWidth + e.HorizontalChange; CollapsingPanel.Width = value > 0 ? value : 0; } private void Expand() { Storyboard sb = new Storyboard(); DoubleAnimation expandAnimation = new DoubleAnimation(); expandAnimation.From = 0; expandAnimation.To = 300; expandAnimation.Duration = new TimeSpan(0, 0, 0, 0, 200); sb.Children.Add(expandAnimation); Storyboard.SetTargetProperty(expandAnimation, new PropertyPath("Width")); sb.FillBehavior = FillBehavior.Stop; sb.Completed += delegate { CollapsingPanel.Width = expandAnimation.To.Value; }; sb.Begin(CollapsingPanel); button1.Content = "Collapse Column"; visible = true; } private void Collapse() { Storyboard sb = new Storyboard(); DoubleAnimation collapseAnimation = new DoubleAnimation(); collapseAnimation.From = 300; collapseAnimation.To = 0; collapseAnimation.Duration = new TimeSpan(0, 0, 0, 0, 200); sb.Children.Add(collapseAnimation); Storyboard.SetTargetProperty(collapseAnimation, new PropertyPath("Width")); sb.FillBehavior = FillBehavior.Stop; sb.Completed += delegate { CollapsingPanel.Width = collapseAnimation.To.Value; }; sb.Begin(CollapsingPanel); button1.Content = "Show Column"; visible = false; } } Hope this helps