CODEWITHSUNDEEP
c#wpfxaml
wdonahoe
wdonahoe

Reputation: 1073

Render ItemsControl item ContentPresenters on top of each other

I have a view model containing an observable collection property:

public ObservableCollection<ExplorerPane> Panes { get; set; } = new ObservableCollection<ExplorerPane>();

In the user control corresponding to my view model, I am using Panes as the ItemsSource to an ItemsControl and just using a ContentPresenter to display the content of each ExplorerPane:

<ItemsControl ItemsSource="{Binding Panes}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentPresenter Content="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

The catch is that I want the content presenters to render their panes on top of each other, so that only one is visible at a time.

I have thought of a solution along these lines: "Controls in the same cell of a Grid are rendered back-to-front. So a simple way to put one control on top of another is to put it in the same cell."

My question then is how do I get the content presenters to be in the same cell of a grid?

Upvotes: 0

Views: 641

Answers (1)

Clemens
Clemens

Reputation: 128013

Use a Grid as ItemsPanel:

<ItemsControl ItemsSource="{Binding Panes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

The ItemTemplate isn't necessary, because an ItemsControl already uses a ContentPresenter as item container.

However, if you only want to show a single ExplorerPane, add a CurrentPane property to your view model, and show it by

<ContentControl Content={Binding CurrentPane}"/>

Upvotes: 2

Related Questions