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 to see the application presentation layer structure, the win forms and the code behind files because they aren’t similar to Microsoft web application platform, Asp.net forms. Most of the form designs are created by a .Designer.cs file, where c# codes are responsible for creating the GUI. However, Microsoft’s other step to improve the application development architecture is the release of WPF, which not only improves the user interface development on .NET in desktop-based applications but also helps developers get a platform for XML-based desktop GUI creations. Today, my goal is to deliver an 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. It uses the DirectX engine for rendering instead of GDI(Graphical device interface). Besides, in technical or development level implementation, it also has a huge change as it uses XML-oriented structures where GUI objects, and attributes are presented with XML-type tags, attributes etc. It doesn’t require C#-based code for the creation/initialization of the graphical user interface. But that doesn’t mean 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), go for “File->New->Project”, then choose ‘WPF Application’ under ‘Visual C#.’ Enter the name/path of your application and press ‘OK.’

* After successfully creating the project, you will see its structure most similar to Windows from application projects; the only difference is the WPF-based window and .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 are no other “designer.cs” files. As I mentioned before, WPF doesn’t get help from c# to render 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.

* Open ‘toolbox’ and drag a 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>
Code language: HTML, XML (xml)

You see!! How simple the generated code is!!! If you have a little experience in XML/HTML coding, you will find this as easy as drinking water :D. If we compare this to the traditional win form application, following the code samples that are 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();

        }

        #endregionCode language: PHP (php)

It doesn’t seem as easy as the WPF version. It’s a long code compared to WPF. Also, you can’t see them along with the design; 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 WinForm application. However, WPF provides a lot more rich features to improve the user experience than the WinForm application.

XAML Tips For WPF:

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

* Remember to keep controls inside a portion. Without a grid, you won’t be able to change the location of the controls.

* ‘Margin’ is the attribute that is 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, you will find several things changed(especially properties of controls) that you usually want to set from the C # code. Here are a few examples that compare the code for WinForms and the corresponding WPF version with C #.

* In the case of the Winforms application, we could use the ‘Text’ Property for the 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";Code language: JavaScript (javascript)

On the other hand, in case of wpf, many controls use the 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";Code language: JavaScript (javascript)

Only the textbox still uses ‘text’ property, the button and label are switched to ‘Content’ property.

* If we wanted to set a foreground/background colour in a WinForms application, we would use code as follows:

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

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

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

References:

My goal for this WPF tutorial was to give you a very basic idea and usage in applications. In reality, there is a lot more to learn/adapt to. To know more, you can use the following resources:

• WPF MSDN Documentation
• Basic Overview of XAML Structure
• WPF Tutorials

Happy Coding 🙂