在WPF应用程序中封装动态鼠标UI元素

Question

我正在使用MVVM模式开发C＃WPF应用程序

在我的应用程序用户中，通过鼠标（或触摸屏）设置了Pan-Tilt Motor的偏移值。由于运动应该非常精确，因此我决定创建一个UI帮助器元素，该元素当前如下所示：

我希望它看起来不错且花哨，以免值被其他行遮挡或相交：

但是，与此同时，我想坚持使用MVVM模式，尽管这种行为本身并不难实现，但需要大量的绑定，逻辑和触发器。这使我的XAML和视图模型非常混乱，因此出现了我的问题：

将此类元素（基本上是一个复杂的动态图形）封装成某种抽象形式，并将所有与主应用程序逻辑无关的内容隐藏起来的常见方法/最佳实践是什么？

所需的解决方案看起来像这样：

<canvas>
   <i:Interaction.Triggers>
      <!--MouseUp, MouseDown, MouseMove Commands...-->
   </i:Interaction.Triggers>

   <i:Interaction.Behaviors>
      <!--Getting Mouse X and Y values...-->
   </i:Interaction.Behaviors>

   <MouseUI MouseUiClass="{Binding MouseUiClass}"/>
     or
   <MouseUI Start="{Binding MouseUiClass.Start}"
            End="{Binding MouseUiClass.End}"
            IsFinished="{Binding MouseUiClass.IsFinished}"/>
</canvas>

我确实考虑过使用UserControl，但由于要动态调整大小，并且可以在画布的任何部分放置起点和终点，因此我难以理解如何正确显示它。