当鼠标悬停在父控件上时，如何显示带有 3 个按钮的 StackPanel？答案

【问题标题】：How do you show a StackPanel with 3 Buttons, when the mouse is over the parent control?当鼠标悬停在父控件上时，如何显示带有 3 个按钮的 StackPanel？
【发布时间】：2013-12-21 03:09:25
【问题描述】：

下面的 XAML 有一个 Rectangle 和一个带有 3 个按钮的 StackPanel。当鼠标指针移到 MyRect 矩形上时，它会显示 StackPanel。

但是当鼠标指针移到 StackPanel 内的一个 Button 控件上时，它会疯狂地闪烁。这是因为鼠标指针不再位于 MyRect Rectangle 上。所以它将 StackPanel Visibility 设置为 Collapsed。这会导致鼠标指针再次位于 MyRect Rectangle 上方，从而导致 StackPanel Visibility 被折叠。这会继续循环导致闪烁。

我需要做些什么来显示 StackPanel 并允许用户将鼠标指针移到 StackPanel 的按钮（和/或任何内容）上而不闪烁？

我希望在 XAML 中完成这一切。（请不要后面的代码）。

<Grid Margin="50">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Rectangle x:Name="MyRect"
               Fill="Yellow"
               Grid.RowSpan="2"/>

    <StackPanel Orientation="Horizontal">
        <StackPanel.Style>
            <Style>
                <Setter Property="StackPanel.Visibility" Value="Collapsed"></Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=MyRect, Path=IsMouseOver}" Value="true">
                        <Setter Property="StackPanel.Visibility" Value="Visible"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>

        <Button Margin="10" Width="65">One</Button>
        <Button Margin="10" Width="65">Two</Button>
        <Button Margin="10" Width="65">Three</Button>
    </StackPanel>

</Grid>

【问题讨论】：

标签： wpf xaml

【解决方案1】：

不要与矩形的IsMouseOver 绑定，而是与Grid 的IsMouseOver 绑定，当您将鼠标悬停在矩形或按钮上时，这将始终是True。

<Grid x:Name="grid">
  ....
  <Style.Triggers>
    <DataTrigger Binding="{Binding ElementName=grid, Path=IsMouseOver}"
                 Value="true">
      <Setter Property="StackPanel.Visibility" Value="Visible"></Setter>
    </DataTrigger>
  </Style.Triggers>
  ....
</Grid>

【讨论】：