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, 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 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 is no other designer.cs files. As I mentioned before, WPF doesn’t take help 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.

* 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 experience in xml/HTML coding a little, 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 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)

Doesn’t seem as easy as the WPF version. It’s a long code then compared to WPF, even if 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 application. However, WPF provides a lot more rich features to improve the user experience than the 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 work. 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 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, then 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 which compare the code for WinForms and the 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";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 color in a WinForms application, we would use code like 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 ‘ForeGround’/’BackGround’ property instead of ‘ForeColor’/’BackColor’ property. Moreover, instead of ‘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 real, There are a lot more to learn/adapt with. To know more, you can use the following resources:

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

Happy Coding 🙂