Contraer/Expandir Groupboxes

Tengo el siguiente XAML, en el que hay tres grupos de cajas apiladas. En el encabezado de esas cajas de grupo hay casillas de verificación.Contraer/Expandir Groupboxes

Lo que me gustaría lograr: cuando marque/desmarque un cuadro, me gustaría que el cuadro de grupo correspondiente se expanda/contraiga lentamente, con una animación suave.

Estoy intentando esto en Blend 4 pero soy bastante novato. ¿Alguna ayuda sobre cómo lograr esto? En particular, ¿la animación puede ser independiente en el XAML?

ACTUALIZACIÓN

: This seems to come close, pero no lo entiendo muy bien

XAML Designer

<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>

Fuente

2012-01-30 Jerome

acaba de editar el primer cuadro de grupo en su código simple:

<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>

Si usted quiere tener esto en un cuadro de grupo único puede colocar el elemento de estilo dentro de este código

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

a implementarlo en un solo cuadro de grupo.

Otra sugerencia se crea un estilo dentro del panel de pila y añadir una clave para ello:

<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>

unen entonces al estilo de la caja de grupo:

<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>

este enfoque será más útil cuando desee implementar esto en el futuro en múltiples grupos de cajas

En caso de que desee manejar la casilla de verificación y el evento no seleccionado, podría usar este código

<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>

y añadir esto en el código subyacente:

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; 
     } 
    }

Fuente

2012-01-30 13:46:18

funciona muy bien! Gracias ! – Jerome

Sin embargo, ¿cómo especificar from = "Auto"? Por el momento, los valores predeterminados lo hacen un poco extraño – Jerome

Además, ¿cómo obtener un intervalo de tiempo más pequeño? Intenté 0: 0: 0.5 y 0: 0: 0: 1, ambos llevan a excepciones – Jerome

que es mejor usar un Expander para esto (que es lo que son para) y animate that.

Si no te gusta el aspecto re-template, puedes hacer que se vean como un cuadro de grupo.

Fuente

2012-01-30 13:29:53

Contraer/Expandir Groupboxes

Respuesta

Cuestiones relacionadas