Свернуть / развернуть групповые блоки - PullRequest
Новая
       0

Свернуть / развернуть групповые блоки

6 голосов
/ 30 января 2012

У меня есть следующий 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>

Ответы [ 2 ]

7 голосов
/ 30 января 2012

Только что отредактировал первый групповой блок в вашем простом коде: 

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

, а затем прикрепить его к стилюthe 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;
        }
    }
4 голосов
/ 30 января 2012

Вы, вероятно, должны использовать Expander для этого (для этого они и нужны) и оживить это .

Если вам не нравится внешний вид re-template их, вы можете сделать их похожими на групповые блоки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...