Make a groupbox appear and disappear with fade in fade out animation - wpf

Question

in the following example, I don't understand how I could make my "Live Updates" groupbox appear/disappear when the upper checkbox is checked/unchecked. I am looking for a fast fade in/fade out effect in XAML but I am a little lost..
<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>
UPDATE : I get the fade in now, and I tried to add the fade out by adding a Trigger tag :
<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>

Answer 1

Two steps.
First Visibility:
Create a BooleanToVisibilityConverter in Resources
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
Give your CheckBox a name
<CheckBox x:Name="LiveUpdateCheckBox" IsChecked="True" VerticalAlignment="Center" />
Bind the DockPanel.Visibility property per ElementName with BooleanToVisibilityConverter
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch"
Visibility="{Binding ElementName=LiveUpdateCheckBox, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
Second Animation:
Create a DockPanel.Style for your LiveUpdates DockPanel
<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>