UWP PointerEnter и PointerLeave не привязаны к внешнему элементу в дереве

Question

Я создал пользовательский элемент управления, в котором я хочу изменить состояние в соответствии с событиями PointerEnter и PointerLeave.Проблема в том, что эти события запускаются на границе, которая является дочерним элементом сетки.Я ожидаю, что Grid вызовет эти события.

мой пользовательский элемент управления

public sealed class MyCustomControl : Control
{
    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
        "Text", typeof(string), typeof(MyCustomControl), new PropertyMetadata(default(string)));

    public MyCustomControl()
    {
        DefaultStyleKey = typeof(MyCustomControl);
    }

    public string Text
    {
        get => (string) GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    protected override void OnPointerEntered(PointerRoutedEventArgs e)
    {
        Trace.WriteLine("Enter");
        base.OnPointerEntered(e);
    }

    protected override void OnPointerExited(PointerRoutedEventArgs e)
    {
        base.OnPointerExited(e);
        Trace.WriteLine("Exit");
    }
}

и его шаблон

<Style TargetType="local:MyCustomControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyCustomControl">
                    <Grid Padding="50">
                        <Border
                            x:Name="bdr"
                            Margin="50"
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <TextBox
                                x:Name="_txt"
                                Height="50"
                                Margin="25"
                                FontSize="18"
                                FontWeight="Bold"
                                Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
                        </Border>                    
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

, и я вызываю его с помощью

<myCustomControl:MyCustomControl
    BorderBrush="Green"
    BorderThickness="3"
    Text="Test" />

Как я уже говорил, по какой-то причине PointerEnter и PointerLeave связаны с элементом Border.

Странный патч состоит в том, что если я добавляю свойство Background в Grid, то эти события привязываются к Grid, но это неправильно.

Чего мне не хватает?

Answer 1

Проблема в том, что эти события запускаются на границе, которая является дочерней по отношению к сетке. Я ожидаю, что Сетка вызовет эти события.

Проблема в том, что вы не устанавливаете свойство Grid Background. Пожалуйста, попробуйте следующий стиль.

<Style TargetType="local:MyCustomControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyCustomControl">
                <Grid
                    x:Name="RootGrid"
                    Padding="50"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    >
                    <Border
                        x:Name="bdr"
                        Margin="50"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        >
                        <TextBox
                            x:Name="_txt"
                            Height="50"
                            Margin="25"
                            FontSize="18"
                            FontWeight="Bold"
                            Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                            />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>