如何在ItemControl中定位ViewModel

Question

我的主窗口ViewModel有一个ViewModel的ObservableCollection,名为ViewModels.

Mainwindow XAML有一个ItemsControl,其ItemsSource绑定到ViewModels.

当我有

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

与集合中的每个ViewModel关联的视图将一个在另一个下方呈现.视图是UserControls,显示dataGrids.

如何以可自定义的方式定位它们,例如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>