How to work with mouseover events in Siverlight when I have 2 mouseoverable objects in the same space?
I have a map (which is made of paths), and above this map, in another canvas, I have some elipses that I intend to use as buttons. I created their mouseover events, but when I tested just the harbor mouseover were triggered (before creating this harbors, the state mouseover worked well). How should I make them both work, in a way that when I mouseover a button that is inside a map, just this mouseover event is triggered?
This is the XAML:
<Grid x:Name="LayoutRoot" Background="White" Opacity="1">
<Canvas x:Name="Pics">
<Image Height="600" Width="800" Canvas.Top="0" Source="Layout_Brasil.png" Stretch="Fill"/>
</Canvas>
<Canvas x:Name="StateButtons">
<Path x:Name="PR" DataContext="PR" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Height="62.983" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF3060FF" Stroke="Black" Width="96.458" Opacity="0" Canvas.Left="288.399" Canvas.Top="422.459"/>
<Path x:Name="SC" DataContext="SC" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="80.278" Height="52.48" Canvas.Left="298.823" Canvas.Top="471.681" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " Fill="#FF3060FF" Opacity="0" UseLayoutRounding="False"/>
<Path x:Name="RS" DataContext="RS" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="119.469" Height="101.401" Canvas.Left="241.82" Canvas.Top="486.942" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="SP" DataContext="SP" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="133.368" Height="83.526" Canvas.Left="308.33" Canvas.Top="382.902" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="MS" DataContext="MS" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="107.488" Height="102.55" Canvas.Left="235.98" Canvas.Top="346.341" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0.01"/>
<Path x:Name="RJ" DataContext="RJ" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="60.163" Height="40.418" Canvas.Left="427.091" Canvas.Top="397.632" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="ES" DataContext="ES" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="34.801" Height="52.446" Canvas.Left="470.421" Canvas.Top="356.008" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="MG" DataContext="MG" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="164.552" Height="128.429" Canvas.Left="338.339" Canvas.Top="304.022" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="GO" DataContext="GO" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="107.852" Height="103.661" Canvas.Left="307.997" Canvas.Top="278.051" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " 开发者_如何学GoUseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="DF" DataContext="DF" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="18.291" Height="11.789" Canvas.Left="378.156" Canvas.Top="321.553" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " Fill="#FF286DFF" Opacity="0" UseLayoutRounding="False"/>
<Path x:Name="MT" DataContext="MT" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="167.277" Height="156.707" Canvas.Left="186.723" Canvas.Top="205.169" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="RO" DataContext="RO" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="104.209" Height="85.239" Canvas.Left="113.481" Canvas.Top="214.815" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="AC" DataContext="AC" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="108.027" Height="60.424" Canvas.Left="11.006" Canvas.Top="202.149" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="AM" DataContext="AM" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="254.824" Height="174.388" Canvas.Left="14.62" Canvas.Top="68.635" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="PA" DataContext="PA" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="187.286" Height="180.958" Canvas.Left="225.888" Canvas.Top="63.565" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="RR" DataContext="RR" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="88.245" Height="101.625" Canvas.Left="141.248" Canvas.Top="24.08" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="AP" DataContext="AP" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="74.189" Height="83.259" Canvas.Left="284.959" Canvas.Top="37.59" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="BA" DataContext="BA" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="136.864" Height="144.652" Canvas.Left="401.947" Canvas.Top="221.765" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="TO" DataContext="TO" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="75.971" Height="120.857" Canvas.Left="343.001" Canvas.Top="174.198" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="MA" DataContext="MA" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="101.017" Height="133.686" Canvas.Left="372.788" Canvas.Top="115.916" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="PI" DataContext="PI" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="83.894" Height="120.456" Canvas.Left="411.509" Canvas.Top="138.767" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="CE" DataContext="CE" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="62.211" Height="75.45" Canvas.Left="477.305" Canvas.Top="140.065" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="RN" DataContext="RN" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="54.818" Height="33.389" Canvas.Left="517.772" Canvas.Top="169.607" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z "UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="PB" DataContext="PB" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="59.445" Height="35.755" Canvas.Left="515.145" Canvas.Top="186.43" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z "UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="PE" DataContext="PE" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="97.953" Height="35.631" Canvas.Left="477.138" Canvas.Top="203.485" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="AL" DataContext="AL" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="46.743" Height="25.551" Canvas.Left="522.847" Canvas.Top="226.947" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Path x:Name="SE" DataContext="SE" MouseEnter="MouseOverState" MouseLeave="MouseLeaveState" Width="30.537" Height="33.361" Canvas.Left="522.277" Canvas.Top="236.29" Stretch="Fill" StrokeThickness="3.83891" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FF000000" Data="M ALOTOFSTUFF Z " UseLayoutRounding="False" Fill="#FF286DFF" Opacity="0"/>
<Image Height="600" Width="800" Opacity="0" Source="Layout_Brasil_Portos.png" Stretch="Fill" d:IsHidden="True"/>
</Canvas>
<Canvas x:Name="HarborButtons">
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="204" Canvas.Top="139"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="280" Canvas.Top="129"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="331" Canvas.Top="95"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="428" Canvas.Top="131"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="559" Canvas.Top="177"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="565" Canvas.Top="194"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="552" Canvas.Top="233"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="505" Canvas.Top="306"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="331" Canvas.Top="524"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="413" Canvas.Top="435"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="398" Canvas.Top="439"/>
<Ellipse Fill="#FF286DFF" MouseEnter="MouseOverHarbor" MouseLeave="MouseLeaveHarbor" Stroke="Black" Height="14" Width="14" Canvas.Left="462" Canvas.Top="423"/>
</Canvas>
</Grid>
And this is the .cs code behind:
namespace WebPortos
{
public partial class Brasil : UserControl
{
public Brasil()
{
InitializeComponent();
}
private void MouseOverState(object sender, RoutedEventArgs e)
{
Path thisPath = (Path)sender;
thisPath.Opacity = 0.25;
}
private void MouseLeaveState(object sender, RoutedEventArgs e)
{
Path thisPath = (Path)sender;
thisPath.Opacity = 0;
}
private void MouseOverHarbor(object sender, RoutedEventArgs e)
{
Ellipse thisPath = (Ellipse)sender;
thisPath.Opacity = 0.25;
}
private void MouseLeaveHarbor(object sender, RoutedEventArgs e)
{
Ellipse thisPath = (Ellipse)sender;
thisPath.Opacity = 1;
}
}
}
Firstly, change your mouse event handlers to have a MouseEventArgs e instead of RoutedEventArgs e.
Then you can use this code to get a list of all elements under the mouse:
List<UIElement> list = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(null),
LayoutRoot as UIElement) as List<UIElement>;
You can then add your own logic to see what is under the mouse and ensure all elements are highlighted correctly. e.g. this part will ensure that all states under harbours are highlighted:
private void MouseOverHarbor(object sender, MouseEventArgs e)
{
List<UIElement> list = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(null),
LayoutRoot as UIElement) as List<UIElement>;
foreach (var item in list)
{
if (item is Path)
{
item.Opacity = 0.25; // Set state opacity
}
else if (item is Ellipse)
{
item.Opacity = 0.25; // Set harbour opacity
}
}
}
Hope this helps you.
The problem was already solved and I had no idea. It all worked all right when I came to work today ... maybe I just had to rebuild my project ... but the way I showed above works fine for that intention.
精彩评论