ItemsControl和Canvas中的多个dataTemplates [英] Multiple dataTemplates in ItemsControl and Canvas

问题描述

我正在尝试在画布上显示一些框(我自己的userControl在自己的xaml文件中定义为singleNodeControl的框)，并将它们与线连接(将普通的xaml Line元素绑定到LineToParent类)

Im trying to display some boxes (my own userControl defined in its own xaml file called singleNodeControl) on canvas and connect them with lines (normal xaml Line element binded to LineToParent class)

这两项都存储在viewModel的Binding列表中，该列表是< UserControl> 类型.这两个类(框和行)都扩展了UserControl类，因此我可以将它们存储到单个绑定列表(canvasNodeSourceList)中

Both these two items are stored in Binding list in viewModel which is <UserControl> type. Both of these classes (boxes and lines) extending UserControl class so i can store them into single Binding list (canvasNodeSourceList)

SingleNodeControl类包含.cs文件中的代码，还包含.xaml文件中的模板.

SingleNodeControl class containt code in .cs file and also template in .xaml file.

LineToParent类仅包含.cs代码，我在其中存储X1，X2，Y1，Y2 coordiantes以便以后绑定它们.

LineToParent class contains only .cs code, where i store X1,X2,Y1,Y2 coordiantes to bind them later.

xaml外观.我认为有效的方法是，如果canvasNodeSourceList中的项目类型为LineToParent，它将使用下面的模板，否则它将使用存储在singleNodeControl xaml文件中的模板(更多信息).

xaml with itemsControl looks. Which i thought works that if item in canvasNodeSourceList is type LineToParent it will use template bellow othervise it will use template stored in singleNodeControl xaml file (more bellow).

但是看起来好像没有使用line的dataTemplate.绘制了SingleNodeCOntrols，但线条不对.我缺少什么模板?甚至可以在外部文件中定义一些模板，在Items Control中定义一些模板吗?

But it looks like that dataTemplate for line isnt used. SingleNodeCOntrols are drawed, but lines arent. What with templates am i missing? And is it even possible to define some template in external file and some in Items Control?

我只是想显示一些可以通过线连接的框(需要xaml定义，因为它们将具有多个内部元素).

I just wana to display some boxes (which needs on xaml definition because they will have multiple inside elements) which can be connected by lines.

<ItemsControl x:Name="content" ItemsSource="{Binding canvasNodeSourceList}">                    
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate >
            <Canvas x:Name="contentCanvas" Background="White" Width="{Binding Width}" Height="{Binding Height}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>                   
    <ItemsControl.Resources>
    <DataTemplate DataType="{x:Type slider:LineToParent}">
              <!--<Line X1="100" Y1="100" X2="10000" Y2="10000" StrokeThickness="5" Stroke="RED"></Line>-->
            <Line X1="{Binding leftPos1}" Y1="{Binding topPos1}" X2="{Binding leftPos2}" Y2="{Binding topPos2}" StrokeThickness="5" Stroke="Black"></Line>
        </DataTemplate>

    </ItemsControl.Resources>                  
</ItemsControl>

SingleNodeControl xaml文件

SingleNodeControl xaml file

<UserControl x:Class="WHS_qa.View.SingleNodeControl"
         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:WHS_qa.View"
         mc:Ignorable="d"              
         >
<Grid>
    <Border BorderBrush="Black" BorderThickness="2">
        <StackPanel Name="NodeStackPanel">


        </StackPanel>
    </Border>

</Grid>

我还试图修改itemsControl使其看起来像这样(将itemsControl.Resource更改为itemsControl.itemTemplate)，并显示了测试行(包含所有singleNodeControl元素)，但是输出中充满了错误

I also tried to modify itemsControl to look like this (changed itemsControl.Resource to itemsControl.itemTemplate) and testline was displayed (with all singleNodeControl elements) But output was full of errors

<ItemsControl x:Name="content" ItemsSource="{Binding canvasNodeSourceList}">                    
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate >
            <Canvas x:Name="contentCanvas" Background="White" Width="{Binding Width}" Height="{Binding Height}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>                   
    <ItemsControl.ItemTemplate>
    <DataTemplate DataType="{x:Type slider:LineToParent}">
              <Line X1="100" Y1="100" X2="10000" Y2="10000" StrokeThickness="5" Stroke="RED"></Line>
            <!--<Line X1="{Binding leftPos1}" Y1="{Binding topPos1}" X2="{Binding leftPos2}" Y2="{Binding topPos2}" StrokeThickness="5" Stroke="Black"></Line>-->
        </DataTemplate>

    </ItemsControl.ItemTemplate>                  
</ItemsControl>

输出错误

System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='LineToParent'
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='SingleNodeControl'
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='LineToParent'
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='SingleNodeControl'
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='LineToParent'
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='SingleNodeControl'
System.Windows.Data Error: 26 : ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container type; Type='LineToParent'

推荐答案

基于类型进行样式设置时，您不需要itemtemplate.这是因为您的模板将基于数据类型.
但是，您确实希望将所有数据类型的数据模板放入项目控件的项目源中.

When you're styling based on type, you don't want an itemtemplate. This is because your template is going to be based on datatype.
You do, however, want datatemplates for all the datatypes you will put in the itemssource of your itemscontrol.

此示例在itemcontrol控件中做画布，以模板化各种对象:

This sample does the canvas in an itemscontrol thingm, templating out various objects:

https://1drv.ms/u/s!AmPvL3r385QhgooJ94uO6PopIDs4lQ

 <ItemsControl x:Name="ic" ItemsSource="{Binding Items}"
                      Background="{StaticResource bgroundImage}">
            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type local:RectangleVM}">
                    <Rectangle Stroke="Green" Fill="White" 
                               Width="{Binding Width,Mode=TwoWay}"
                               Height="{Binding Height,Mode=TwoWay}"/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:CircleVM}" >
                    <StackPanel>
                        <Ellipse Stroke="Red" Fill="White" 
                                 Width="{Binding EllipseWidth}" 
                                 Height="{Binding EllipseHeight}"
                                 />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:TextBoxVM}">
                    <TextBox Text="{Binding TbText}"/>
                </DataTemplate>
            </ItemsControl.Resources>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Name="TheCanvas"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Top" Value="{Binding Top}"/>
                    <Setter Property="Canvas.Left" Value="{Binding Left}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>

您可能还希望在项目容器上绑定canvas.left和canvas.top.

You also probably want the binding for canvas.left and canvas.top on the item container.

在该示例中，所有呈现的类型都完全不同.如果您有类似的项目，则可以对大多数或某些项目使用基类，即使您提供子类型，也可以识别基类.

All the types presented are fairly different in that sample. If you have similar sort of items you can use a base class for most or some of these and that will be recognised even if you present a subtype.

这篇关于ItemsControl和Canvas中的多个dataTemplates的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！