我正在尝试使用节点,引脚和电线构建图表。 让我假装我现在只关心电线和引脚。
电线
<Path Stroke="Red" StrokeThickness="2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="### HERE I NEED TO BIND TO PIN POSITION ###">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="100 100"
Point2="100 50"
Point3="300 200"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
查看 PathFigure 的 StartPoint ,其 Point 值告诉我们电线从哪里开始。
现在针脚更简单,它基本上是 Thumb (允许在画布上轻松拖放)
<UserControl x:Class="WireMvvm.Pin"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WireMvvm"
mc:Ignorable="d"
d:DesignHeight="10" d:DesignWidth="10">
<Thumb Background="Red">
</Thumb>
我不知道怎么做是在这种情况下应用MVVM模式,当Pin移动时,来自Wire的StartPoint应该与Pin相同的位置,我肯定知道如何通过事件正常地执行此操作很多代码背后都没有,但我想要探索更多的方法。
我还需要能够序列化图表并在运行时添加引脚/连线(但这不是我的问题,只是额外的信息,因为我不确定MVVM如何与运行时动态的东西一起工作)
我是否应该分别为线和引脚设置模型,那么两者的视图模型也是如此?我很失落,并尝试观看很多视频,但我仍然很难用我的想法来应用它。
答案 0 :(得分:0)
我建议使用带有画布的项目控件。这样,您就可以绑定您提及的属性并使用项目的数据模板。
<ScrollViewer x:Name="CanvasScroller" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
<ItemsControl Name="ItemsContainer"
ItemsSource="{Binding ElementName=self, Path=CanvasBoardViewModel.BoardItems}"
AllowDrop="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas x:Name="_canvas" IsItemsHost="True" Background="White" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding CurrentLocation.X}"/>
<Setter Property="Canvas.Top" Value="{Binding CurrentLocation.Y}"/>
<Setter Property="Width" Value="{Binding Width}" />
<Setter Property="Height" Value="{Binding Height}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</ScrollViewer>
您的数据模板可能是这样的
<DataTemplate DataType="{x:Type local:CanvasBoardItem}">
<Grid>
<Rectangle>
</Rectangle>
<Thumb></Thumb>
<Thumb></Thumb>
<Thumb></Thumb>
</Grid>
</DataTemplate>
您的视图模型将沿着这条线
public class ViewModel
{
public ObservableCollection<CanvasBoardItem> BoardItems { get; private set; }
public ICommand SerializeDataCommand { get; }
public ViewModel()
{
//Set up command here
//Set up board items here
}
}
Canvas board item包含您要在项目模板中绑定的所有内容,如高度,宽度,连接等