Question

我有以下XAML，其中堆叠了三个组框。在这些组框的标题中是复选框。

我想要实现的目标：当我选中/取消选中一个方框时，我希望相应的组合框能够以平滑的动画慢慢展开/折叠。

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

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>

在单个组框上实现它。

另一个建议是在堆栈面板中创建一个Style并为其添加一个键：

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

如果您希望将来在多个组框中实现此方法，这种方法会更有用

如果您想要处理复选框和未选中的事件，您可以使用此代码

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

Answer 2

您可能应该使用Expander（这就是它们的用途）和animate that。

如果你不喜欢它们的外观re-template，你可以让它们看起来像一个分组框。

折叠/展开组框

2 个答案: