我在我的项目中遵循MVVM模式,当我遇到一个场景时我遇到了困难,我不知道如何以适当的MVVM方式处理。
我的情景是我在视图中有很多折线。然后使用Itemscontrol显示和定位。一切都好。我的问题是用户应该能够点击折线,并且线中的每个点都应显示为椭圆,并且用户应该能够捕获椭圆并移动,以便更新折线。
问题:我可以使用ICommand
处理鼠标点击然后从我将绘制椭圆,从Viewmodel绘制不是MVVM方式。以及如何在动态创建的Ellipse上处理鼠标操作。
选项1:
<ItemsControl ItemsSource="{Binding Lines}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ContentControl >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding Line}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
<Polyline Stroke="Black" Points="{Binding PolyLinePoints}" >
</Polyline>
</Grid>
</ContentControl>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
在View模型中处理命令并从那里绘制椭圆。
if (LinePoints.Count != 0)
{
foreach (Point p in LinePoints)
{
Ellipse eli = new Ellipse();
eli.Width = 8;
eli.Height = 8;
eli.Stroke = Brushes.Black;
eli.Fill = Brushes.White;
eli.Name = "Circle";
eli.MouseLeftButtonDown += eli_MouseLeftButtonDown;
eli.MouseMove += eli_MouseMove;
eli.MouseLeftButtonUp += eli_MouseLeftButtonUp;
Canvas.SetLeft(eli, p.X);
Canvas.SetTop(eli, p.Y);
Canvas.SetZIndex(eli, 2000);
canvas.Children.Add(eli);
}
}
选项2:
完全从代码背后绘制和处理
有没有更好的选择来解决这种情况?