Posts Tagged ‘UserControls’

How to: Use UserControls in WPF XAML Windows

February 28, 2011

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.