WPF User Control in VB.NET

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

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.

UserControl1.gif

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.

UserControl2.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 Property FileName() As String
        Get
            Return FBCTextBox.Text
        End Get
        Set(ByVal value As String)
            FBCTextBox.Text = value
        End Set
    End Property
 

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 Sub FBCButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)|
        Dim openFileDlg As New Microsoft.Win32.OpenFileDialog()
        If openFileDlg.ShowDialog() = True Then
            Me.FileName = openFileDlg.FileName
        End If
    End Sub

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

    Public Event FileNameChanged As EventHandler(Of EventArgs)
    Private Sub FBCTextBox_TextChanged(ByVal sender As Object, ByVal e As TextChangedEventArgs)
        e.Handled = True
        RaiseEvent FileNameChanged(Me, EventArgs.Empty)
    End Sub
 

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.

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

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.