Thursday, November 28, 2013

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);

WPF - Mutually Exclusive Listboxes and maintain single selection

Problem Statement:

I have two listboxes and i need to maintain single selection across the page within the listboxes.

Solution:

Keep SelectedItem as single and have like below

private Employee selectedItem;
public Employee SelectedItem{
    get
    {
        return selectedItem;
    }
    set
    {
       //For clearing existing selection
        selectedItem = null;
        NotifyPropertyChanged("SelectedItem");

        //For assigning new selection
        selectedItem = value;
        NotifyPropertyChanged("SelectedItem");
    }