動態添加的自定義控件上的Tap事件由相同類型的另一個控件處理

Question

我的名為Waypoint的自定義控件存在問題，該事件的事件由相同類型的另一個自定義控件處理。

總覽

我正在將這些Waypoint定制控件放置到另一個以地圖為背景的定制控件MapUserControl上。

這是我目前所擁有的照片

這是Waypoint自定義控件的XAML：

<UserControl x:Name="MyWaypointControl" x:Class="MADAssignment1.Waypoint"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="35" d:DesignWidth="35" Opacity="0.5"
         Tap="Waypoint_Tap">

<UserControl.Resources>
    <Storyboard x:Name="FadeInStoryBoard">
        <DoubleAnimation
                    Storyboard.TargetName="MyWaypointControl"
                    Storyboard.TargetProperty="Opacity"
                    From="0.0" To="0.5" Duration="0:0:0.3"
                    AutoReverse="False"/>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Ellipse x:Name="BackgroundCircle" Fill="Blue" HorizontalAlignment="Left" Height="35" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="35"/>
    <TextBlock x:Name="NumberLabel" HorizontalAlignment="Left" TextAlignment="Center" Margin="4,6,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="22" RenderTransformOrigin="0.211,0.467" FontSize="15" Width="26"/>
</Grid>

這是MapUserControl自定義控件的XAML：

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MADAssignment1" x:Name="MapUserControl" x:Class="MADAssignment1.Map"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="531" d:DesignWidth="493" SizeChanged="MapUserControl_SizeChanged">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image x:Name="MapImage" Height="532" VerticalAlignment="Top" Source="/Assets/background image.jpg" Stretch="Fill" Loaded="MapImage_Loaded"/>
    <TextBlock x:Name="MinLongitudeLabel" HorizontalAlignment="Left" Margin="33,0,0,511" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="15"/>
    <TextBlock x:Name="MiddleLongitudeLabel" HorizontalAlignment="Left" Margin="200,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="15"/>
    <TextBlock x:Name="MaxLongitudeLabel" HorizontalAlignment="Left" Margin="382,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="15"/>
    <TextBlock x:Name="MinLatitudeLabel" HorizontalAlignment="Left" Margin="4,21,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="15"/>
    <TextBlock x:Name="MiddleLatitudeLabel" HorizontalAlignment="Left" Margin="4,250,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="15"/>
    <TextBlock x:Name="MaxLatitudeLabel" HorizontalAlignment="Left" Margin="4,512,0,-1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="15"/>
</Grid>

如您所見，它們都很簡單。

問題

當我點擊Waypoint時，它們並不總是按預期運行，我會說是50/50。

這是Waypoint_Tap的事件處理程序：

    private void Waypoint_Tap(object sender, GestureEventArgs e)
    {
        BackgroundCircle.Fill = new SolidColorBrush(Colors.Red);
    }

再次，簡單。

問題在於事件處理程序中的發件人對象並非總是我點擊的Waypoint，而是它將始終是地圖上的另一個Waypoint。

下面是重現此問題的步驟。

1. 我點擊Waypoint＃7，事件處理程序的發送者是Waypoint＃7用戶控件，因此它變成紅色。
2. 我點擊Waypoint＃2，事件處理程序的發送者再次是Waypoint＃7，因此它變成紅色。
3. 每當我點擊Waypoint＃2時，Waypoint＃7都會變成紅色。

現在看到我在動態添加Waypoint時，我認為這可能是導致問題的原因，所以這是我如何將Waypoint添加到MapUserControl用戶控件中：

        var newWaypoint = new Waypoint(waypointNumber, latitude, longitude);
        newWaypoint.Name = "wayPoint" + waypointNumber;
        newWaypoint.Opacity = 100;
        double leftMargin = CalculateLeftMargin(longitude);
        double topMargin = CalculateTopMargin(latitude);

        newWaypoint.Margin = new Thickness(leftMargin, topMargin, 0, 0);
        LayoutRoot.Children.Add(newWaypoint);

我也曾以為GestureEventArgs正在冒泡/隧道連接到另一個控件，但是我無法確定，因為我找不到它使用的類型的RoutingStrategy。

正如MSDN所說，我真的希望有一個直接的RoutingStrategy

直接：只有源元素本身才有機會調用處理程序作為響應。 這類似於Windows窗體用於事件的“路由”。

而且我相信我已經設置Waypoint來使用Windows Forms之類的事件，但是我只能希望。

Answer 1

我發現了問題，並且由於缺乏WPF經驗而將其解決。

當我創建Waypoint時，我喜歡創建它們

var newWaypoint = new Waypoint(waypointNumber, latitude, longitude);
newWaypoint.Name = "wayPoint" + waypointNumber;
newWaypoint.Opacity = 100;
double leftMargin = CalculateLeftMargin(longitude);
double topMargin = CalculateTopMargin(latitude);

newWaypoint.Margin = new Thickness(leftMargin, topMargin, 0, 0);
LayoutRoot.Children.Add(newWaypoint);

問題是我正在設置控件的邊距。 當我設置邊距時，實際上是在延伸我的航點，因此我在航點上放置了航點。

經過一些研究，我遇到了這篇文章，以編程方式在WPF中更改元素的位置 ，向我展示了如何在WPF中正確放置UI元素，而不是設置控件的邊距。