Resize the panel slowly slowly not suddenly on mouseEnter and mouseLeave event

I am trying to resize the panel slowly not suddenly on mouseEnter and on mouseLeave event.

Can someone explain how i can deal with it?

Here is my "code":

   <Border VerticalAlignment="Stretch" Grid.Row="0" 
                Background="{DynamicResource MyBorderBlueGradientBrush}" 
                BorderBrush="Black"  BorderThickness="1,1,1,0">
                            <DockPanel x:Name="pinDockPanel" Width="Auto" Height="Auto" LastChildFill="False"  Margin="0,0,0,0" Background="Transparent">
                                <ToggleButton x:Name="pinButton" VerticalAlignment="Center" Width="auto" MaxWidth="26" Height="26"
                              Background="{DynamicResource MyBorderBlueGradientBrush}" Focusable="False"
                              DockPanel.Dock="Right" Checked="pinButtonChecked" BorderThickness="0" 
                              Unchecked="pinButtonUnchecked" OverridesDefaultStyle="False" BorderBrush="{DynamicResource MyBorderBlueGradientBrush}"  FontFamily="Webdings">
                                    <Label x:Name="Pinback" Background="{DynamicResource MyBorderBlueGradientBrush}" Width="26" Height="26" BorderBrush="{DynamicResource MyBorderBlueGradientBrush}">
                                        <Label x:Name="Pin"  FontSize="18" Foreground="White" Content="?" Width="25" Height="25" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
 开发者_高级运维                                           <Label.RenderTransform>
                                                <RotateTransform Angle="16" CenterX="29" CenterY="0"></RotateTransform>
                                            </Label.RenderTransform>
                                        </Label>
                                    </Label>


                                </ToggleButton>

                                <TextBlock VerticalAlignment="Center" FontSize="11"
                           Foreground="White"  FontFamily="Tahoma" Text="Applications" Margin="4,0,0,0"
                                Background="Transparent" 
                           TextWrapping="NoWrap"/>
            </DockPanel>
                        </Border>
                        <Border Name="borderSelectedButton" VerticalAlignment="Stretch" Grid.Row="1" 
                Background="{DynamicResource MyBorderBlueGradientBrush}" 
                BorderBrush="{DynamicResource MyBlueBorderSolidBrush}" 
                BorderThickness="0.5,0.5,0.5,0.5" Margin="1,3,1,0">
                            <DockPanel x:Name="selectedButton" Width="Auto" Height="20" >
                                <TextBlock Name="selectedButtonText" VerticalAlignment="Center" Margin="0,0,0,0" 
                           FontSize="11" Foreground="{DynamicResource MyDarkBlueSolidBrush}" 
                           Text="" TextWrapping="NoWrap" FontFamily="Tahoma"/>
            </DockPanel>
                        </Border>
                        <!-- / LEFT PANEL HEADER ( APPLICATION & SELECTED BUTTON )  -->
                        <!--  RELATED CONTROL SPACE For the Diagnostic Page -->
                        <ScrollViewer Name="scrolviewerRelatedButtons" VerticalScrollBarVisibility="Auto" Grid.Row="2" VerticalAlignment="Stretch" Margin="0,0,0,0" Padding="1,0,0,0">
                            <StackPanel Name="relatedControlStackPanel"
                        Background="White" Height="auto" 
                        ClipToBounds="False" VerticalAlignment="Stretch">

                            </StackPanel>
                        </ScrollViewer>

                        <!--  RELATED CONTROL SPACE For the readerSettingButton Page -->
                        <!-- MAIN BUTTONS  -->
                        <Grid x:Name="gridMainButtons" VerticalAlignment="Stretch" Grid.Row="3" Margin="0,1,0,1" 
                    Background="{DynamicResource MyBlueBackgroundGradientBrush}">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Button Name="diagnosisButton" Grid.Row="0" Style="{DynamicResource MyBottomLeftButtonStyle}" 
                    Height="auto" Background="White" Margin="0,0,0,0" 
                    BorderBrush="{DynamicResource MyBlueSolidBrush2}" BorderThickness="0,0.2,0,0.2" 
                    HorizontalContentAlignment="Left" Padding="3,1,1,1" Click="Diagnosis_Click">
                                <StackPanel Width="Auto" Height="auto" Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Left" Margin="27,7,0,0" VerticalAlignment="Center" 
                               Foreground="{DynamicResource MyBlueSolidBrush2}" FontFamily="Tahoma"
                               TextWrapping="Wrap" FontSize="12">
                                        <Underline>D</Underline>iagnosis
                                    </TextBlock>
                        </StackPanel>
                            </Button>
                            <Button Name="firmwareButton" Grid.Row="1" Style="{DynamicResource MyBottomLeftButtonStyle}" 
                    Height="auto" Background="White" Margin="0,0,0,0" 
                    BorderBrush="{DynamicResource MyBlueSolidBrush2}" BorderThickness="0,0.2,0,0.2" 
                    HorizontalContentAlignment="Left" Padding="3,1,1,1" Width="Auto" 
                    Click="firmwareButtonClick">
                                <StackPanel Width="Auto" Height="auto" Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Left" Margin="27,7,0,0" VerticalAlignment="Center" 
                               Foreground="{DynamicResource MyBlueSolidBrush2}" FontFamily="Tahoma"
                               TextWrapping="Wrap" FontSize="12">
                                        <Underline>F</Underline>irmware
                                    </TextBlock>
                        </StackPanel>
                            </Button>
                            <Button Name="readerSettingButton" Grid.Row="2" Style="{DynamicResource MyBottomLeftButtonStyle}" 
                    Height="auto" Background="White" Margin="0,0,0,0" 
                    BorderBrush="{DynamicResource MyBlueSolidBrush2}" BorderThickness="0,0.2,0,0.2" 
                    HorizontalContentAlignment="Left" Padding="3,1,1,1" Width="Auto" 
                    Click="readerSettingButtonClick">
                                <StackPanel Width="Auto" Height="auto" Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Left" Margin="27,7,0,0" VerticalAlignment="Center" 
                               Foreground="{DynamicResource MyBlueSolidBrush2}" FontFamily="Tahoma"
                               TextWrapping="Wrap" FontSize="12">
                                        Reader <Underline>S</Underline>ettings
                                    </TextBlock>
                        </StackPanel>
                            </Button>


                        </Grid>
                        <!-- / MAIN BUTTONS  -->
                        <!-- HID LOGO  -->
                        <Border Grid.Row="4" Name="logoPanel" Background="{DynamicResource MyBlueBackgroundGradientBrush}" 
                BorderBrush="{DynamicResource MyBlueBorderSolidBrush}" Margin="0,0,0,0" 
                BorderThickness="0,0,0,0" HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" Width="auto" Height="Auto">
                            <!--<StackPanel x:Name="Logo"  Width="auto" Height="32" 
                        Background="{DynamicResource MyBlueBackgroundGradientBrush}" >-->
                            <Image Source="graphics\HID_OMNIKEY.bmp" Height="auto" Width="auto" Name="HID_logo" 
                       Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
                            <!--</StackPanel>--></prev>

c# file

    private void LeftPanelMouseEnter(object sender, MouseEventArgs e)
    {

        private double LeftPanelMaxWidth=240;
        if (resizeFlag == false && pinFlag == false)
        {

                LeftPanel.Width = LeftPanelMaxWidth;
                mySidebarControl.Visibility = Visibility.Visible;
                borderSelectedButton.Visibility = Visibility.Visible;
                scrolviewerRelatedButtons.Visibility = Visibility.Visible;
                gridMainButtons.Visibility = Visibility.Visible;
                logoPanel.Visibility = Visibility.Visible;
                resizeFlag = true;
                pinButton.ToolTip = Properties.Resources.TOOL_TIP_PINUP_BUTTON_UNCHECKED;
                scrolviewerRelatedButtons.Margin = new Thickness(24, 0, 0, 0);
                pinDockPanel.Margin = new Thickness(24, 0, 0, 0);
                selectedButton.Margin = new Thickness(24, 0, 0, 0);
                diagnosisButton.Margin = new Thickness(24, 0, 0, 0);
                firmwareButton.Margin = new Thickness(24, 0, 0, 0);
                readerSettingButton.Margin = new Thickness(24, 0, 0, 0);
                logoPanel.Margin = new Thickness(24, 0, 0, 0);
                mySidebarControl.myNavigationPaneButton.Background = (Brush)FindResource("MySelectedButtonOrangeGradientBrush");
                mySidebarControl.applicationborder.BorderBrush = (Brush)FindResource("MySelectedButtonOrangeGradientBrush");

            }
        }
    }

Basic principle:

1. Create a Style with a Trigger on IsMouseOver
2. Use Trigger.EnterActions and Trigger.ExitActions to start animations which manipulate your control's size.

Alternatively you can hook up two EventTriggers (see example in documentation) for MouseEnter and MouseLeave. Unless you state any particular problem this is all i have for you.

The following will expand and collapse the grid as you mouse in and out. The duration set on the animation will set the expand / collapse to take 1 second.

<Grid.Triggers>
  <EventTrigger RoutedEvent="Grid.MouseEnter">
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="SomeGrid" Storyboard.TargetProperty="Height" AccelerationRatio="0.5" DecelerationRatio="0.5" From="40.0" To="140.0" Duration="0:0:1" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
  <EventTrigger RoutedEvent="Grid.MouseLeave">
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="SomeGrid" Storyboard.TargetProperty="Height" AccelerationRatio="0.5" DecelerationRatio="0.5" From="140.0" To="40.0" Duration="0:0:1" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Grid.Triggers>