Loading and Unloading UserControls

• Download source code - 16.7 KB

Introduction

I'm in the process of making a SHELL application that uses Microsoft Ribbon and a single Dockpanel UserControl UIPanel. This UIPanel is just an empty shell that gets filled in on runtime.

In short, at runtime, we're going to load a UserControl from a RibbonButton. Then via a button within the UserControl, the UserControl is going to unload itself.

Using the Code

Create your WPF window: Shell.xaml and add a Ribbon and an empty DockPanel.

XAML: Shell.xaml (Window)

<RibbonWindow
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Shell" >

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
       </Grid.RowDefinitions>
        <!-- 
        It is important to put the UIPanel before that of the Ribbon
        so it is loaded before the SelectionChanged action occurs
        -->
        <DockPanel x:Name="UIPanel" Grid.Row="1" />
        
        <Ribbon x:Name="RibbonWin" 
               SelectedIndex="0" WindowIconVisibility="Hidden" >
          <RibbonButton  Content="AddUserControl" Click="Add_Click"/>
        </Ribbon>
    </Grid>
</RibbonWindow>   

Tip: Put the DockPanel statement before that of the Ribbon so it is loaded before that of the Ribbon.

Next, create a UserControl that will be loaded into the UIPanel upon the click of a RibbonButton. For example, ucChild.xaml.

<UserControl x:Class="MyProject.UserControls.ucChild"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            mc:Ignorable="d">
  <StackPanel>
    <Button  Content="Exit" Click="Exit_Click" />
  </StackPanel> 
</UserControl>   

So how does it work. Well, the whole idea is to make sure that the child knows who the parent is at runtime. This we do by adding a property: ParentControl and cast it to the Type of my UIPanel DockPanel. And... via the Exit_click the unload statement.

ucChild.xaml.cs

namespace MyProject
{
   public DockPanel ParentControl {get; set;}
   public ucChild()
   {
     InitializeComponent();
   }

   private void Exit_Click(object sender, RoutedEventArgs e)
   {
      if (this.ParentControl != null)
           this.ParentControl.Children.Clear();
   }
} 

So next the loading of the UserControl..

During runtime, upon the click of the RibbonButton an instance of the UserControl is created and then it is told who its Parent is and then it is loaded into our UIPanel.

Shell.xaml.cs

using System.Windows.Controls.Ribbon;

namespace MyProject
{
    public partial class Shell : RibbonWindow
    {
        private void Add_Click(object sender, RoutedEventArgs e
        {
            ucCild ChildWindow = new ucChild();
            ChildWindow.ParentControl = this.UIPanel;
            UIPanel.Children.Clear();
            UIPanel.Children.Add(ChildWindow);

         }
    }
}

In short, the parent control when loading its child tells it who its parent is and thus the child can unload itself.

Images

First image is that of the Shell, the Ribbon and the RibonButton "AddUserControl":

The second Image shows the UserControl and its label and Button "Exit":

Points of Interest

I learnt that this article is too short for publishing, so the question is how long must an article be.?

In the next update, I'll try and make a small project to elaborate this article.

History

• 2013-10-25. :: Initial text, no pics , no code
• 2013-10-26. :: Pics[001,002] + Source code