我想实现一个相当复杂的CurveEditor,它必须支持通常的要求,如:
我不想操纵实际的WPF曲线,但是现有的带有键/值/切线的模型设置并从我们的实现中采样曲线的精确形状。
我已经积累了一些实现自定义UserControls和模板的经验。但我想确保,我不会错过任何明显的解决方案。我计划使用这个通用的XAML树:
我知道,这是一个非常复杂的问题,我不是要求实际实施。我对以下问题很感兴趣:
答案 0 :(得分:7)
你似乎有合适的工具,WPF Unleashed非常好,但我猜你已经有了这个。
在以下某种情况下制作单独的UserControl:
这取决于你想要多少代码。
首先使用MVVM。
CurveEditor
ListBox(Panel = Canvas)(ItemsSource = Curves)(ItemTemplate = CurveControl)
CurveControl
EditPointControl
我已声明为ListBox设置ItemTemplate。然而,您可以根据需要设置列表框的样式(我认为标准样式包含边框,您可能希望删除它或设置bordersize = 0)并设置而不是ItemTemplate ItemContainerStyle并绑定到IsSelected以便您可以控制从您的ViewModel中选择Is(从here看我的意思)。
所以viewmodel看起来像这样:
- CurveEditorViewModel
- ObservableCollection<CurveViewModel> Curves
- CurveViewModel
- string Label
- (Point LabelPlacement)
- bool IsSelected
- ObservableCollection<CurvePointViewModel> CurvePoints
- ObservableCollection<CurvePartViewModel> CurveParts
- CurvePointViewModel
- Point Position
- bool IsSelected
- Point LeftHandle
- Point RightHandle
- CurvePartViewModel
- CurvePointViewModel StartPoint
- CurvePointViewModel EndPoint
- Path CurvePath
在这里,您可以订阅CurvePointViewModel的PropertyChanged并重新计算您正在公开的路径。
当我走的时候,我可能会改进它,但那是我的第一个猜测。
您可能需要注意一些细节。例如:拇指的样式可能是中间的可见圆圈,而围绕它的不可见的较大的圆圈,背景=透明。这样你可以让你的可见圆变小,但让用户在小圆周围的区域使用tumb。
修改强>:
这是Thumb的示例:
<Thumb Width="8" Height="8" Cursor="Hand" Margin="-4">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Grid>
<Ellipse Fill="Transparent" Margin="-6"/>
<Ellipse Stroke="Red" StrokeThickness="2"/>
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
因为你想将它定位在画布上的特定点上,将边距设置为负半宽度和高度将圆心的中心放在该点上。此外,如果内部椭圆具有透明填充并且边距为-6,则您将在内部(较小)圆圈周围获得6px更大的半径,您可以在其中拖动拇指。