摺疊/展開Groupboxes

我有以下XAML，其中有三個組合框疊加。在這些組框的標題中是複選框。摺疊/展開Groupboxes

我想實現的是：當選中/取消選中一個框時，我希望相應的groupbox以平滑的動畫緩慢展開/摺疊。

我在Blend 4中嘗試這個，但是我是一個新手。有關如何實現這一目標的任何幫助？特別是，動畫可以在XAML中獨立存在嗎？

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>

來源

2012-01-30 Jerome

剛纔編輯的第一個組框在您簡單的代碼：

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

如果你想有這樣的一個組中，您可以將樣式元素在代碼裏

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

到在一個組框中實現它。

另一個建議創建風格堆棧面板內，並添加一個鍵它：

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

然後將其附連到組框的樣式：

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

這種方法會更當你希望在將來實現這個功能時有用到多個組合框

如果你想處理複選框和未經檢查的事件，你可以使用這個代碼

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

，並在代碼中添加此背後：

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

來源

2012-01-30 13:46:18

偉大的作品！謝謝！ – Jerome 2012-01-30 14:08:29

但是，如何從=「Auto」指定？目前默認值使它有點怪異 – Jerome 2012-01-30 14:09:00

另外，如何獲得更小的時間跨度？我試過0：0：0.5和0：0：0：1，都導致例外 – Jerome 2012-01-30 14:13:41

你或許應該使用這一個Expander（這是他們是什麼）和animate that。

如果你不喜歡他們的外觀re-template，你可以讓他們看起來像一個組框。

來源

2012-01-30 13:29:53

摺疊/展開Groupboxes

回答

相關問題