Collapse / Expand Groupboxes

Question

I have the following XAML in which there are three group blocks. There are flags in the header of these group boxes.

What I would like to achieve: when I check / uncheck the box, I would like the corresponding group box to expand / collapse slowly with smooth animation.

I am trying to do this in Blend 4, but I am pretty newbie. Any help on how to achieve this? In particular, can animations be autonomous in XAML?

UPDATE: It seems to be close, but I do not quite understand it.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfControlLibrary1.MainControl" x:Name="MultiVol"> <StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch"> <GroupBox Margin="8,0" BorderBrush="#FF88B1D8"> <GroupBox.Header> <WrapPanel> <CheckBox IsChecked="True" VerticalAlignment="Center" /> <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> </WrapPanel> </GroupBox.Header> <UniformGrid Columns="2"> <Label Content="Spots"></Label> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Hist. references" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Tenors" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> </UniformGrid> </GroupBox> <GroupBox Margin="8,0" BorderBrush="#FF88B1D8"> <GroupBox.Header> <WrapPanel> <CheckBox IsChecked="True" VerticalAlignment="Center" /> <Label Content="Skew" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> </WrapPanel> </GroupBox.Header> <UniformGrid Columns="2"> <Label Content="Spot Intervals"></Label> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Hist. references" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Tenors" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Compute 'Power'" /> <CheckBox IsChecked="False" VerticalAlignment="Center"/> </UniformGrid> </GroupBox> <GroupBox Margin="8,0" BorderBrush="#FF88B1D8"> <GroupBox.Header> <WrapPanel> <CheckBox IsChecked="True" VerticalAlignment="Center" /> <Label Content="Term structure" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> </WrapPanel> </GroupBox.Header> <UniformGrid Columns="2"> <Label Content="Spots" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Tenors" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> </UniformGrid> </GroupBox> </StackPanel> </UserControl> 

Answer 1

Just edited the first group box in your simple code:

  <GroupBox Margin="8,0" BorderBrush="#FF88B1D8" Height="150"> <GroupBox.Resources> <Style TargetType="GroupBox"> <Style.Triggers> <EventTrigger RoutedEvent="CheckBox.Unchecked"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="30" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Checked"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </GroupBox.Resources> <GroupBox.Header> <WrapPanel> <CheckBox IsChecked="True" VerticalAlignment="Center" /> <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" /> </WrapPanel> </GroupBox.Header> <UniformGrid Columns="2"> <Label Content="Spots"></Label> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Hist. references" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Tenors" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> </UniformGrid> </GroupBox> 

If you want to have this in one group field, you can put a style element inside this code

 <GroupBox.Resources> <!--Style Inside HEre--> </GroupBox.Resources> 

to implement it in one group field.

Another suggestion is to create a style inside the stack panel and add a key to it:

  <StackPanel.Resources> <Style TargetType="GroupBox" x:Key="groupBoxStyle"> <Style.Triggers> <EventTrigger RoutedEvent="CheckBox.Unchecked"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="30" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Checked"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </StackPanel.Resources> 

then tied it to the group box style:

  <GroupBox Margin="8,0" Height="150" BorderBrush="Transparent" Style="{StaticResource groupBoxStyle}"> <GroupBox.Header> <WrapPanel> <CheckBox IsChecked="True" VerticalAlignment="Center" /> <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" /> </WrapPanel> </GroupBox.Header> <Border BorderBrush="Black" BorderThickness="2"> <UniformGrid Columns="2"> <Label Content="Spots"></Label> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Hist. references" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Tenors" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> </UniformGrid> </Border> </GroupBox> 

this approach will be more useful if you want to implement this in the future for multiple group boxes

In case you want to process a flag and an unchecked event, you can use this code

  <GroupBox Margin="8,0" Height="150" BorderBrush="Transparent" Style="{StaticResource groupBoxStyle}" CheckBox.Checked="CheckBox_Checked" CheckBox.Unchecked="CheckBox_Unchecked"> <GroupBox.Header> <WrapPanel> <CheckBox x:Name="chkHeader" IsChecked="True" VerticalAlignment="Center" /> <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" /> </WrapPanel> </GroupBox.Header> <Border BorderBrush="Black" BorderThickness="2"> <UniformGrid Columns="2"> <Label Content="Spots"></Label> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Hist. references" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> <Label Content="Tenors" /> <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" /> </UniformGrid> </Border> </GroupBox> 

and add this to the code behind:

  private void CheckBox_Checked(object sender, RoutedEventArgs e) { if ((e.OriginalSource as CheckBox).Name != "chkHeader") { e.Handled = true; } } private void CheckBox_Unchecked(object sender, RoutedEventArgs e) { if ((e.OriginalSource as CheckBox).Name != "chkHeader") { e.Handled = true; } } 

Answer 2

You should probably use Expander for this (what they are for) and animate .

If you don't like the look of re-template , you can make them look like a group box.