ItemsControl和Canvas - 只有第一个项目可见

Question

我有一个包含几个不同形状的画布,它们都是静态的,并且绑定到视图模型(MVVM)中的不同属性.截至目前,画布定义如下(简化):

<Canvas>
 <Polygon Fill="Red" Stroke="Gray" StrokeThickness="3" Points="{Binding StorageVertices}" />
 <Ellipse Fill="Blue" Width="{Binding NodeWidth}" Height="{Binding NodeHeight}" />

 <!-- And some more static shapes -->
 <!-- ...                         -->
</Canvas>

对于这个画布,我想添加一个动态列表,其中每个条目都转换为多边形.我认为最好的方法是ItemsControl.这是我在我的方法中使用的,但只显示了集合(列表)中的第一个项目.

<Canvas>
 <!-- ...                                                          -->
 <!-- Same canvas as earlier with the addition of the ItemsControl -->

 <ItemsControl ItemsSource="{Binding Offices, Mode=OneWay, Converter={...}}">
  <ItemsControl.ItemTemplate>
   <DataTemplate>
    <Polygon Fill="AliceBlue" Stroke="Gray" StrokeThickness="1" Points="{Binding Points}" />
   </DataTemplate>
  </ItemsControl.ItemTemplate>
 </ItemsControl>
</Canvas>

使用此代码,仅Offices显示集合中的第一个项目.怎么会？如果我查看可视树,则所有多边形都在其中.我很新的WPF,所以我只能猜测,但我的第一个念头是的默认StackPanel为ItemPresenter可能是在这种情况下不合适,但我只能猜测...

Answer 1

好吧,这里有几点需要注意.首先,在使用Canvas面板时,面板内的每个项目都将放在左上角,除非指定了相对位置.下面是一个Canvas带有元素的示例,一个放置在顶部附近(向下40个像素,向右40个),另一个放置在底部(从右边缘向左100个像素):

<Canvas>
    <Polygon Canvas.Left="40" Canvas.Top="40" ... />
    <Ellipse Canvas.Right="100" Canvas.Bottom="0" ... />
</Canvas>

现在,请记住a Canvas是一种类型Panel.它的主要目的不是为某种名单的,但另外确定如何控制(或控制)的介绍.如果您希望实际呈现控件的集合/列表(枚举),那么您应该使用一种类型ItemsControl.从那里,您可以指定ItemsSource和自定义ItemsPanel(以及ItemTemplate可能需要的).

其次,这经常出现,是"如何向数据ItemsSource绑定添加静态元素？" ,答案是使用的CompositeCollection,以及随后的CollectionContainer.在您的情况下,您有两(2)个静态项目(以及更多)要添加到您的办公室集合中.我猜这些"静态形状"实际上是平面图图像的替代品.

以下是您希望绘制平面图时XAML的样子:

<ItemsControl>
    <ItemsControl.Resources>
        <CollectionViewSource x:Key="cvs" Source="{Binding Floors}" />
    </ItemsControl.Resources>
    <ItemsControl.ItemsSource>
        <CompositeCollection>
            <CollectionContainer Collection="{Binding Source={StaticResource cvs}" />

            <!-- Static Items -->
        </CompositeCollection>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas ... />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

我不确定你的Floor收藏品中的每个物品是什么,但它们根本不应该是任何形状.它们应该是一个简单地说明办公室位置,颜色等信息的对象.这是我猜的一个例子,因为你没有提供项目集合的组成:

// This can (and should) implement INotifyPropertyChanged
public class OfficeViewModel
{
    public string EmployeeName { get; private set; }

    public ReadOnlyObservableCollection<Point> Points { get; private set; }

    ...
}

public class Point
{
    public double X { get; set; }
    public double Y { get; set; }
}

从这里你可以使用a DataTemplate将对象(模型/视图模型)转换为视图中的样子:

<ItemsControl>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Polygon Points="{Binding Points}" Color="AliceBlue" ... />
        <DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

当然,如果您希望对集合中每个项目的外观进行多次表示Offices,那么您将必须利用DataTemplateSelector(将设置为ItemsControl.ItemTemplateSelector属性)从一组DataTemplates中进行选择.这是一个很好的答案/参考:https://stackoverflow.com/a/17558178/347172

最后,最后一个注意事项......保持一切按比例缩放,将你的观点作为类型double.我个人总是使用0-1或0-100的比例.只要您的所有点和静态物品都适合该范围,您就可以伸展ItemsControl到任何高度/宽度,并且内部的所有内容也会调整并匹配得很好.

更新:已经有一段时间了,我忘了这个CompositeCollection类不是一个类型FrameworkElement,所以它没有DataContext.如果要对其中一个集合进行数据绑定,则必须使用FrameworkElement所需的DataContext 指定对a的引用:

<CollectionContainer Collection="{Binding DataContext.Offices, Source={x:Reference someControl}}"/>

更新2:在线挖掘一段时间之后,我找到了一种更好的方法来允许数据绑定工作,CompositeCollection上面的答案部分已经更新,通过使用CollectionViewSource创建绑定到集合的资源来解决这个问题.这比使用它要好得多x:Reference.希望有所帮助.