locked
Expand Collapse functionality with animation RRS feed

  • Question

  • Hi,

    I have a parent grid with three rows. the first row and third row have got another grid with two rows,

    First row of the child grid contains toggle button to enable expand and collapse feature, second row will contain some controls in it. The mid row(2nd row) of the parent grid has got grid splitter. i want to enable expand and collapse functionality for those toggle buttons.

    How do i go about this. It is just not working though it sounds trivial.

     

    Tuesday, July 1, 2008 8:12 AM

Answers

  • I'm not exactly sure what you're trying to achieve. However, when I use your code I get an error on the GridSplitter. This is because you didn't refer to the assembly in the declaration of the UserControl.

    When I add this line to the UserControl:
    xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"

    And this line instead of your GridSplitter:

    <extended:GridSplitter x:Name="mainAreaSplitter" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="4" Grid.Row="1" Background="#00ABB7C0"/>

    the error is gone.

    Tuesday, July 1, 2008 12:12 PM

All replies

  • Can you post your XAML & Code?

    Tuesday, July 1, 2008 10:05 AM
  •  something similar to this?

    http://silverlight.net/forums/t/19090.aspx

    Tuesday, July 1, 2008 10:18 AM
  • My Xaml goes here 

    <UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="SilverlightApplication1.Page"

    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

    Width="Auto" Height="Auto" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <UserControl.Resources>

    <Storyboard x:Name="firstanimation">

    <DoubleAnimation x:Name="dbn" Storyboard.TargetProperty="Height" Duration="00:00:00.3" />

    </Storyboard>

    <Storyboard x:Name="secondanimation">

    <DoubleAnimation x:Name="dbn1" Storyboard.TargetProperty="Height" Duration="00:00:00.3" />

    </Storyboard>

    </UserControl.Resources>

    <Grid Width="Auto" Height="Auto" Background="#00ABB7C0">

    <Grid x:Name="workingAreaPanel" Width="Auto" Height="Auto" >

    <Grid.RowDefinitions>

    <RowDefinition x:Name="firstRow" Height="*" MinHeight="28"/>

    <RowDefinition Height="4" MinHeight="4"/>

    <RowDefinition x:Name="secondRow" Height="*" MinHeight="28" />

    </Grid.RowDefinitions>

    <Grid.Background>

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

    <GradientStop Color="#FF609AD6"/>

    <GradientStop Color="#FF2B70B5" Offset="1"/>

    </LinearGradientBrush>

    </Grid.Background>

    <GridSplitter x:Name="mainAreaSplitter" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="4" Grid.Row="1" Background="#00ABB7C0"/>

    <Grid Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Background="#FFFFFFFF" x:Name="firstGrid" Grid.Column="0" Grid.Row="0" MinHeight="28">

    <Grid.RowDefinitions>

    <RowDefinition Height="28"/>

    <RowDefinition Height="*" x:Name="ganttRow"/>

    </Grid.RowDefinitions>

    <Grid Grid.Row="0">

    <ToggleButton HorizontalAlignment="Stretch" VerticalAlignment="Top" Content="Toggle1" Opacity="1" x:Name="toggle1" Cursor="Hand"/>

    </Grid>

    <Grid Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Grid.Row="1" Background="#FFFFFFFF" x:Name="contentGrid1">

    <Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    </Grid>

    </Grid>

    <Grid Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Background="#FFFFFFFF" x:Name="secondGrid" Grid.Column="0" Grid.Row="2" MinHeight="28">

    <Grid.RowDefinitions>

    <RowDefinition Height="28" />

    <RowDefinition Height="*" x:Name="dataGridRow" />

    </Grid.RowDefinitions>

    <Grid Grid.Row="0">

    <ToggleButton HorizontalAlignment="Stretch" VerticalAlignment="Top" Content="Toggle2" Opacity="1" x:Name="toggle2" Cursor="Hand" HorizontalContentAlignment="Center"/>

    </Grid>

    <Grid x:Name="contentGrid2" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Grid.Row="1" Background="#FFFFFFFF" >

    <Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="*"/>

    </Grid.RowDefinitions>

    </Grid>

    </Grid>

    </Grid>

    </Grid>

    </UserControl>

     

    My Code behind goes here

     

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Media.Animation;

    namespace SilverlightApplication1

    {

    public partial class Page : UserControl

    {

    private double animationFirstRowHeight;

    private double animationSecondRowHeight;

    public Page()

    {

    // Required to initialize variables

    InitializeComponent();

    toggle1.Click +=
    new RoutedEventHandler(toggle1_Click);toggle2.Click += new RoutedEventHandler(toggle2_Click);

    }

    void toggle1_Click(object sender, RoutedEventArgs e)

    {

    if (toggle1.IsChecked.Value || toggle2.IsChecked.Value)

    {

    mainAreaSplitter.IsEnabled =
    false;

    }

    else

    {

    mainAreaSplitter.IsEnabled =
    true;

    }

    if (toggle1.IsChecked.Value == true)

    {

    firstRow.Height =
    new GridLength(1, GridUnitType.Auto);

    firstGrid.VerticalAlignment = VerticalAlignment.Top;

    if (toggle2.IsChecked.Value == false)

    {

    secondRow.Height =
    new GridLength(1, GridUnitType.Star);

    secondGrid.VerticalAlignment = VerticalAlignment.Stretch;

    secondGrid.Height = double.NaN;

    }

    firstanimation.Stop();

    animationFirstRowHeight = firstRow.ActualHeight;

    firstGrid.Height = animationFirstRowHeight;

    dbn.From = firstGrid.ActualHeight;

    dbn.To = firstGrid.MinHeight;

    firstanimation.SetValue(
    Storyboard.TargetNameProperty, firstGrid.Name);

    firstanimation.Begin();

    }

    else

    {

    firstGrid.VerticalAlignment =
    VerticalAlignment.Top;

    firstRow.Height = new GridLength(1, GridUnitType.Auto);

    secondRow.Height = new GridLength(1, GridUnitType.Star);

    secondGrid.VerticalAlignment = VerticalAlignment.Stretch;

    double resultantAnimationHeight = animationFirstRowHeight;

    firstanimation.Stop();

    dbn.From = firstGrid.ActualHeight;

    dbn.To = resultantAnimationHeight;//t;

    firstanimation.SetValue(Storyboard.TargetNameProperty, firstGrid.Name);

    firstanimation.Begin();

    }

    }

    void toggle2_Click(object sender, RoutedEventArgs e)

    {

    if (toggle1.IsChecked.Value || toggle2.IsChecked.Value)

    {

    mainAreaSplitter.IsEnabled =
    false;

    }

    else

    {

    mainAreaSplitter.IsEnabled =
    true;

    }

    if (toggle2.IsChecked.Value == true)

    {

    if (toggle1.IsChecked.Value == false)

    {

    firstRow.Height =
    new GridLength(1, GridUnitType.Star);

    firstGrid.VerticalAlignment = VerticalAlignment.Stretch;

    firstGrid.Height = double.NaN;

    }

    secondRow.Height =
    new GridLength(1, GridUnitType.Auto);secondGrid.VerticalAlignment = VerticalAlignment.Top;

    secondanimation.Stop();

    animationSecondRowHeight = secondGrid.ActualHeight;// secondRow.ActualHeight;

    dbn1.From = animationSecondRowHeight;

    dbn1.To = secondGrid.MinHeight;

    secondanimation.SetValue(
    Storyboard.TargetNameProperty, secondGrid.Name);

    secondanimation.Begin();

    }

    else

    {

    secondGrid.VerticalAlignment =
    VerticalAlignment.Top;

    secondRow.Height = new GridLength(1, GridUnitType.Auto);

    if (toggle1.IsChecked.Value == false)

    {

    firstRow.Height =
    new GridLength(1, GridUnitType.Star);firstGrid.VerticalAlignment = VerticalAlignment.Stretch;

    }

    secondanimation.Stop();

    dbn1.From = secondGrid.ActualHeight;

    dbn1.To = animationSecondRowHeight;

    secondanimation.SetValue(
    Storyboard.TargetNameProperty, secondGrid.Name);

    secondanimation.Begin();

    }

    }

    }

    }

    Tuesday, July 1, 2008 11:49 AM
  • I'm not exactly sure what you're trying to achieve. However, when I use your code I get an error on the GridSplitter. This is because you didn't refer to the assembly in the declaration of the UserControl.

    When I add this line to the UserControl:
    xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"

    And this line instead of your GridSplitter:

    <extended:GridSplitter x:Name="mainAreaSplitter" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="4" Grid.Row="1" Background="#00ABB7C0"/>

    the error is gone.

    Tuesday, July 1, 2008 12:12 PM