• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Featured
    • C# Tutorials
      • LinQ Tutorials
      • Facebook C# API Tutorials
    • PHP Tutorials
      • CodeIgniter Tutorials
    • Amazon AWS Tutorials
  • Categories
    • Programming
    • Development
    • Database
    • Web Server
    • Source Control
    • Management
    • Project
  • About
  • Write
  • Contact

CodeSamplez.com

Programming, Web development, Cloud Technologies

You are here: Home / Development / Beginning With WPF Application In C#.NET

Beginning With WPF Application In C#.NET

January 30, 2011 by Rana Ahsan 4 Comments

WPF C# Tutorials

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:

Creating WPF Application

* 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.’

wpf window

* 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 🙂

Share If Liked

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

You may also like

Filed Under: Development Tagged With: .net, c#, wpf

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.
Github: ranacseruet

Reader Interactions

Comments

  1. MHD ASIF says

    April 28, 2015 at 9:59 am

    Good short tutorial 😀

    Reply
  2. shyam says

    May 12, 2015 at 8:25 am

    Good One…

    Reply
  3. Anup says

    March 29, 2016 at 8:23 am

    Really a good precise short intro about WPF. I got quite a few answers of my basic query. Keep the good work rolling.

    Reply

Trackbacks

  1. Getting Started With property grid in WPF/C# | codesamplez.com says:
    April 19, 2011 at 3:03 am

    […] 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#. […]

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Follow Us

  • Twitter
  • Facebook

Top Posts & Pages

  • How To Work With JSON In Node.js / JavaScript
    How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
    PHP HTML5 Video Streaming Tutorial
  • How To Work With C# Serial Port Communication
    How To Work With C# Serial Port Communication
  • Facebook C# API Tutorials
    Facebook C# API Tutorials
  • LinQ Query With Like Operator
    LinQ Query With Like Operator
  • Using Supervisord Web Interface And Plugin
    Using Supervisord Web Interface And Plugin
  • Utilizing Config File In C#.NET Application
    Utilizing Config File In C#.NET Application
  • Getting Started With UDP Programming in Java
    Getting Started With UDP Programming in Java
  • Generate HTTP Requests using c#
    Generate HTTP Requests using c#
  • How To Use Hotkeys/Keyboard Events In WPF Application Using C#
    How To Use Hotkeys/Keyboard Events In WPF Application Using C#

Recent Posts

  • Building Auth With JWT – Part 2
  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read

Tags

.net angularjs apache api audio auth authenticatin aws c# cloud server codeigniter deployment docker doctrine facebook git github golang htaccess html5 http javascript jwt linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty socket.io tfs tips unit-test utility web application wordpress wpf

Footer

Archives

Follow Us

  • Twitter
  • Facebook

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Copyright © 2023