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

Question

我有一个 Canvas ，其中包含几个不同的形状，这些形状都是静态的，并且绑定(bind)到 View 模型(MVVM)中的不同属性。截至目前， Canvas 定义如下(简化):

<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>

对于这个 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>

<小时/>

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

其次，这个问题经常出现，“如何将静态元素添加到数据绑定(bind)的 ItemsSource 中？”，答案是使用CompositeCollection ，以及随后的 CollectionContainer 。在您的情况下，您有两 (2) 个静态项目(以及更多)希望添加到您的 Offices 集合中。我猜测这些“静态形状”实际上是平面图图像的替代品。

<小时/>

如果您想绘制平面图，下面是 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 将对象(模型/ View 模型)转换为 View 上应有的样子:

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

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

<小时/>

最后，最后一点……保持所有内容都按比例缩放，并将您的点保持为 double 类型。就我个人而言，我总是使用 0-1 或 0-100 的范围。只要您的所有点和静态项目都在该范围内，您就可以将 ItemsControl 拉伸(stretch)到任何高度/宽度，并且内部的所有内容也会很好地调整和匹配。

<小时/>

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

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

更新 2: 在网上挖掘了一段时间后，我找到了一种更好的方法来允许数据绑定(bind)与 CompositeCollection 一起使用，上面的答案部分已更新以说明这是通过使用CollectionViewSource 创建绑定(bind)到集合的资源来实现的。这比使用x:Reference要好得多。希望有帮助。