WPF 鼠标悬停在StackPanel上时,出现两个按钮,StackPanel里面有一个照片,两个按钮,两个按钮都居中,照片一直显示,两个按钮鼠标悬停时显示,并且能够点击触发View Model端命令,使用触发器 实现此效果
时间: 2024-02-06 17:11:48 浏览: 154
可以使用以下XAML代码实现该效果:
```xml
<StackPanel Width="200" Height="200" Background="LightGray">
<Image Source="yourImageSource" Stretch="Uniform" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Center" Visibility="Hidden">
<Button Content="Button1" Margin="5" Command="{Binding Button1Command}" />
<Button Content="Button2" Margin="5" Command="{Binding Button2Command}" />
</StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:0">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Duration="0"
BeginTime="0:0:0:0.5">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
```
在这段代码中,使用了一个 `StackPanel` 包裹了一个图片和两个按钮。另外,添加了一个内部的 `StackPanel` 用于包装按钮,并设置了该 `StackPanel` 的 `Visibility` 属性为 `Hidden`。
接着,使用 `EventTrigger` 监听 `MouseEnter` 和 `MouseLeave` 事件,当鼠标移入时,通过 `Storyboard` 将内部 `StackPanel` 的 `Visibility` 属性设置为 `Visible`,当鼠标移出时,将其设置为 `Hidden`。
最后,通过 `Command` 属性将按钮与 `ViewModel` 中的命令绑定即可。
阅读全文