Reader Level:
Articles

User Control in WPF

By Mahesh Chand on June 30, 2008
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.
  • 1
  • 0
  • 225808
Download Files:
 

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.

UserControlImg1.jpg
Figure 1. Adding a User Control (WPF)

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

<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.

UserControlImg2.jpg
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.

UserControlImg3.jpg

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.

Article Extensions
Contents added by Klaus Wiesel on Mar 22, 2010
Hi

could you post an example of how to use this control in a wpf datagrid column?

Regards
Klaus
Mahesh Chand

Mahesh Chand is founder of C# Corner. C# Corner founded in 1999 is a FREE member contributions based open platform for developers to solve problems, learn new technology and hang out.  Mahesh has been awar... Read more

COMMENT USING

Trending up