WPF / XAML:在画布中的嵌套数据结构中定位基元

时间:2016-09-20 15:50:52

标签: wpf xaml canvas

在我当前的项目中,我有一个嵌套的数据结构。根是ObservableCollection(terrainModel.terrainElements)。集合中的每个元素都托管另一个ObservableCollection(drawElements),它包含用于在画布中绘制基元的数据。根据原语,我提供了一个DataTemplate,以便它在Canvas中呈现。

这是实际的XAML:

<ItemsControl ItemsSource="{Binding terrainModel.terrainElements}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Width="1000" Height="500" Background="Aquamarine"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding drawElements}">
                    <ItemsControl.Resources>

                        <DataTemplate DataType="{x:Type drawtype:LineElement}">
                            <Line Stroke="Black" X1="{Binding startPoint.X}" Y1="{Binding startPoint.Y}" X2="{Binding endPoint.X}" Y2="{Binding endPoint.Y}" />
                        </DataTemplate>

                        <DataTemplate DataType="{x:Type drawtype:CircleElement}">
                            <Ellipse Stroke="Black" Width="{Binding radius}" Height="{Binding radius}"/>
                        </DataTemplate>

                        <DataTemplate DataType="{x:Type drawtype:RectangleElement}">
                            <Rectangle Stroke="Blue"  Width="{Binding width}" Height="{Binding height}" Canvas.Left="{Binding position.X}" Canvas.Top="{Binding position.Y}"/>
                        </DataTemplate>

                    </ItemsControl.Resources>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

然而问题是我无法在XAML中设置基元的位置正确,因为Canvas.Left =“{Binding position.X}”例如不能像在内部ItemsControl中那样工作,不在外面的ItemsControl。

我也试图像这样转换基元:

 <Rectangle.RenderTransform><TranslateTransform   x:Name="myTransform2" X="{Binding position.X}" Y="{Binding position.Y}" /></Rectangle.RenderTransform>

这有效但破坏了以下要素的位置。当然,我可以在视图的代码中绘制所有内容,但我想知道是否也可以在xaml中进行。

1 个答案:

答案 0 :(得分:0)

非常感谢Clemens的工作。我认为每个outter ItemsControl都会在内部ItemsControl中生成一个新的Canvas。

如果有人感兴趣,这是XAML:

 <ItemsControl ItemsSource="{Binding terrainModel.terrainElements}">
           <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding drawElements}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas Width="1000" Height="500" Background="Aquamarine"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.Resources>

                        <DataTemplate DataType="{x:Type drawtype:LineElement}">
                            <Line Stroke="Black" X1="{Binding startPoint.X}" Y1="{Binding startPoint.Y}" X2="{Binding endPoint.X}" Y2="{Binding endPoint.Y}" />
                        </DataTemplate>

                        <DataTemplate DataType="{x:Type drawtype:CircleElement}">
                            <Ellipse Stroke="Black" Width="{Binding radius}" Height="{Binding radius}">
                                <Ellipse.RenderTransform>
                                    <TranslateTransform   x:Name="myTransform" X="{Binding position.X}" Y="{Binding position.Y}" />
                                </Ellipse.RenderTransform>
                            </Ellipse>
                        </DataTemplate>

                        <DataTemplate DataType="{x:Type drawtype:RectangleElement}">
                            <Rectangle Stroke="Blue"  Width="{Binding width}" Height="{Binding height}">
                                <Rectangle.RenderTransform>
                                    <TranslateTransform   x:Name="myTransform2" X="{Binding position.X}" Y="{Binding position.Y}" />
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </DataTemplate>

                    </ItemsControl.Resources>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>