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

本文关键字：项目 第一个 Canvas- ItemsControl | 更新日期: 2023-09-27 18:21:59

我有一个画布，它包含几个不同的形状，这些形状都是静态的，并绑定到视图模型（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可能不合适，但我只能猜测。。。

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

好吧，这里有几点需要注意。首先，使用Canvas面板时，除非指定了相对的位置，否则面板中的每个项目都将放置在左上角。下面是一个Canvas的例子，其中一个元素位于顶部附近（向下40个像素，向右40个像素），另一个元素则位于底部（从右边缘向左100个像素）：

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

现在，请记住，Canvas是Panel的一种类型。它的主要目的不是成为某种列表，而是定义如何显示控件。如果您希望实际呈现控件的集合/列表（枚举），则应该使用ItemsControl类型。从那里，您可以指定ItemsSource并自定义ItemsPanel（以及可能需要的ItemTemplate）。

其次，经常出现的问题是"如何将静态元素添加到数据绑定的ItemsSource？"，答案是使用CompositeCollection和后续的CollectionContainer。在您的情况下，您有两（2）个静态项目（加上更多）要添加到Office集合中。我猜这些"静态形状"实际上是平面图图像的替代品。

如果你想绘制平面图，这里有一个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; }
}

从这里开始，您将使用DataTemplate将对象（模型/viewmodel）转换为视图中的样子：

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

当然，如果您希望对集合Offices中的每个项目有多个表示，那么您必须利用DataTemplateSelector（将设置为ItemsControl.ItemTemplateSelector属性）从一组DataTemplate s中进行选择。以下是一个很好的答案/参考：https://stackoverflow.com/a/17558178/347172

最后，最后一个音符。。。保持一切按比例进行，并将你的分数作为double的类型。就我个人而言，我总是使用0-1或0-100。只要你所有的点和静态项目都在这个范围内，你就可以将你的ItemsControl伸展到任何高度/宽度，里面的一切也会调整和匹配得很好。

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

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

更新2:在联机挖掘了一段时间后，我找到了一种更好的方法来允许数据绑定使用CompositeCollection，上面的答案部分已经更新，通过使用CollectionViewSource创建绑定到集合的资源来说明这一点。这比使用x:Reference要好得多。希望能有所帮助。

尝试设置

yourItemsControl.DataContext = Offices;

在代码背后。

相关文章：