UWP Interaction.Behavior with Ellipse

Question

In my Template Control, I have a button and a Ellipse. I added click event with Interaction.Behavior. Button work fine. but Ellipse never fire the event. Why ?

<Style TargetType="local:SensorMeter">
    <Setter Property="UseSystemFocusVisuals" Value="True"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:SensorMeter">
                <Viewbox>


    <Ellipse x:Name="PART_MeterCenter" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Ellipse.RenderTransform>
            <CompositeTransform/>
        </Ellipse.RenderTransform>

        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="Click">
                <core:InvokeCommandAction  Command="{Binding  RelativeSource={RelativeSource TemplatedParent}, Path=CenterCommand}"
                                       CommandParameter="{Binding  RelativeSource={RelativeSource TemplatedParent}, Path=CenterCommandParameter}"/>
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>

    </Ellipse>
    <Button Content="ClickBtn">

        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="Click">
                <core:InvokeCommandAction  Command="{Binding  RelativeSource={RelativeSource TemplatedParent}, Path=CenterCommand}"
                                       CommandParameter="{Binding  RelativeSource={RelativeSource TemplatedParent}, Path=CenterCommandParameter}"/>
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>

    </Button>.........

I draw circle with this code in TemplateControl C# code.

        var _meterCenter = _sensorMeter.GetTemplateChild("PART_MeterCenter") as Ellipse;
        if (_meterCenter != null)
        {
            _meterCenter.Stroke = _sensorMeter.MeterBorder_Brush;
            _meterCenter.StrokeThickness = _sensorMeter.MeterBorderWidth;
            _meterCenter.Fill = _sensorMeter.CenterThresHoldColor;
            _meterCenter.Opacity = Opacity;
            _meterCenter.Height = _sensorMeter.meterCenterSize * 2;
            _meterCenter.Width = _sensorMeter.meterCenterSize * 2;
            _meterCenter.Margin = new Thickness(0, _sensorMeter.MeterYOffset*2, 0, 0);
        }

Actually, in my code, There is lot of grid , path, Ellipse. Should I go most upper layer to accept click event ? but the button can fire event in same z-index.

in my code, There is no Canvas. THere is only Grid, Path, Ellipse only.

Answer 1

I added click event with Interaction.Behavior. Button work fine. but Ellipse never fire the event. Why ?

The Ellipse has no Click event like Button. So the Command will not be executed. For your requirement, you could observe PointerPressed event of Ellipse like following code.

<Interactivity:Interaction.Behaviors>
    <core:EventTriggerBehavior EventName="PointerPressed">
        <core:InvokeCommandAction  Command="{Binding  RelativeSource={RelativeSource TemplatedParent}, Path=CenterCommand}" />
    </core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>

When the point gets pressed in the Ellipse, the commend in the code behind will be executed as expected.