Как я могу расположить ViewModels в ItemsControl - PullRequest
Новая
       24

Как я могу расположить ViewModels в ItemsControl

0 голосов
/ 10 марта 2011

В моем главном окне ViewModel есть ObservableCollection ViewModels, которая называется ViewModels.

Основное окно XAML имеет ItemsControl с ItemsSource, привязанным к ViewModels.

Когда у меня есть 

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

Представления, связанные с каждой ViewModel в коллекции, отображаются один под другим. Представления - это пользовательские элементы управления, отображающие dataGrids.

Как я могу расположить их настраиваемым образом, например, так, чтобы VM1 находился слева, а VM2 и VM3 были расположены друг над другом справа от VM1.

Каждый VieModel имеет свойства PosX, PosY, Width и Height, и я пробовал различные методы создания шаблонов, но пока безуспешно.

Я нашел примеры того, как это сделать с помощью наблюдаемых коллекций изображений, но я борюсь за то, чтобы моя коллекция была из ViewModels.

1 Ответ

5 голосов
/ 10 марта 2011

Превратите вашу ItemsControl.ItemsPanel в Canvas и установите ваши Top / Left / Height / Width в 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>
...