Render ItemsControl item ContentPresenters on top of each other

Question

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?

If you only want to show a single ExplorerPane, add a `CurrentPane` property to your view model, and show it by `` — Clemens, Nov 06 '18 at 15:23
This suggestion works; if you update your answer I will mark it as accepted. — wdonahoe, Nov 06 '18 at 20:16

Clemens · Accepted Answer · 2018-11-06T20:39:23.997

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}"/>

Render ItemsControl item ContentPresenters on top of each other

1 Answers1