本次使用动画模块实现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>