How to show/hide a panel.

Question

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?

Answer 1

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>