C#

A Beginner’s Tutorial on WPF in C#

In this post on A Beginner’s Tutorial on WPF in C#, I will show how to create a simple Windows Presentation Foundation (WPF) application. As you already know, using C# we can create several types of applications. Therefore, we can develop a console application in C# as well as a GUI application. In this article, I will explain how to develop GUI by Creating WPF Applications.

What is WPF?

Basically, the Windows Presentation Foundation is an advanced approach for GUI development and we use it to create Desktop Client Applications. Design of WPF applications requires the use of Extensible Application Markup Language (XAML) that provides a declarative syntax for application programming. Actually, declarative programming requires you to describe what you want in the application rather than how you do it. In fact, the code is easier to maintain when you use declarative syntax like XAML.

Example of Creating a Simple Application in WPF

The following example shows how to create an application in WPF. For this purpose, you need to create a WPF App in Visual Studio. You will find two files – MainWindow.xaml and MainWindow.xaml.cs. Now, open the MainWindow.xaml and create a GUI consisting of a TextBlock, a Button, and a Label.

TextBlock is a fundamental control in WPF that displays only text that can be multiline. Also, if you want to add a border, then enclose the control within a Border tag. As evident from the example, WPF uses grids consisting of rows and columns to arrange the child controls. In this example, there is a single column and three rows where these three controls are added.

XAML File

<Window x:Class="WPFExample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFExample1"
        mc:Ignorable="d"
        Title="My First WPF Application" Height="350" Width="500" FontSize="30" FontFamily="Comic Sans MS">
    <Grid Margin="10, 10, 10, 10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border BorderBrush="DarkViolet" 
                BorderThickness="6" Width="450">
            <TextBlock Grid.Row="0" Grid.Column="0" 
                   Text="A Simple WPF Application"
                   Width="450"
                   Height="50"
                   Foreground="DarkViolet"
                   Background="LightPink"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontWeight="ExtraBlack"
                   TextAlignment="Center"/>
        </Border>
        <Border Grid.Column="0" Grid.Row="1"
                BorderBrush="DarkGreen"
                BorderThickness="6" Width="450">
            <Button Grid.Column="0" Grid.Row="1"
                    Foreground="DarkGreen"
                    Background="LightGreen"
                    FontWeight="ExtraBlack"
                    Click="MyFunction">
                Click Me!
            </Button>
         </Border>
        <Border Grid.Column="0" Grid.Row="2"
                BorderBrush="Navy"
                BorderThickness="6" Width="450">
            <TextBox Grid.Column="0" Grid.Row="1"
                    Foreground="DarkBlue"
                    Background="LightBlue"
                    FontWeight="ExtraBlack"
                    TextAlignment="Center"
                    TextWrapping="Wrap"
                    AcceptsReturn="True"
                    AcceptsTab="True"
                    SpellCheck.IsEnabled="True"
                    Height="165"
                    Name="t1"
                    >
                Click on the above Button
            </TextBox>
        </Border>
    </Grid>
</Window>

C# Code

You can write following code in the event handler function of the button added in the above in the above XAML file. As evident, when you click on the button, the following function changes the Text property of the TextBox.

private void MyFunction(object sender, RoutedEventArgs e)
        {
            t1.Text = "Button Clicked!";
        }

Output

When you run the above application, it will show you following output.

A Simple Application in WPF
A Simple Application in WPF

Benefits of WPF over Windows Forms Applications

WPF has a rich library. You can incorporate animation models in your storyboard. Also, it efficiently separates the programming logic from the user interface (UI).

Summary

In this article on A Beginner’s Tutorial on WPF in C#, I have explained how to create a simple WPF application. In this application, we create a grid consisting of three rows and one column. Further, the first row consists of a TextBlock, the second row consists of a Button, and the third row has a TextBox to show the output when the user clicks the button.

Hence, we can create GUI applications easily and quickly using WPF by separating the code from the layout of controls.


Related Topics

Everything about Tuples in C# and When to Use?

Linear Search and Binary Search in C#

Creating Jagged Arrays in C#

Learning Indexers in C#

Understanding Method Parameter Modifiers in C#

Object Initializers in C#

Examples of Static Constructors in C#

When should We Use Private Constructors?

C# Practice Questions

C# Basic Examples

Private and Static Constructors in C#

Constructors in C#

C# Arrays

C# Examples

How to Create a C# Console Application

Leave a Reply

Your email address will not be published. Required fields are marked *