WPF GroupBox 淡入淡出

本次使用动画模块实现GroupBox 区域淡出淡入,还在研究如何实现翻页模式的动画

csharp 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="10,10,0,0">
        <Button Content="Show GroupBox 1" Click="ShowGroup1_Click" Margin="0,0,10,0" x:Name="buttonShowGroup1"/>
        <Button Content="Show GroupBox 2" Click="ShowGroup2_Click" x:Name="buttonShowGroup2"/>
    </StackPanel>

    <Grid Grid.Row="1">
        <GroupBox Name="groupBox1" Header="Group Box 1" Visibility="Visible">
            <TextBlock Text="This is Group Box 1" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </GroupBox>
        <GroupBox Name="groupBox2" Header="Group Box 2" Visibility="Collapsed">
            <TextBlock Text="This is Group Box 2" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </GroupBox>
    </Grid>

    <Grid.Triggers>
        <!-- Trigger for showing GroupBox 1 -->
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="groupBox1" 
                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                 From="0.0" To="1.0" Duration="0:0:0.5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="groupBox1">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupBox1" 
                                             Storyboard.TargetProperty="(UIElement.Visibility)">
                        <!--<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Visible"/>-->
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <!-- Trigger for hiding GroupBox 1 and showing GroupBox 2 -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="buttonShowGroup2">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="groupBox1" 
                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                 From="1.0" To="0.0" Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetName="groupBox2" 
                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                 From="0.0" To="1.0" Duration="0:0:0.5"/>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupBox1" 
                                             Storyboard.TargetProperty="(UIElement.Visibility)">
                        <!--<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>-->
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupBox2" 
                                             Storyboard.TargetProperty="(UIElement.Visibility)">
                        <!--<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Visible"/>-->
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <!-- Trigger for hiding GroupBox 2 and showing GroupBox 1 -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="buttonShowGroup1">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="groupBox2" 
                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                 From="1.0" To="0.0" Duration="0:0:0.5"/>
                    <DoubleAnimation Storyboard.TargetName="groupBox1" 
                                 Storyboard.TargetProperty="(UIElement.Opacity)" 
                                 From="0.0" To="1.0" Duration="0:0:0.5"/>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupBox2" 
                                             Storyboard.TargetProperty="(UIElement.Visibility)">
                        <!--<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>-->
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupBox1" 
                                             Storyboard.TargetProperty="(UIElement.Visibility)">
                        <!--<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Visible"/>-->
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>
相关推荐
笺上知微20 分钟前
基于HelixToolkit.SharpDX 渲染3D模型
wpf
晓纪同学1 天前
WPF-03 第一个WPF程序
大数据·hadoop·wpf
光电大美美-见合八方中国芯1 天前
用于无色波分复用光网络的 10.7 Gb/s 反射式电吸收调制器与半导体光放大器单片集成
网络·后端·ai·云计算·wpf·信息与通信·模块测试
晓纪同学1 天前
WPF-02体系结构
wpf
晓纪同学1 天前
WPF-01概述
wpf
海盗12342 天前
OxyPlot 在 WPF 中的使用
.net·wpf
晓纪同学2 天前
WPF-04 XAML概述
wpf
△曉風殘月〆2 天前
如何在WPF中捕获窗口外的事件
wpf
爱吃烤鸡翅的酸菜鱼3 天前
Java 事件发布-订阅机制全解析:从原生实现到主流中间件
java·中间件·wpf·事件·发布订阅
武藤一雄4 天前
WPF中ViewModel之间的5种通讯方式
开发语言·前端·microsoft·c#·wpf