如何在 ItemsControl 中定位 ViewModel

Question

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

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

当我有

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

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

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

每个 VieModel 都有 PosX、PosY、Width 和 Height 属性，我一直在尝试各种模板方法，但到目前为止都没有成功。

我已经找到了如何使用 Observable 图像集合来实现这一点的示例，但我正在苦苦挣扎的一件事是我的集合是 ViewModels。

Answer 1

将您的 ItemsControl.ItemsPanel 制作成 Canvas，并在 ItemTemplate 中设置您的 Top/Left/Height/Width。

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