WPF / c#:用线条动态连接形状

本文关键字：动态 连接 WPF | 更新日期: 2023-09-27 18:01:41

我有以下xhtml - code: 

    <Grid>
    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas></Canvas>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Ellipse Width="{Binding Radius}" Height="{Binding Radius}" Fill="{Binding BackColor}" />
                    <Line Stroke="Black" StrokeThickness="1" x:Name="_Line"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                <Setter Property="Line.X1" Value="{Binding LineX1}"/>
                <Setter Property="Line.X2" Value="{Binding LineX2}"/>
                <Setter Property="Line.Y1" Value="{Binding LineY1}"/>
                <Setter Property="Line.Y2" Value="{Binding LineY2}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

它是一个ItemsControl，它的ItemPanel是一个Canvas，可以动态地放置我绑定到的Obervable Collection中的省略号。椭圆在Canvas中的位置。顶部和画布。左值工作良好。但是它没有画出连接省略号的线。

在后面的代码中，行的位置是正确计算的，我检查过了。

WPF / c#:用线条动态连接形状

Line属性不应该应用于Item Container。相反，它们应该直接在DataTemplate中的Line控件上设置:

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Ellipse Width="{Binding Radius}" Height="{Binding Radius}"
                     Fill="{Binding BackColor}" />
            <Line Stroke="Black" StrokeThickness="1" x:Name="_Line"
                  X1="{Binding LineX1}" Y1="{Binding LineY1}"
                  X2="{Binding LineX2}" Y1="{Binding LineY2}"/>
        </Grid>
    </DataTemplate>
</ItemsControl.ItemTemplate>

注意LineX和LineY属性值是相对于项目位置的。

编辑:对于所有元素的绝对位置的另一种解决方案是不设置画布。左侧和画布。项目容器的顶部属性(即根本没有ItemContainerStyle)。

您将使用带有EllipseGeometry的Path而不是Ellipse，并将EllipseGeometry的Center属性绑定到类型为Point的视图模型属性，以替代X和Y:

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Canvas>
                <Path Fill="{Binding Fill}" Panel.ZIndex="1">
                    <Path.Data>
                        <EllipseGeometry Center="{Binding Center}"
                                         RadiusX="{Binding Radius}"
                                         RadiusY="{Binding Radius}"/>
                    </Path.Data>
                </Path>
                <Line Stroke="Black"
                      X1="{Binding LineX1}" Y1="{Binding LineY1}"
                      X2="{Binding LineX2}" Y2="{Binding LineY2}"/>
            </Canvas>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
相关文章：