How to: Use UserControls in WPF XAML Windows

I created a UserControl called: “StatusBarControl” and it has a StatusBar contol with the following contols:  UserNameTextBlock, a  Lable for reporting progress, a ComboBox for displaying Styles of the form so the user can change them using the my.settings.UserStyle string,  and a StatusBar for showing progress. 

You first have to put in the header of the XAML Window the Following

In order to use a local UserControl you have to define the NameSpace of the Project that the Control resides in.


Code Snippet
  1. <Window x:Class="MyProjectWindow"
  2.     xmlns=";
  3.     xmlns:x=";
  4.     WindowStartupLocation="CenterOwner"
  5.     ResizeMode="NoResize"
  6.     Title="My Project" Height="480" Width="647"
  7.       xmlns:local="clr-namespace:MyProjectWPF_GUI"  
  8.     Name="MyProject">


Next you create the UserControl as a UserControl in your project.  My UserContol is called “StatusBarControl”.  Then you assign it its local name.

<local:StatusBarControl x:Name=”StatusBarControl…  />

Code Snippet
  1.         <StackPanel VerticalAlignment="Top" Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" Height="26" Margin="0,4,0,0" Name="StackPanel3" Width="526">
  2.             <Button Name="GetSmartIndexButton" Width="132" Height="23" ToolTip="You must get Smart Index Data before you can Submit to Mobius">Get Smart Index Data</Button>
  3.             <Button Name="ClearFieldsButton" Margin="3,0,0,0" Width="82" Height="23" ToolTip="Clears all Fields on this Tab.">Clear Fields</Button>
  4.             <Button Name="SubmitButton" Margin="3,0,0,0" Height="23" Width="116" ClickMode="Release" ToolTip="Submit the images to Mobius">Submit to Mobius</Button >
  5.         </StackPanel>
  7.         <!–<Rating Height="100" HorizontalAlignment="Right" Margin="0,0,-285.057,-48.343" Name="Rating1" VerticalAlignment="Bottom" Width="200" xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" />–>
  8.         <local:StatusBarControl x:Name="StatusBarControl" HorizontalAlignment="Left" Grid.Row="3" Height="30" VerticalAlignment="Bottom" Grid.ColumnSpan="5" Width="655" Margin="-12,0,0,-5" />
  10.     </Grid>
  11. </Window>


It reference the UserControl File called “StatusBarControl.xaml” under a directory “UserControls” in the Project “MyProjectWPF_GUI”


Code Snippet
  1. <UserControl x:Class="StatusBarControl"
  2.              xmlns=";
  3.              xmlns:x=";
  4.              xmlns:mc=";
  5.              xmlns:d=";
  6.              mc:Ignorable="d"
  7.              d:DesignHeight="25" d:DesignWidth="650">
  8.     <Grid Height="31" Width="609">
  9.         <Grid Height="25" VerticalAlignment="Top">
  10.             <StatusBar Height="25" Name="statusBar1" VerticalAlignment="Top" Margin="-20,0,-41,0" />
  11.             <Label Content="Progress" FlowDirection="RightToLeft" Margin="0,0,41,0" Name="ProgressLabel" HorizontalAlignment="Right" Width="390" Visibility="Hidden" Height="25" VerticalAlignment="Top" />
  12.             <!–</StackPanel>–>
  13.         </Grid>
  14.         <StackPanel Orientation="Horizontal" Height="25" Name="StackPanel1" Margin="0,1,433,0" VerticalAlignment="Top">
  15.             <ComboBox DataContext="{Binding}" Height="23" ItemsSource="{Binding}" Name="StylesComboBox" Text="Hello" Visibility="Collapsed" Width="121" />
  16.             <Label Content="User: " Height="24" Name="UserNameTextBlock" Width="50" />
  17.         </StackPanel>
  18.     </Grid>
  19. </UserControl>


To update/refresj  the “StatusBarControl” you will need the Application.DoEvents that is in the System.Windows.Forms NameSpace…  System.Windows.Forms.Application.DoEvents()

Code Snippet
  1.     'In order to get the following code to update the color and the cursor you have to call the System.Windows.Forms.Application.DoEvents()
  2.         Me.Background = New SolidColorBrush(My.Settings.WaitFormColor)
  3.         Me.Cursor = Cursors.Wait
  4.         'Application.DoEvents()
  5.         System.Windows.Forms.Application.DoEvents()


That is it.  If you have any Questions, please leave me a comment.


Tags: , , , ,

One Response to “How to: Use UserControls in WPF XAML Windows”

  1. VISHU Says:

    Thanks for this its to helpfull..:)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: