Tutorials » WPF tutorials »

Your First WPF Application


This article explains how to create a WPF project in Visual Studio IDE. It is a simple application with a button and a message box showing a message on button click.



In the previous chapters you learn how to install and what are the elements in the WPF IDE. In this chapter you will learn how to develop a simple application in WPF. So let’s begin. Here the application is written in C#.

Welcome To WPF Application Development


--> First in the Visual Studio IDE choose to create a new application. It will give you the following window.

New Project

--> In this window in the Project Type pane choose your desired language and in the Template pane choose "WPF Application". Then give your application a name and click n the OK button. It will take you to the WPF Designer window.

--> First add a button from the toolbox to your window. Set its name property to "btnClick" and caption property to "Click Me". I have set its background color property and boarder properties. You can also set other properties.

--> Then change the form’s title property to "Welcome To WPF". You can set the form’s boarder, background, opacity and other properties.

--> To get your work quicker copy and paste the following XAML file to your XAML editor. Only copy the code inside the Grid element. The Window element will be generated by default. You can refer to the XAML document.

<Window x:Class="Welcome.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Welcome To WPF" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="0*" />
<ColumnDefinition Width="274*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Margin="72,103,64,118" Name="btnClick" Grid.Column="2" Click="btnClick_Click" ForceCursor="True"
RenderTransformOrigin="23,34" Background="LimeGreen" BorderBrush="Chartreuse" OpacityMask="CadetBlue">
<Button.BitmapEffectInput>
<BitmapEffectInput />
</Button.BitmapEffectInput>
<Button.BitmapEffect>
<DropShadowBitmapEffect Color="Chartreuse" />
</Button.BitmapEffect> Click Me</Button>
</Grid>
</Window>

--> Now your design is ready and you can now code it. This application will just show a message on the message box when the "Click Me" button is pressed. So now double click on the button to show up the code editor. In the click event handler of the button add the following code.

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 Welcome
{
///
/// Interaction logic for Window1.xaml
///

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}

private void btnClick_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Welcome To World Of WPF");
}
}
}

--> Now your first application is ready. Save it and click on the select "build" from the build menu. Then run your application by selecting "Start Debugging" from the debug menu. You can also press F5 key to run your application or click on the play button in the tool bar.

The window you just created will appear with a button. You can see that the button starts glowing when you put the mouse on it. Now click on the button. It will give you a message box showing a message as in the below figure.

Welcome

To close the application first click on the OK button of the message box and then press the close button of the window. It is just a simple application to show you how WPF differ from Window Applications.





Next Chapter: Some Important Classes and Namespaces
Previous Chapter: The WPF Designer
More Chapters: WPF Tutorials
More Tutorials: Tutorial Index



Top Contributors
Today
    Last 7 Daysmore...

    Awards & Gifts
     
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India