How to show/hide a panel

When the mouse hover, 开发者_如何转开发the panel will be show on the left side and leave the mouse it will be hiden.

How to do that in WPF?

Is there any component?

Here's a slide-out console panel from one of my apps (I haven't included the style, but you get the idea). It starts with a width and height of zero, and expands when a toggle button is clicked (notice the EventTrigger that ties the slide-out animation to the Unchecked event of the Togglebutton). If you base it on the mouseover event instead, that should help you on your way.

           <!-- Console Panel -->
        <Border Style="{StaticResource SettingsWindowStyle}" x:Name="ConsoleBorder" Grid.Row="0" Grid.Column="2" Margin="0,0,0,0">
            <Border.Triggers>
                <EventTrigger SourceName="toggleConsole"  RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width" To="635" />
                            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.3" Storyboard.TargetProperty="Height">
                                <LinearDoubleKeyFrame Value="680" KeyTime="0:0:0.2" />
                                <LinearDoubleKeyFrame Value="690" KeyTime="0:0:0.24" />
                                <LinearDoubleKeyFrame x:Name="FullScreenConsole" Value="700" KeyTime="0:0:0.3" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger SourceName="toggleConsole" RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="Height">
                                <LinearDoubleKeyFrame Value="100" KeyTime="0:0:0.2" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetProperty="Width">
                                <LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.2" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <ToggleButton Style="{StaticResource ToggleButtonStyle}" x:Name="toggleConsole">
                    <TextBlock Text="Console" Foreground="Black">
                                <TextBlock.LayoutTransform>
                                    <RotateTransform Angle="90" />
                                </TextBlock.LayoutTransform>
                    </TextBlock>
                    <ToggleButton.ToolTip>
                        <ToolTip>
                            <TextBlock Padding="10" Background="White" Foreground="Black" Text="Show/Hide" />
                        </ToolTip>
                    </ToggleButton.ToolTip>
                </ToggleButton>
                <Rectangle Style="{StaticResource RectangleDividerStyle}" />
                <DockPanel Grid.Column="0" Margin="10,2,0,2" Background="#33FFFFFF">
                    <StackPanel Orientation="Vertical" DockPanel.Dock="Top" Margin="0,10,0,0">
                        <!-- main screen box -->
                        <TextBox x:Name="txtConsole" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True"  Margin="5,0,0,0" Width="500" Height="590" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBox>
                        <!-- button row -->
                        <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,10,0,0">
                            <TextBox x:Name="txtSend" Width="400" Height="30" Margin="0,0,0,0" KeyDown="txtSend_KeyDown" >
                            </TextBox>
                            <Button Name="cmdSend" Click="cmdSend_Click" Width="80" Margin="3,0,0,0" Template="{StaticResource GlassButton}">
                                <TextBlock Foreground="LightGray">Send</TextBlock>
                            </Button>
                         </StackPanel>
                            <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,5,0,0">
                                <Button HorizontalAlignment="Left" Margin="5,2,0,0" Foreground="White" Height="30" x:Name="btnRawStatus" Click="btnRawStatus_Click" Width="100"  Template="{StaticResource GlassButton}">Raw Status</Button>
                                <Button HorizontalAlignment="Left" Margin="5,2,0,0" Foreground="White" Height="30" x:Name="btnLast50" Click="btnLast50_Click"  Width="100"  Template="{StaticResource GlassButton}">Last 50 Logs</Button>
                            </StackPanel>
                        </StackPanel>
                </DockPanel>
                </Grid>
        </Border>