WPF Part-1 Creating First WPF Application using Visual Studio 2008 or higher version

Posted by : Sudhir Chekuri Wednesday, 2 October 2013

Open Visual Studio
File - New - Project (Top Menu)
Select .NET Framework 3.5 from the dropdownlist
Select WPF Application from the list of applications available
Select the language for code behind (C# for this example)
Enter name as FirstWPF
Check the location to save the project and click on OK.

Now a new WPF project is created.
In Solution Explorer you can see there are files like
App.xaml - Used to hold all the configuration settings of the applications.
MainWindow - It is like windows form in windows application which contains two files MainWindow.xaml (Design Page ) and MainWindow.xaml.cs (C# Code page)
References - Contains added namespace references.
Properties - Contains information about this application.

Default XAML code in MainWindow.xaml page

<Window x:Class="FirstWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>

</Grid>
</Window>

Explanation

Window tag is the main tag in which all the xaml code is written.
xmlns stands for xml namespaces, used to add namespaces for your xaml page.
Even though namespaces are in http format there is no need of internet to execute this applications because WPF is same as windows applications(Smart client application).
Properties of the window can be added inside Window tag like Title, Height, ...
Grid is the xaml tag used to create Grid in Window.

About Grid
Grid contains rows and columns used for structured design.

Default C# code in MainWindows.xaml.cs page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace FirstWPF

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

Example with a button that displays message box with a click on it

Step 1: Drag and drop button to the design page.

Go to properties of button control and change the name to use it in code.
Name : Button1
Go to events of button and generate click event or with a double click on the button click event is created taking you to csharp code page.
Write the below csharp code in button click event to display message box.

MessageBox.Show("Done with first WPF App");

XAML code

<Window x:Class="FirstWPF.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

Explanation

button tag is used to create a button
Content is used to display that message on the button. (Same like text in windows app)
As it is dragged to a location properties like horizontalalignment, verticalalignment, margin, width are added the in xaml code. Click is the event and Button1_Click is the event name.

C# code