WPF在ItemsControl中的画布上的元素之间绘制线条

如何解决WPF在ItemsControl中的画布上的元素之间绘制线条

我想在ItemsControl中的多个椭圆之间画线。

最终结果应如下所示。

问题在于所有圆都在运行时绘制。它们位于itemscontrol中，其代码如下所示。

<ItemsControl x:Name="SpaceObjectsIC"
                      Grid.Row="0" Grid.Column="0"
                      ItemsSource="{Binding SpaceObjects,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Background="LightGray" Width="800" Height="600" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Fill="{Binding Color,Converter={StaticResource ColorConverter}}"
                             Stroke="{Binding Border,Converter={StaticResource ColorConverter}}" 
                             StrokeThickness="{Binding BorderThickness}"
                             Height="{Binding Diameter}" Width="{Binding Diameter}" Tag="{Binding Name}"
                             ClipToBounds="True">
                        <Ellipse.RenderTransform>
                            <TranslateTransform X="{Binding X}" Y="{Binding Y}" />
                        </Ellipse.RenderTransform>
                    </Ellipse>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

如您所见，我正在使用一个只能使用一个元素的数据模板。我不知道如何在XAML中解释要在这些特定的椭圆之间画线。

只有具有所谓“邻居”的圈子才需要线。如果查看xaml，则可以看到绑定了一个名为SpaceObjects的列表。每个具有邻居的空间对象都知道这些邻居（也是空间对象）。这意味着找到圆的x和y位置很容易。 我只是不知道如何在不破坏MVVM规则的情况下在它们之间动态画线，而且我也不想在后面使用代码。

xaml的数据上下文是一个名为SpaceViewModel的小物件，其中包含带有空间对象的ObservableCollection。

SpaceObject代码如下所示（我省略了属性，但只知道它们确实存在）：

public class SpaceObject : ISpaceObject,INotifyPropertyChanged
{
    private decimal _x;
    private decimal _y;
    private List<SpaceObject> _spaceNeighbours = new List<SpaceObject>();
}

因此，既然我已经拥有了所需的所有数据，那么如何使Xaml能够做我想做的事情？

解决方法

从您的itemssource绑定中删除，UpdateSourceTrigger = PropertyChanged。

使SpaceObjects成为ObservableCollection

将当前的数据模板移动到itemscontrol的资源。使用Datatemplate DataType =“ {x：Type YourPlanetVM}”

将其与当前视图模型类型相关联

定义一个新的视图模型，其属性指定行X和Y以及行X和Y结束。

计算x和y的开始和结束，并在这些视图模型上进行设置。 首先将它们添加到observablecollection中，因为这会影响z-index。您大概想让行星在行星下面。

使用ItemContainerStyle定位行星

  <ItemsControl.ItemContainerStyle>
         <Style>
              <Setter Property="Canvas.Top" Value="{Binding X}"/>
              <Setter Property="Canvas.Left" Value="{Binding Y}"/>

您的LineVM需要将其设置为0 它还需要属性来绑定到Line的属性：

https://docs.microsoft.com/en-us/dotnet/api/system.windows.shapes.line?view=netcore-3.1

您将希望linevm的数据模板具有x，y和笔触（画笔）和笔触厚度的开始和结束。

我建议对路径使用椭圆度法。它以X，Y坐标为中心，而不是位于左上方。像这样的数据模板（但带有一些硬编码的值）看起来像：

                                    <Path  
                                                Height="2"
                                                Width="2"
                                                Fill="Black">
                                        <Path.Data>
                                            <EllipseGeometry 
                                                            RadiusX="1" 
                                                            RadiusY="1"
                                                                       />
                                        </Path.Data>
                                    </Path>