User Control in WPF

This article discusses how to create a User Control in XAML and WPF using Visual Studio 2008 and how to use it in a WPF application. The first part of this article creates a XamlFileBrowser user control that is used to browse a file on a system and second part shows how to use it in an application.

The XamlFileBrowser Control

Create a XAML application using Visual Studio 2008 and add a new item by right clicking on the project, select Add >> New Item from the menu and select User Control from the available templates. See in Figure 1. Before clicking the Add button, change the name of XAML file in the below text box to the name of your control. I change my file name to XamlFileBrowser. 

Figure 1. Adding a User Control (WPF) 

This action adds a UserControl1.xaml file to your project.

<UserControl   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"  x:Class="XamlFileBrowser.UserControl1"
      x:Name="UserControl1"
      d:DesignWidth="397" d:DesignHeight="39">
      <Grid x:Name="LayoutRoot">
      </Grid>
</UserControl>

Designing the XamlFileBrowser Control

Now I add a button and a TextBox control to the user control and change names of the TextBox and the Button controls to FBCTextBox and FBCButton respectively. The design of the control looks like Figure 2.

Figure 2. XamlFileBrowser control

As you can see from the below code, I also add a Button click event handler and TextBox's text changed event handler.

<TextBox x:Name="FBCTextBox" Margin="4,10.313,137,4.001" Text="TextBox" TextWrapping="Wrap" Grid.ColumnSpan="2" TextChanged="FBCTextBox_TextChanged" />
<Button x:Name="FBCButton" HorizontalAlignment="Right" Margin="0,8,13,4" Width="111" Content="Browse" Grid.Column="1" Click="FBCButton_Click" />

I also change the x:Class and x:Name values of the user control and ad some formatting to the Grid. The final code looks like following:

<UserControl      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      x:Class="McXamlLib.XamlFileBrowser"
      x:Name="XAMLFileBrowserControl"
      d:DesignWidth="397" d:DesignHeight="39">
      <Grid x:Name="LayoutRoot" Height="42" Width="504">
            <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="0.352*"/>
                  <ColumnDefinition Width="0.648*"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="FBCTextBox" Margin="4,10.313,137,4.001" Text="TextBox" TextWrapping="Wrap" Grid.ColumnSpan="2" TextChanged="FBCTextBox_TextChanged" />
            <Button x:Name="FBCButton" HorizontalAlignment="Right" Margin="0,8,13,4" Width="111" Content="Browse"
                Grid.Column="1" Click="FBCButton_Click" />
      </Grid>
</UserControl>

Adding code to the XamlFileBrowser Control

Now, we are going to add the code to the control.

First, I create a public property called FileName and sets and gets text of the FBCTextBox control. The property code looks like following:

public string FileName
{
    get { return FBCTextBox.Text; }
    set { FBCTextBox.Text = value; }
}

Now, on the FBCButton click event handler, I write code to browse files on the system using the OpenFileDialog control and set FileName property to the selected file name in the OpenFileDialog.

private void FBCButton_Click(object sender, RoutedEventArgs e)
{
    Microsoft.Win32.OpenFileDialog openFileDlg = new Microsoft.Win32.OpenFileDialog();
    if (openFileDlg.ShowDialog() == true)
        this.FileName = openFileDlg.FileName;
}

In the end, I add an event called FileNameChanged and call it on the textchanged event of the TextBox as following:

public event EventHandler<EventArgs> FileNameChanged;
private void FBCTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    e.Handled = true;
    if (FileNameChanged != null)
        FileNameChanged(this, EventArgs.Empty);
}

That's it. Our control is ready. 

The XAMLFileBrowser Control Host Application

Using a user control in XAML is pretty simple. I use a WPF Application to test the control.

Create a WPF application project and copy the control code files to your project.

After that, you need to add namespace of the library in which the user control is defined. In our case, the library was McXamlLib. Add the following namespace within the Window or Page tag of your application.

xmlns:local="clr-namespace:McXamlLib"

After that, create the control using the following syntax:

<Grid x:Name="LayoutRoot">
        <local:XamlFileBrowser  />
</Grid>

The complete code for the host application looks like following: 

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:McXamlLib"
      x:Class="XAMLFileBrowser.Window1"
      x:Name="Window"
      Title="Window1"
      Width="565" Height="310">
      <Grid x:Name="LayoutRoot">
        <local:XamlFileBrowser  />
    </Grid>
</Window>

Now if you run the application, the output looks like Figure 3. If you click on the Browse control, it opens the OpenFileDialog control and let you select a file. The selected file name is added as text of the TextBox.

Figure 3. The XamlFileBrowser control in action

Forthcoming

Using the same approach, I am creating an interactive XamlFileBrowser control that will have styles and interactive UI as well as new features such as MRUs. After that, I will use this control in one of my Graphics Designer applications I am working on. Stay tuned. As always, all comments and critics are most welcome. Please post them at the bottom of this article using Post Comment button.

Summary

In this article, we saw how easy it is to create a user control in XAML and WPF application programming model. First, we created a user control and later we created a host application to test our user control.