WPF - How to Show multiple overlays in single view

Problem Statement:

Showing multiple overlays in single view using WPF Prism region manager and regions


Solution:

Have region using ItemsControl or Listbox

Listbox XAML Sample

     <ListBox x:Name=" MultipleOverlayRegion "

                         PrismRegions:RegionManager.RegionName="MultipleOverlayRegion">

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <Grid></Grid>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <ContentControl Content="{Binding}" />

                    </Grid>

                </DataTemplate>

            </ListBox.ItemTemplate>

            <ListBox.ItemContainerStyle>

                <Style TargetType="ListBoxItem"

               BasedOn="{StaticResource {x:Type ListBoxItem}}">

                    <Setter Property="VerticalContentAlignment"

                    Value="Stretch" />

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="ListBoxItem">

                                <ContentPresenter />

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </ListBox.ItemContainerStyle>

        </ListBox>

ItemsControl XAML Sample

  <ItemsControl x:Name="MultipleOverLayRegion">

            <ItemsControl.ItemsPanel>

                <ItemsPanelTemplate>

                    <Grid></Grid>

                </ItemsPanelTemplate>

            </ItemsControl.ItemsPanel>

  </ItemsControl>

Bind your regions with multiple views to show as overlay

  regionManager.Regions[MultipleOverlayRegion].Add(overlayView1);
  regionManager.Regions[MultipleOverlayRegion].Add(overlayView2);