In this article, I will show how to create a simple user control and then how to use it in a Windows WPF application.
1. Create a User Control
I created a new WPF based Windows application. My WPF application name is WpfApplication3. You may want to give your application name like "MyWPFControlsLibrary" or something like that.
Add a new item by selecting Visual C# in the left pane and User Control (WPF) in the right pane. See Figure 1. This action will add a UserControl.xaml file and a code behind file to your project. You may change the name of this file to whatever you want.
In my application, I added four User Controls (Header, Footer, Left bar, Right bar). Put whatever code u want in your user controls.
The following code shows the header user control XAML contents.
In my application, I added four User Controls (Header, Footer, Left bar, Right bar). Put whatever code u want in your user controls.
The following code shows the header user control XAML contents.
Header.xaml
<UserControl x:Class="WpfApplication3.Header"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="100" Width="600">
<Grid Background="DarkSalmon">
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="600"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" HorizontalAlignment="Center" Grid.Column="0">This is header</TextBlock>
</Grid>
</UserControl>
Now compile and build your application.
Your user controls are ready to use.
2. Use a User Control
In previous part of this article, I discussed how to create a user control in WPF. In this part, let's see how use a user control, which we just created.
To test this, we can use same Windows WPF application or you can create a new application. If you create a new application, you need to add a reference to the above assembly (DLL) to your application.
Once an assembly reference is added, we need to add namespace support to the XAML code using following code.
xmlns:local="clr-namespace:WpfApplication3"
Once the namespace reference is added, you should be able to access the Header user control we created in the previous section.
Here is my final window1.xaml code looks like. As you can see from this code below, I am accessing the header control in the commented section. Similarily, I add all four controls I created in the above section.
<Window x:Class="WpfApplication3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="600" Width="600"
xmlns:local="clr-namespace:WpfApplication3">
<Grid>
Join the conversation! Your thoughts help the community grow.