使用淡入淡出动画使组框出现和消失

Posted 2023-02-21

【中文标题】使用淡入淡出动画使组框出现和消失

【英文标题】：Make a groupbox appear and disappear with fade in fade out animation

【发布时间】：2012-02-23 03:06:20

【问题描述】：

在以下示例中，我不明白如何在选中/取消选中上部复选框时使“实时更新”组框出现/消失。我正在寻找 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" MinHeight="520.12" MinWidth="213">

    <Grid HorizontalAlignment="Stretch">
        <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0.966"/>
                    <GradientStop Color="#FFD7D4FF"/>
                </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch"  Grid.Row="0">

            <GroupBox Margin="8,0" BorderBrush="#FF88B1D8" HorizontalAlignment="Stretch" Height="99">
                <GroupBox.Header>
                    <WrapPanel>
                    <Label Content="General" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />    
                    </WrapPanel>
                </GroupBox.Header>

                <UniformGrid Columns="2">
                    <Label Content="RICs" />
                    <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                    <Label Content="Preference" />
                    <UniformGrid VerticalAlignment="Center" Columns="2" Rows="1">
                        <RadioButton GroupName="preference" Content="Exotic" IsChecked="False" />
                        <RadioButton GroupName="preference" Content="Flow" IsChecked="True" />
                    </UniformGrid>
                    <Label Content="Live updates" />
                    <CheckBox IsChecked="True" VerticalAlignment="Center"/>
                </UniformGrid>  
            </GroupBox>
        </StackPanel>

        <DockPanel Grid.Row="1" HorizontalAlignment="Stretch">
            <GroupBox Margin="8,0" BorderBrush="#FF88B1D8" HorizontalAlignment="Stretch">
                <GroupBox.Header>
                    <WrapPanel>
                    <Label Content="Live updates" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />   
                    </WrapPanel>
                </GroupBox.Header>
                    <ListView MinHeight="100" Background="x:Null">
                        <ListView.View>
                            <GridView AllowsColumnReorder="False">
                                <GridViewColumn Header="RIC" />
                                <GridViewColumn Header="Last tick" />
                           </GridView>
                        </ListView.View>
                    </ListView>
            </GroupBox>         
        </DockPanel>

        </Grid>
</UserControl>

更新：我现在得到了淡入，我尝试通过添加触发器标签来添加淡出：

           <DockPanel.Style>
                <Style TargetType="x:Type DockPanel">
                    <Style.Triggers>
                        <Trigger Property="Visibility" Value="Visible">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:0.5" From="0.0" To="1.0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="Visibility" Value="Hidden">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:0.5" From="1.0" To="0.0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DockPanel.Style>

【参考方案1】：

两个步骤。 先Visibility：

在资源中创建一个 BooleanToVisibilityConverter

<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>

给你的 CheckBox 起个名字

<CheckBox x:Name="LiveUpdateCheckBox" IsChecked="True" VerticalAlignment="Center" />

将每个 ElementName 的 DockPanel.Visibility 属性与 BooleanToVisibilityConverter 绑定

<DockPanel Grid.Row="1" HorizontalAlignment="Stretch"
           Visibility="Binding ElementName=LiveUpdateCheckBox, Path=IsChecked, Converter=StaticResource BooleanToVisibilityConverter">

第二个Animation：

为您的 LiveUpdates DockPanel 创建一个DockPanel.Style

<DockPanel.Style>
    <Style TargetType="x:Type DockPanel">
        <Style.Triggers>
            <Trigger Property="Visibility" Value="Visible">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:01" From="0.0" To="1.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</DockPanel.Style>

【讨论】：

非常好！也感谢您的清晰解释:) 这增加了淡入淡出效果。我现在尝试添加渐进式淡出，但我尝试的不起作用。我用修改后的 DockPanel 更新了问题。

淡出要困难得多，因为 DockPanel 不再可见以显示淡出。这是attached property solution。

我想将它保存在 XAML 中。我的经验很少，但我很难相信这在 XAML 中是不可能的。这里有一些建议可以更简单地完成一些事情：***.com/questions/914752/…