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

时间:2013-07-10 12:16:57

标签: c# wpf xaml canvas itemscontrol

我有一个包含几种不同形状的画布,这些形状都是静态的,并绑定到视图模型(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的默认值在这种情况下可能不合适,但我只能猜测..

2 个答案:

答案 0 :(得分:6)

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

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

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

其次,这经常出现,是“如何将静态元素添加到数据绑定的ItemsSource?”,答案是使用{{3 },以及随后的CompositeCollection。在您的情况下,您有两(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; }
}

从这里开始,您将使用DataTemplate将对象(模型/视图模型)转换为视图中的外观:

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

当然,如果您希望对您的收藏集Offices中的每个项目进行多次表示,那么您将必须利用DataTemplateSelector(将设置为CollectionContainer属性)从一组DataTemplate中进行选择。这是一个很好的答案/参考:ItemsControl.ItemTemplateSelector


最后,最后一个注意事项......将所有内容都按比例缩放,将您的观点作为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要好得多。希望有所帮助。

答案 1 :(得分:0)

尝试设置

yourItemsControl.DataContext = Offices;

代码背后。