Question

当鼠标悬停时，面板将显示在左侧并离开鼠标将被隐藏。

如何在WPF中执行此操作？

有没有组件？

Answer 1

这是我的一个应用程序的滑出控制台面板（我没有包含样式，但你明白了）。它以宽度和高度为零开始，并在单击切换按钮时展开（请注意将滑出动画与Togglebutton的未检查事件联系起来的EventTrigger）。如果你以鼠标悬停事件为基础，这应该会帮助你。

           <!-- 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>

如何显示/隐藏面板

1 个答案: