Beginning With WPF Application In C#.NET


 Beginning With WPF Application In C#.NET  
 


If you are a .NET web application developer and you need to work on a desktop based application suddenly, then you might be a little surprised by see the application presentation layer structure, the win forms and their code behind files. Because they aren’t similar to Microsof’t web application platform, Asp.net forms. Most of the forms designs are created by a .Designer.cs file where c# codes are responsible to create the GUI. However, Microsoft’s another step to improve the application development architecture is the release of WPF, that not only improves the user interface development on .NET in desktop based applications, but also helps developers to get a platform for XML based desktop GUI creations. Today, my goal is to deliver a easy to understand WPF tutorial to you with c# code examples where needed.

What Is WPF?

WPF = Windows Presentation Foundation. This is the system to take care of the graphical user interface. Its using DirectX engine for rendering instead of GDI(Graphical device interface). Besides, in technical or development level implementation, it also has the huge change as it is using XML oriented structures where GUI objects,attributes are presented with XML type tag,attributes etc. It doesn’t requires C# based code for the creation/initialization of the graphical user interface. But that doesn’t mean either that we won’t be able to use c# to create/manipulate controls, of course we will be able to do that.Also, Silverlight utilizes wpf for embedded web controls.

Walk through a very basic WPF Application Development:

* Open visual studio(I am using visual studio 2010), gor for “File->New->Project”, then choose ‘WPF Application’ under ‘Visual C#’. Enter a name/path of your application and press ‘OK’.
Creating WPF Application

* After successfully creating the project, you will see its structure mostly similar to windows form application projects, only difference is the wpf based window, .xaml files. Remember, MainWindow.xaml is the entry point of your wpf application, it doesn’t have any program.cs to call the Mainwindow.xaml to be executed. Also, you will notice that, there is no other designer.cs files, as I mentioned before, wpf doesn’t take helps from c# for rendering its ui, it uses xaml code. on the ‘MainWindow.xaml’ , by default you will be able to see both the window design and the xaml code in a split fashion, you can choose another mode if you like.
wpf window

* Open ‘toolbox’ and drag few controls to the window. Here is a sample code that i got after dragging a textbox, a label and a button:

<Window x:Class="WpfApplication1.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>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="224,76,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
        <Label Content="Label" Height="28" HorizontalAlignment="Left" Margin="224,42,0,0" Name="label1" VerticalAlignment="Top" />
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="224,116,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
    </Grid>
</Window>

You see!! How simple the generated code is!!! If you have experience is xml/html coding a little, you will find this as easy like drinking water :D . If we compare this to the traditional win form application, following the code samples that generated when doing the same tasks in a win form project:

 #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.button1 = new System.Windows.Forms.Button();
            this.label1 = new System.Windows.Forms.Label();
            this.textBox1 = new System.Windows.Forms.TextBox();
            this.SuspendLayout();
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(396, 152);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(75, 23);
            this.button1.TabIndex = 0;
            this.button1.Text = "button1";
            this.button1.UseVisualStyleBackColor = true;
            // 
            // label1
            // 
            this.label1.AutoSize = true;
            this.label1.Location = new System.Drawing.Point(412, 75);
            this.label1.Name = "label1";
            this.label1.Size = new System.Drawing.Size(35, 13);
            this.label1.TabIndex = 1;
            this.label1.Text = "label1";
            // 
            // textBox1
            // 
            this.textBox1.Location = new System.Drawing.Point(346, 110);
            this.textBox1.Name = "textBox1";
            this.textBox1.Size = new System.Drawing.Size(100, 20);
            this.textBox1.TabIndex = 2;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(542, 373);
            this.Controls.Add(this.textBox1);
            this.Controls.Add(this.label1);
            this.Controls.Add(this.button1);
            this.Name = "Form1";
            this.Text = "Form1";
            this.ResumeLayout(false);
            this.PerformLayout();

        }

        #endregion

Doesn’t seem as easy like the wpf version, right? Its long code then compared to wpf, even you can’t see them along with the design also, you will have to open the .designer.cs file to see and find them.

* Now, If you run our wpf application, you will see the same output as we did on a win form applications. However, wpf provides a lot more rich features to improve the user experience than win form application.

XAML Tips For WPF:

Besides drag and drop, you can easily create controls/set styles by the xaml code window. But, in that case you should know which tag to use for which controls. Also, how the attributes works. Here are some basic points to remember:

* Remember to keep controls inside a portion. This is because, if you don’t use grid, you won’t have control to change the location of the controls.

* ‘Margin’ is the attribute that responsible for setting the location/position(Left,Top,Right,Bottom) of the corresponding control.

* If you are using a container(Like ‘GroupBox’), and some controls inside it(Like ‘Button’), then, the margin property of the button should position from inside the container, not from the main form’s root position.

Migrating From WinForm To WPF:

However, if you are a desktop winform application developer, then you will find several things changed(specially properties of controls) that you usually want to set from the c# code. Here are few examples which compares the code for winform and corresponding wpf version with c#.

* In case of win forms application, we could use the ‘Text’ Property for label,textbox,button etc control for showing the text on those controls:

label1.Text = "test label text";
textBox1.Text = "test textbox text";
button1.Text = "test button text";

On the other hand, in case of wpf, many controls uses new ‘Content’ property to do the same task. If we convert the above win form code to a wpf code, then it should be like as follows:

label1.Content= "test label text";
textBox1.Text = "test textbox text";
button1.Content = "test button text";

Only textbox is still using ‘text’ property, button and label switched to ‘Content’ property.

* If we wanted to set a foreground/background color in a winform applications, we would use code like as follows:

 textBox1.ForeColor = Color.BlueViolet;
 textBox1.BackColor = Color.Aqua;

On the other hand, in case of WPF Applications, we will have to use ‘ForeGround’/’BackGround’ property instead of ‘ForeColor’/’BackColor’ property. Moreover instead of ‘Color’ class, here we will need to utilize a new ‘Brushes’ class for similar task. Here is the sample code for WPF version of the above code:

textBox1.Foreground = Brushes.BlueViolet;
textBox1.Background = Brushes.Aqua;

References:

My goal of this wpf tutorial was to give you a very basic idea and usage in applications.In real, There are a lot more to learn/adapt with. To know more, you can use the following resources:

Happy Coding :)

Trackbacks

  1. [...] WPF Property Grid(WPG) Tutorial In C# Posted on April 19, 2011 Tweet Property grid in WPF helps us in generating UI controls from a c# class. Although. there are several projects and releases out there for this purpose, I am going to introduce one of the most popular open source once, hosted on codeplex, wpg(WPF Property Grid). I am assuming that, you have basic wpf knowledge. If no, please consider reading my another article about getting started with wpf in c#. [...]

Leave a Reply