WPF Tutorial - Introduction

Krzysztof Mossakowski Tutorials

Goals to demonstrate:

• The simplest WPF application generated by Visual Studio.
• Adding some content to windows using Visual Studio Designer.
• The XBAP application.

Steps:

1. Create a new WPF Application project in Visual Studio 2008, name it 'WpfApp':
   
2. Investigate files created by Visual Studio.
   • Notice that not all references added automatically to the project are used, e.g. references to System.Data.* can be removed if there are no plans to use ADO.NET:
     
   • Investigate the App.xaml and App.xaml.cs files, where the application's object is defined.
     • Be sure to understand all dependencies written in the App.xaml file:
       <Application x:Class="WpfApp.App"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          StartupUri="Window1.xaml">
           <Application.Resources>
               
           </Application.Resources>
       </Application>
       • The application's class is named App and is defined in the WpfApp namespace.
       • The http://schemas.microsoft.com/winfx/2006/xaml/presentation namespace is declared as default for the entire XAML document, so its elements can be used without a prefix.
       • The http://schemas.microsoft.com/winfx/2006/xaml namespace is declared using the x prefix.
       • The startup window of the application is an object the class defined in the Window1.xaml file.
     • Note that some properties of the application can be modified using the standard Properties window:
       
       (If your Properties window looks differently, check if the Service Pack 1 is installed in Visual Studio 2008.)
     • The application's class has also some events available for subscribing:
       
     • Take a look into the App.xaml.cs file. The class definition is empty. Add a handler for the Exit event:
       
       • Show the message box in the handler:
         private void Application_Exit(object sender, ExitEventArgs e)
         {
             MessageBox.Show("Thank you!");
         }
     • Run the application, enjoy the window and the message box displayed after the window is closed.
   • Investigate the Window1.xaml and Window1.xaml.cs files.
     • Notice interesting features of the Visual Studio XAML Designer:
       
       • synchronization between the Design and the XAML view,
       • possibility to change the orientation of panes ('-' and '|' small buttons),
       • the Document Outline window (a small button in the left bottom corner),
       • a list of children controls (the bottom line of the window),
       • a slider for changing the zoom level and the 'Zoom to Fit' button.
     • Take a look into the Window1.xaml.cs file
       • The InitializeComponent method is automatically generated when the application compiles (its source code can be viewed after jumping to its definition using the F12 key).
         • Essentially, all the InitializeComponent method does is to call the LoadComponent method which extracts the BAML (the compiled XAML) from the assembly and uses it to build the user interface. As it parses the BAML, it creates each control object, sets its properties, and attaches any event handlers.
3. Add content to the window using the designer and XAML code.
   • Define two rows in the Grid control already defined in the Window1.xaml file:
     <Window x:Class="WpfApp.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition />
                 <RowDefinition />
             </Grid.RowDefinitions>
         </Grid>
     </Window>
   • Add a Label and a Button to the upper row:
     <Window x:Class="WpfApp.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition />
                 <RowDefinition />
             </Grid.RowDefinitions>
             <Label Name="label1"
                    Height="28" Margin="12,0,0,91"
                    VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="119">
                 Defined in the desiger
             </Label>
             <Button Name="button1" VerticalAlignment="Top"
                    Margin="12,38,123,0" Height="23" >
                 My first button
             </Button>
         </Grid>
     </Window>
   • Double click the button to generate a handler for the Click event.
     • Add code showing a message box in the event handler:
       private void button1_Click(object sender, RoutedEventArgs e)
       {
           MessageBox.Show("Yes, my first button was pressed!");
       }
     • Note the Click attribute added automatically to the button's node in XAML:
       <Button Name="button1" VerticalAlignment="Top"
               Margin="12,38,123,0" Height="23" Click="button1_Click">
           My first button
       </Button>
   • Run the application and admire the window's content.
4. Add some content to the window using the source code.
   • Add the folowing code to the Window1 class:
     private void InitializeSecondRow()
     {
         Label label = new Label();
         label.Content = "Defined in source code";
     
         Grid.SetRow(label, 1);
         grid.Children.Add(label);
     
         Button button = new Button();
         button.Content = "My second button";
         button.Margin = new Thickness(25);
         button.Click += new RoutedEventHandler(secondButton_Click);
     
         Grid.SetRow(button, 1);
         grid.Children.Add(button);
     }
     
     void secondButton_Click(object sender, RoutedEventArgs e)
     {
         MessageBox.Show("My second button was pressed!");
     }
   • Call the InitializeSecondRow method after calling the InitializeComponent method in the constructor.
   • To compile the code successfully, the Grid control existing in the window must be named 'grid':
     <Grid Name="grid">
   • Run the application:
     
5. Add a new project of the WPF Browser Application type, name it 'WpfBrowserApp':
   
   • Investigate files generated by Visual Studio. Notice that instead of a window, a page (i.e. a class derived from the Page class) was generated.
   • Add content to the Page1.xaml file, e.g.:
     <Page x:Class="WpfBrowserApp.Page1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Page1">
         <Grid>
             <Label Height="28"
                    HorizontalAlignment="Left"
                    Margin="25,26,0,0"
                    Name="label1"
                    VerticalAlignment="Top"
                    Width="120">
                 Just a text
             </Label>
             <Button Margin="25,100,0,0"
                    Name="button1"
                    Height="23"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Width="75"
                    Click="button1_Click">
                 Button
             </Button>
             <TextBox Height="23"
                      HorizontalAlignment="Left"
                      Margin="25,60,0,0"
                      Name="textBox1"
                      VerticalAlignment="Top"
                      Width="120" />
         </Grid>
     </Page>
   • Add necessary handler for events, e.g.:
     private void button1_Click(object sender, RoutedEventArgs e)
     {
         MessageBox.Show("Your input is: " + textBox1.Text);
     }
   • Run the application:
     
     • Notice the following issues:
       • the application is run in the default web browser, it is not limited to the Internet Explorer browser,
       • the name of the application is WpfBrowserApp.xbap
         • XBAPs are page-based applications that run inside the browser window, have limited permission, and are not installed,
         • the WpfBrowserApp.xbap file can be found in the output project's directory,
       • the upper part of the page containing two additional buttons with arrows is added automatically to allow to navigate between pages.

[Source code]