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>
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="400"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- User Controls -->
<local:Header HorizontalAlignment="Left" Grid.Row="0" Margin="2,2,2,2" Grid.Column="0" Grid.ColumnSpan="3"></local:Header>
<local:Footer HorizontalAlignment="Left" Grid.Row="2" Margin="2,2,2,2" Grid.Column="0" Grid.ColumnSpan="3"></local:Footer>
<local:Leftbar HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Margin="2,2,2,2"></local:Leftbar>
<local:Rightbar HorizontalAlignment="Left" Grid.Row="1" Grid.Column="2" Margin="2,2,2,2"></local:Rightbar>
<!-- -->
<Image Source="Raj 061.JPG" Height="300" Width="300" Grid.Row="1" Grid.Column="1"></Image>
</Grid>
</Window>
Now build and run the application.
The result looks like this. As you can see from Figure 2, all of my four controls are available on this window. As I mentioned earlier, you controls can have any functionality on them.