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