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