Wpf 如何在ItemsControl中定位ViewModels

我的主窗口ViewModel有一个ViewModels的ObservableCollection，称为ViewModels

主窗口XAML有一个ItemsControl，其中ItemsSource绑定到ViewModels

当我有

<ItemsControl ItemsSource="{Binding ViewModels}" />

与集合中每个ViewModel关联的视图一个接一个地呈现。视图是用户控件，显示数据网格

如何以可自定义的方式定位它们，例如，使VM1位于左侧，VM2和VM3一个叠在另一个上，位于VM1的右侧

每个模型都有PosX、PosY、Width和Height属性，我一直在尝试各种模板方法，但迄今为止都没有成功

---

我已经找到了如何使用可观察的图像集合实现这一点的示例，但我正在努力的一件事是，我的集合是ViewModels。

将ItemsControl.ItemsPanel制作成画布，并在ItemTemplate中设置顶部/左侧/高度/宽度

<ItemsControl ItemsSource="{Binding ViewModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- Height, Width, and Background are required to render size correctly -->
            <Canvas Height="600" Width="800" Background="White" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type FrameworkElement}">
            <Setter Property="Canvas.Top" Value="{Binding Top}" />
            <Setter Property="Canvas.Left" Value="{Binding Left}" />
            <Setter Property="Height" Value="{Binding Height}" />
            <Setter Property="Width" Value="{Binding Width}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl>
                <ContentPresenter ClipToBounds="True" Content="{TemplateBinding Content}"/>
            </ContentControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

将ItemsControl.ItemsPanel放入画布，并在ItemTemplate中设置顶部/左侧/高度/宽度

<ItemsControl ItemsSource="{Binding ViewModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- Height, Width, and Background are required to render size correctly -->
            <Canvas Height="600" Width="800" Background="White" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type FrameworkElement}">
            <Setter Property="Canvas.Top" Value="{Binding Top}" />
            <Setter Property="Canvas.Left" Value="{Binding Left}" />
            <Setter Property="Height" Value="{Binding Height}" />
            <Setter Property="Width" Value="{Binding Width}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl>
                <ContentPresenter ClipToBounds="True" Content="{TemplateBinding Content}"/>
            </ContentControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

谢谢Rachel，但我也不需要数据模板。使用您的解决方案运行时，我得到了一个空白画布，而正如我上面所说的，省略了所有ItemsControl内部内容，我得到了叠在一起的ViewModels。@GilShalit是的，您需要一个DataTemplate。对不起，我以为你已经搞定了。在你的帮助下，我将把它添加到最后面。。。现在我让第一个viewmodel显示为OK，但是我设置为left=VM1.width的第二个viewmodel没有显示。有什么想法吗？ClipToBounds在这种情况下做了什么？@GilShalit是VM2。左、上、高和宽都设置正确了吗？我会先验证这些值是否正确。其次，检查并确保画布足够大以适合其内容。我通常通过设置画布的背景色来实现这一点，这样我就可以看到它所使用的空间。ClipToBounds就在那里，因为我从一些代码中复制/粘贴了这一行，但并没有删除它。如果大小超过画布中的可用空间，它将剪辑对象。显然，我已检查并再次检查。。。但是现在，在你的催促下，我再次检查，对于VM2，值是在一个没有被调用的函数中设置的。。。谢谢你的帮助。谢谢瑞秋，但我不需要一个数据模板了。使用您的解决方案运行时，我得到了一个空白画布，而正如我上面所说的，省略了所有ItemsControl内部内容，我得到了叠在一起的ViewModels。@GilShalit是的，您需要一个DataTemplate。对不起，我以为你已经搞定了。在你的帮助下，我将把它添加到最后面。。。现在我让第一个viewmodel显示为OK，但是我设置为left=VM1.width的第二个viewmodel没有显示。有什么想法吗？ClipToBounds在这种情况下做了什么？@GilShalit是VM2。左、上、高和宽都设置正确了吗？我会先验证这些值是否正确。其次，检查并确保画布足够大以适合其内容。我通常通过设置画布的背景色来实现这一点，这样我就可以看到它所使用的空间。ClipToBounds就在那里，因为我从一些代码中复制/粘贴了这一行，但并没有删除它。如果大小超过画布中的可用空间，它将剪辑对象。显然，我已检查并再次检查。。。但是现在，在你的催促下，我再次检查，对于VM2，值是在一个没有被调用的函数中设置的。。。感谢您的帮助。我需要像您一样使用observablecollections在ItemsControl中显示与不同视图模型关联的不同视图。我是WPF的新手。你能和我分享你的代码吗@Manish Dubey，请参见下面接受答案中的代码。我们需要使用observablecollections在Items控件中显示与不同视图模型关联的不同视图，就像您所做的那样。我是WPF的新手。你能和我分享你的代码吗@Manish Dubey，请参见下面公认答案中的代码