Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF "tooltip" popup flickers

Tags:

wpf

popup

flicker

Long story short: I have a window that displays a bunch of charts in a ListBox. When mouseOver a chart (with LineSeries), there is a line that follows the dataPoints (snaps to the dataPoint position). Near that line I'm presenting a tooltip made from a popup that presents info about those dataPoints.

"tooltip" as it appears

So far so good. The problem is when I try to move the mouse over the toolTip, the popup starts flickering (like its in an open/close loop). I've set already on the popup and on the children IsHitTestVisible="False".

As a temp solution the popup "goes" out of the cursors way like here:

"tooltip" repositioned

...but is hardly "understandable".

Now comes the question: what's wrong? Why the popup starts flickering when the mouse is over it.

Any feedback welcome

PS. The tooltips XAML (it's created in code, but here it is):

The chart's datacontext is data bound to a class, also some chart's events are imlemented throught icommands. The popup is created in the constructor of that class,

ppchart = New Popup() With {.AllowsTransparency = True, .IsHitTestVisible = False,.StaysOpen = True}

...in the MouseMoveCommand the popup's child is created:

Dim ppCont As XElement = <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" IsHitTestVisible="False" VerticalAlignment="Top">
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="Auto"/>
                                         <RowDefinition Height="Auto"/>
                                     </Grid.RowDefinitions>
                                     <Rectangle Opacity="0.5" Grid.RowSpan="2" IsHitTestVisible="False" StrokeThickness="0" RadiusX="2" RadiusY="2" Fill="#FFBABABA"/>
                                     <TextBlock Text="{Binding Over, StringFormat=HH:mm}" FontSize="9" TextAlignment="Center" FontFamily="Segoe UI" IsHitTestVisible="False" Margin="1"/>
                                     <ListBox x:Name="listBox" ItemsSource="{Binding Points}" Background="{x:Null}" BorderBrush="{x:Null}" FontSize="8" Margin="1,0,1,1" Grid.Row="1" IsHitTestVisible="False" IsTextSearchEnabled="False" HorizontalAlignment="Stretch">
                                         <ListBox.ItemContainerStyle>
                                             <Style TargetType="{x:Type ListBoxItem}">
                                                 <Setter Property="Background" Value="Transparent"/>
                                                 <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                                                 <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                                                 <Setter Property="Padding" Value="0"/>
                                                 <Setter Property="IsHitTestVisible" Value="False"/>
                                             </Style>
                                         </ListBox.ItemContainerStyle>
                                         <ListBox.ItemTemplate>
                                             <DataTemplate>
                                                 <Grid IsHitTestVisible="False">
                                                     <Grid.ColumnDefinitions>
                                                         <ColumnDefinition Width="Auto"/>
                                                         <ColumnDefinition Width="Auto"/>
                                                         <ColumnDefinition Width="Auto"/>
                                                     </Grid.ColumnDefinitions>
                                                     <Rectangle Fill="{Binding Culoare}" Width="3" HorizontalAlignment="Left" Margin="1" IsHitTestVisible="False"/>
                                                     <TextBlock Text="{Binding Operation}" HorizontalAlignment="Stretch" IsHitTestVisible="False" Grid.ColumnSpan="1" Grid.Column="1"/>
                                                     <TextBlock Text="{Binding points.Value}" HorizontalAlignment="Stretch" Grid.Column="2" TextAlignment="Right" IsHitTestVisible="False"/>
                                                 </Grid>
                                             </DataTemplate>
                                         </ListBox.ItemTemplate>
                                     </ListBox>
                                 </Grid>

        ppchart.Effect = New Effects.DropShadowEffect() With {.Opacity = 0.5, .BlurRadius = 5, .Direction = 80, .Color = Colors.Black}
        ppchart.Child = CType(XamlReader.Load(New XmlTextReader(New StringReader(ppCont.ToString))), UIElement)

reedited: this is how it looks like

enter image description here

like image 729
Radu C Avatar asked Nov 05 '22 02:11

Radu C


1 Answers

I also faced a similar problem while using the MouseEnter and MouseLeave events. There is a strange behaviour of the MouseEnter event on WPF, don't know if it's a bug. When you enter the item in consideration from the top the flickering happens. Entering the item from any other direction gives you a smooth popup. So to avoid it, I removed the:

AllowsTransparency = True

part.

EDITED:

While still unable to find a perfect behaviour to my need, I figured out that this isn't actually a bug as described by Scott Hanselman here

However I wasn't able to compare the problem to mine and sort it out. Anyway, to have the animation features, I came up with a solution that would atleast reduce the extra opening or closure of the Popup control by checking the current position of the mouse. I defined a variable

Point currPoint = new Point();

And then in the MouseEnter event or handler:

   ListViewItem listViewItem = e.Source as ListViewItem;           
        if(currPoint!=e.GetPosition(listViewItem))
            compToStrategyVM.OpenPopup(listViewItem, listViewPopup);

Similarly in the MouseLeave event or handler:

ListViewItem listViewItem = e.Source as ListViewItem;
        if (currPoint != e.GetPosition(listViewItem))
            compToStrategyVM.ClosePopup(listViewPopup);

Here compToStrategyVM refers to my ViewMode and listViewPopup refers to the name of the Popup control. Though the issue still persists, but by this approach the flickering effect has been reduced to a considerable fraction.

like image 83
sm2mafaz Avatar answered Nov 27 '22 11:11

sm2mafaz