折叠/展开分组框

Question

我有以下XAML代码，其中有三个分组框。在这些分组框的标题中有复选框。

我想实现的是：当我勾选/取消勾选一个框时，我希望相应的分组框慢慢展开/折叠，并具有平滑的动画效果。

我正在尝试在Blend 4中实现这一点，但我是一个新手。如何实现这一点？特别是，动画是否可以包含在XAML中？

更新: 这似乎接近，但我不太明白。

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

- BuZz

Answer 1

我刚刚编辑了你简单代码中的第一个分组框：

    <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的样式中：

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

当您想要将此方法应用于多个groupboxes时，这种方法会更加有用。

如果您想要处理复选框的选中和取消选中事件，您可以使用以下代码：

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

- Allan Chua

---

好的，那很酷。不过，“to=150”有点让我烦恼，因为这不一定是我的初始高度。 - BuZz

又有一个问题... :) 如果我只想在我的某个分组框上设置此事件，该怎么办？ - BuZz

未指定“To”会在运行时引发异常。 - BuZz

非常感谢您提供的所有答案 ;) - BuZz

@Allan Chua：谢谢您的回答。但是我在使用所提到的过程中遇到了一个错误。我正在组合框中使用组合框。在组合框中，当我单击组合框以打开它，然后再次单击以最小化组合框时，组合框也会被最小化。您能否帮助我解决这个问题？ - user2077049

Answer 2

您可能需要使用Expander（这就是它们的用途），并对其进行动画处理。

如果您不喜欢外观，可以重新设计模板，使其看起来像一个组框。

- H.B.