The Mouse Release Event Cannot Be Caught Properly

[f13T2ach]

Describe the bug In the given example, the mouse release event cannot get caught properly, this makes it difficult to pan the chart.

To Reproduce Since the first time i click the chart(or the whole user control), the mouse was like sticking on the chart. which means even though i had released my mouse left button, as long as my mouse hovers the chart and move, the chart will move together unexpectedly. here is my code.

<UserControl
    x:Class="IOLab.Resources.Control.ChartModule"
    xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
    xmlns:wpf="clr-namespace:System.Windows;assembly=PresentationFramework">
    <UserControl.Resources>
        <Style TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="0">
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Transparent"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>

    </UserControl.Resources>
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Border MaxHeight="680" MaxWidth="1200" x:Name="ChartBorder" BorderBrush="DimGray" BorderThickness="1" Margin="10" CornerRadius="3">
                <Grid>
                    <ToggleButton 
                        Width="{Binding Path=ActualWidth,ElementName=ChartBorder}" 
                        Height="{Binding Path=ActualHeight,ElementName=ChartBorder}" 
                        Background="Transparent" 
                        BorderThickness="0" 
                        Command="{Binding DataContext.SelectChartCommand, RelativeSource={RelativeSource AncestorType=Page}}"
                        CommandParameter="{Binding}"
                        IsChecked="{Binding IsSelected,Mode=TwoWay}">
                        <Grid Width="{Binding Path=ActualWidth,ElementName=ChartBorder}" Height="{Binding Path=ActualHeight,ElementName=ChartBorder}">

                            <lvc:CartesianChart Series="{Binding Series}" ZoomMode="PanX">

                            </lvc:CartesianChart>

                            <Border HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource Style_SectionBorderStyle}" Background="White" Width="22" Height="22" Padding="0" Margin="5">
                                <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <TextBlock Text="{Binding Id}" Foreground="{StaticResource {x:Static ui:ThemeKeys.AccentTextFillColorPrimaryBrushKey}}" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                </Grid>
                            </Border>
                            <TextBlock Margin="8" FontSize="18" Text="{Binding Name}" Foreground="{StaticResource {x:Static ui:ThemeKeys.AccentTextFillColorPrimaryBrushKey}}" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                        </Grid>
                    </ToggleButton>
                </Grid>
            </Border>

            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                    <Setter Property="BorderBrush" TargetName="ChartBorder" Value="{Binding DataContext.AccentColor, RelativeSource={RelativeSource AncestorType=Page}}"/>

                    <Setter Property="BorderThickness" TargetName="ChartBorder" Value="2"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsSelected}" Value="False">
                    <Setter Property="BorderBrush" TargetName="ChartBorder" Value="DimGray"/>
                    <Setter Property="BorderThickness" TargetName="ChartBorder" Value="1"/>
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

Expected behavior Mouse released, the chart won't be influenced by the action of the mouse

Screenshots Screenshots are useless in this question i think. If you need, I can record gif.

Desktop (please complete the following information):

• OS: Windows11
• Browser: No, It is a WPF Project
• Version: Latest version

Smartphone (please complete the following information):

Additional context I'm a WPF beginner, I cant find a resolution for this problem. If this is a bug, it is good for you and me. If not, I hope you can teach me.

[beto-rodriguez]

Hello and thanks for the report, I am sorry I am not able to completely understand.

1. what is the current behaviour?
2. what is the behavior that you expect?

[MajesticBevans]

I've also experienced this in Avalonia, but I'm not able to identify exactly what causes the bug. As @f13T2ach says, the pointer release event is sometimes not handled or detected correctly, and so the mouse becomes 'stuck' to the graph.

This causes the graph to pan with the mouse, which can be particularly annoying when the user has set custom limits.

I'm sure that expected behaviour here is simply that graphs should only ever pan when the user has a)clicked initially on the graph and b) has not released the pointer since that click.

I'll try and do some investigation into exactly what causes this bug, as I'm not sure if is is the pointer release or click (or both) that are prone to error.

[beto-rodriguez]

This issue seems complicated to replicate, I am not able to get this :(