[WPF] IsMouseOver detectie in een ItemsSource met Canvas

[NickThissen]

Hoi,

Ik probeer een 'timeline' balk te maken in WPF wat een aantal 'Events' kan weergeven op die timeline door middel van een simpele marker:

De blauwe balkjes zijn drie Events, het witte balkje is waar m'n muis cursor zit.

Deze balkjes / markers zijn Borders met vaste groottes (w = 2, h = 30), welke ik door middel van een ItemsControl op de timeline plaats. Het ItemsControl heeft een Canvas als ItemsPanel, en dmv binding kan ik de Left property van elke Border (elke marker) op de goeie plek zetten.


Ik wil nu dat er een popup getoont wordt met meer informatie over een event als ik met de muis in de buurt kom van dat event. Ik probeer dit te doen door om de markers (Border) een Grid te plaatsen die transparent is. De Grid kan dan de muis detecteren door een Trigger te maken die triggert op grid.IsMouseOver. Op dat moment laat ik een Popup zien:




XAML:

code:

        <!-- Items control bound to list of Events -->
        <ItemsControl ItemsSource="{Binding Events, UpdateSourceTrigger=PropertyChanged}"
                      Background="Transparent" BorderThickness="0">
            
            <!-- Use Canvas as the itemspanel so we can set the position of each item -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Background="Transparent">
                    </Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            
            <!-- Set the position of the items based on the AbsolutePosition property -->
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding Path=AbsolutePosition}" />
                    <Setter Property="Canvas.Top" Value="15"></Setter>
                </Style>
            </ItemsControl.ItemContainerStyle>
            
            <!-- Item template -->
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="events:ReplayEventContainer">
                    
                    <!-- Grid to detect mousemove near the event marker -->
                    <!-- Will be transparent, but Red now for debug purposes -->
                    <Grid x:Name="grid" 
                          Width="20" 
                          Height="30" 
                          VerticalAlignment="Center" 
                          Background="Red">
                        
                        <!-- Small rectangular marker for the event -->
                        <Border x:Name="marker" 
                                Width="2" 
                                Height="30" 
                                HorizontalAlignment="Center"
                                Background="{DynamicResource MarkerBlue">

                        </Border>
                        
                        <!-- Popup to show when mouse over 'grid' -->
                        <Popup x:Name="popup" 
                               IsOpen="False" 
                               StaysOpen="True">
                            <TextBlock Text="{Binding Event.Text}" 
                                       Margin="3"></TextBlock>
                        </Popup>
                        
                    </Grid>
                    <DataTemplate.Triggers>
                        <!-- Show the popup when mouse over 'grid' -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="popup" Property="IsOpen" Value="True"></Setter>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
                
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Dus het idee is als volgt:
- Elk item in de ItemsControl is een doorzichtige Grid (in dit voorbeeld rood zodat ik kon zien of de grid op de goeie plek stond, en dat klopt...) van 20 units breed.
- Daarin zit een Border van 2 units breed wat de marker voorstelt.
- Een IsMouseOver trigger op de grid moet er voor zorgen dat de Popup open gaat.

Dit werkt echter niet zoals gepland. Ik zit met twee problemen:

1. De Popup gaat niet vanzelf dicht en lijkt de mouse events te stelen zodra hij open gaat. Dat wil zeggen: hij blijft open tot ik ergens klik. Ik zou graag hebben dat hij vanzelf weer dicht gaat als ik weer van de doorzichtige grid weg ga.

Op het moment heb ik StaysOpen op True dus dat is wel logisch dat hij open blijft. Echter als ik die op False zet dan knippert hij alleen eventjes snel open en gaat meteen weer dicht, dus dat werkt ook niet. Wat doe ik hier fout?


2. Dit is heel vreemd: de IsMouseOver lijkt alleen te triggeren als ik de muis vanuit de rechterkant binnen de Grid beweeg. Als ik met de muis van links naar rechts over de grid sleep gebeurt er niks. Ga ik van rechts naar links dan gaat hij meteen open. Ik snap hier niks van. Heeft dit te maken met het feit dat ik in een ItemsControl zit wat gekke dingen uithaalt?


Iemand enig idee hoe ik dit kan oplossen?

[CM5]

Is het niet mogelijk om van een ToolTip gebruik te maken?
http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.tooltip

Voorbeeld:

code:

<Button Content="Submit">
    <Button.ToolTip>
        <ToolTip>
            <StackPanel>
                <TextBlock FontWeight="Bold">Submit Request</TextBlock>
                <TextBlock>Submits the request to the server.</TextBlock>
            </StackPanel>
        </ToolTip>
    </Button.ToolTip>
</Button>

[NickThissen]

Twee problemen:

1. Een ToolTip gaat meteen weg als ik de muis van de Grid af haal. Ik wil juist dat ik met de muis over de popup kan gaan en daarmee interactie kan aangaan (aanklikken bijv), maar als de tooltip onder de grid komt dan kan ik er niet op klikken want hij gaat weg zodra ik de muis er naartoe beweeg. Daarnaast meen ik me te herinneren dat je sowieso niet op een tooltip kan klikken?

2. Het werkt uberhaupt niet, ik krijg geen tooltip te zien. Als ik het op een losse button zet ergens in m'n window dan werkt het wel, maar op een Grid in een ItemTemplate van een ItemsControl wil hij gewoon niet tevoorschijn komen. Misschien dat dit hetzelfde probleem is als wat ik met de popup zie (immers is een tooltip volgens mij ook gewoon een speciaal soort popup?).


Edit
Er lijkt iets binnen m'n project mis te gaan, misschien iets met styles (ik gebruik een aantal style libaries). Als ik een nieuw WPF project start dan werkt het een stuk beter (nog niet 100% optimaal maar zo kom ik er wel).

[ Voor 13% gewijzigd door NickThissen op 18-08-2014 11:43 ]