Post
Ask Question

Setting Up The Environment To Start With Your First WPF Application

Overview

 
WPF helps to customize the existing API's to develop rich user interface desktop application easily. By the end of this article, you will  learn the basic information about getting started with WPF. 
 

Why WPF? 

 
WPF over Win forms application:
 
 Win forms  WPF
Customizing the existing API's to develop applications with a Rich User Interface using winforms is difficult. The data is provided to user with improved styling, animation and special offers with the help of WPF.
Example: In Winforms application Navigation is provided by collection of menu. Modifying this menu with images and styles is difficult. Example: In WPF Navigation between the options can be customized like styles or any other format.
 
Prerequisites
 
Software Requirement - Visual Studio 2010 or above.
 
In this article, we are going to learn the environment setup for the creation of our first WPF Application named "VehicalPurchaseManagement" along with the description about each line of the built in code which we get after creating the application. So, lets get started 
 

Demo steps

 
Step 1
 
Open Visual Studio and click on File - New - Project - WPF application. Name the application as "" and click on OK button.
 
Step 2
 
In Solution Explorer, you will observe the below Folder structure.
 
  • App.xaml - Starting Point of your application.
  • App.config - Configuration file for your application.
  • References - Contains assemblies required to build the application
  • MainWindow.xaml - Default window created for designing your UI. 
Step 3
 
Double click on MainWindow.xaml and observer that MainWindow has the following views:
  • Design View
  • XAML View 
You can also view the Mainwindow.xaml.cs (Code behind file) by right clicking on Design/XAML view and select View Code.
 
Note
You can develop WPF-UI using C# and XAML. 
 
eXtensible Application Markup Language (XAML) is XML-based markup language from Microsoft to design the visual presentation of an application. 
 
Step 4
 
Right click on MainWindow.xaml in Solution Explorer and rename to "VehicalPurchaseManagement" and observe the window name changed as shown below,
 
 
Observe that only the file name is renamed and the class name doesn't change in "VehicalPurchaseManagement.xaml" and "VehicalPurchaseManagement.xaml.cs" .
 
In Solution Explorer, double click on the "VehicalPurchaseManagement.xaml.cs" and rename the class name to "VehicalPurchaseManagement1"; use quick option (Mouse hover on the class name and press Ctrl + ) to rename class name in all references.
 
Note
Use different names for class name and Namespace name; otherwise, after code build you will land in error stating - The app does not exist in the type 
 
Step 5
 
Open Mainwindow.xaml file and observe x:class. It is renamed as per the new window name as below,
  1. <Window x:Class="VehicalPurchaseManagement.VehicalPurchaseManagement1"  
  2.         xmlns="http://schema's.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schema's.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schema's.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schema's.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:VehicalPurchaseManagement"  
  7.         mc:Ignorable="d"  
  8.         Title="MainWindow" Height="450" Width="800">  
  9.     <Grid>  
  10.           
  11.     </Grid>  
  12. </Window>  
In "VehicalPurchaseManagement.xaml", we are able to see the below line of code- Let's have a look at what this means -
  • <Window x:Class="VehicalPurchaseManagement.VehicalPurchaseManagement" : Window is the default element. It contains attribute xmlns and xmlns:x and has default Properties Title, Height and Width.
  • xmlns=http://schema's.microsoft.com/winfx/2006/xaml/presentation : xmlns attribute specifically indicate the default xaml namespace. The default xaml namespace maps to the WPF namespace -http://schema's.microsoft.com/winfx/2006/xaml/presentation
  • xmlns:x=http://schema's.microsoft.com/winfx/2006/xaml : xmlns:x attribute indicates an additional XAML Namespace which maps the XAML language namespace http://schema's.microsoft.com/winfx/2006/xaml
  • Grid> </Grid> : Grid is the default layout in WPF. It supports other layouts as well.
 Additionally, rename Title property of a window to “VehicalPurchaseManagement” and set Height and Width of a window as shown below to achieve the required design.
  1. <Window x:Class="VehicalPurchaseManagement.VehicalPurchaseManagement1"  
  2.         xmlns="http://schema's.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schema's.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schema's.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schema's.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:VehicalPurchaseManagement"  
  7.         mc:Ignorable="d"  
  8.         Title="namespace VehicalPurchaseManagement" Height="600" Width="700">  
  9.     <Grid>  
  10.           
  11.     </Grid>  
  12. </Window>  
Step 6
 
Build and Run the project by pressing F5. You will get the below exception on the screen.
 
 
This exception has occurred due to the default value of StartupUri attribute in App.xaml is "MainWindow.xaml" (which is not available in the project as it is renamed to VehicalPurchaseManagement.xaml). Open App.xaml and change the StartupUri as shown below,
  1. <Application x:Class="VehicalPurchaseManagement.App"  
  2.              xmlns="http://schema's.microsoft.com/winfx/2006/xaml/presentation"  
  3.              xmlns:x="http://schema's.microsoft.com/winfx/2006/xaml"  
  4.              xmlns:local="clr-namespace:VehicalPurchaseManagement"  
  5.              StartupUri="VehicalPurchaseManagement.xaml">  
  6.     <Application.Resources>  
  7.            
  8.     </Application.Resources>  
  9. </Application>  
Then Build the project (Build->Build solution) and navigate to obj->Debug folder by right clicking on Project and choose 'Open Folder in File Explorer' and Observe the generated files,
 
  • App.i.cs & App.g.i.cs : The main method for WPF application is auto generated and can be found in one of the .cs file.
  • VehicalPurchaseManagement.g.resources : Used to get all required resources the for execution.
  • VehicalPurchaseManagement .baml : XAML file is compiled to the .BAML(Binary XAML) file. At runtime the framework engine extracts the .BAML file from assembly resources, parses it and creates a corresponding WPF Visual tree.
  • VehicalPurchaseManagement.exe : Application executable file.
Now Open App.g.i.cs file and observe that main method, InitializeComponent and Startupuri is configured here-
  1. [System.Diagnostics.DebuggerNonUserCodeAttribute()]  
  2.         [System.CodeDom.Compiler.GeneratedCodeAttribute("PresentationBuildTasks", "4.0.0.0")]  
  3.         public void InitializeComponent() {  
  4.              
  5.             #line 5 "..\..\App.xaml"  
  6.             this.StartupUri = new System.Uri("VehicalPurchaseManagement.xaml", System.UriKind.Relative);  
  7.              
  8.             #line default  
  9.             #line hidden  
  10.         }  
Step 7
 
Now Build and Run the project and observe successful execution as below,
 
 

Summary

 
In this article, I have discussed the steps which need to be performed while creating your first WPF Application. Also we covered the description about each line of the built in code which we get after creating the application. Please find the attached code for your better understanding and let me know if you have any questions/queries regarding the article. Cheers 


Similar Articles