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>
相关推荐
做个文艺程序员2 天前
MQ第12篇:AI原生消息架构演进:从MQ到事件驱动的全链路设计
架构·消息队列·wpf·事件驱动架构·ai-native·cqrs
donk13143 天前
React Native for OpenHarmony 实战:三方库 react-native-circular-action-menu 的鸿蒙化适配指南
javascript·分布式·react native·react.js·wpf·harmonyos
donk13144 天前
React Native for OpenHarmony 实战:三方库 react-native-step-indicator 的鸿蒙化适配指南
分布式·react native·react.js·wpf·harmonyos
He BianGu4 天前
【笔记】WPF中RenderOptions类的详细功能
笔记·wpf
VidDown4 天前
上线三个月后的第一次事故:一个 Django 服务的日志、监控与故障复盘
数据库·python·django·wpf·音视频·视频编解码
He BianGu4 天前
【笔记】WPF中CachingHint的功能
笔记·wpf
He BianGu5 天前
【笔记】在WPF中BitmapScalingMode的作用
笔记·wpf
Vae_Mars5 天前
幂等性学习笔记
笔记·学习·wpf
samble6 天前
从零搭建灌装监控系统(十九):单元测试实战,xUnit + 内存SQLite + 反射测试私有方法
c#·wpf·mvvm·modbus·工业控制