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>
相关推荐
yy7634966689 小时前
WPF 之 简单高效的Revit多语言支持方案
java·大数据·linux·服务器·wpf
张人玉17 小时前
WPF 触发器详解:定义、种类与示例
c#·wpf·1024程序员节·布局控件
rollingman20 小时前
WPF ComboBox 样式
wpf·combobox·textbox
Aevget1 天前
DevExpress WPF中文教程:Data Grid - 如何使用虚拟源?(三)
wpf·界面控件·devexpress·ui开发·1024程序员节
张人玉1 天前
WPF 核心概念笔记(补充示例)
c#·wpf·1024程序员节·布局控件
亦陈不染2 天前
WPF-MVVM的简单入门(第一个MVVM程序)
wpf
FuckPatience2 天前
WPF TreeView 条目右键命令 ContextMenu按钮绑定命令
wpf
The 旺2 天前
【案例实战】HarmonyOS分布式购物车:多设备无缝协同的电商体验
分布式·wpf·harmonyos
FuckPatience2 天前
WPF MVVM下 ItemsControl条目命令绑定传参
wpf