CODEWITHSUNDEEP
wpfxaml
m_collard
m_collard

Reputation: 2028

How do you show a StackPanel with 3 Buttons, when the mouse is over the parent control?

The XAML below has a Rectangle and a StackPanel with 3 Buttons. It shows the StackPanel when the mouse pointer is moved over the MyRect Rectangle.

BUT it flickers like crazy when the mouse pointer is moved over one of the Button controls inside the StackPanel. This is because the mouse pointer is no longer over the MyRect Rectangle. So it sets the StackPanel Visibility to Collapsed. And that causes the mouse pointer to be over the MyRect Rectangle again, which causes the StackPanel Visibility to be Collapsed. This continues round and round causing the Flicker.

What do I need to do to display the StackPanel and allow the user to move their mouse pointer over the buttons (and/or any contents) of the StackPanel without it flickering?

And I'm looking to do it all in XAML. (No code behind please).

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

Upvotes: 0

Views: 1139

Answers (1)

Rohit Vats
Rohit Vats

Reputation: 81323

Instead of binding with IsMouseOver of rectangle, bind with IsMouseOver of Grid which will be True always when you are hovering over Rectangle or Button.

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

Upvotes: 2

Related Questions