Friday, November 8, 2013

WPF Tutorial Part 2 - A first WPF application

After the basic introduction I want to accompangy you in this post by the creation of your first WPF application.
For that we open Visual Studio and select "New Project - WPF Application". The new project then contains multiple files. Important for us are first only "MainWindow.xaml" and the subfile "MainWindow.xaml.cs". The first contains XAML code to describe the form's appearance (previously in the Designer.cs), the second the actual C# code.
Of course the form is empty in the beginning. Let us look briefly at the XAML frame for that:

<Window x::Class="WpfApplication4.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>

    </Grid>
</Window>

On top we find the name of the application, followed by definitions, which specifications of XAML we are going to use. In the 4th line title and size of the main window are determined, which is described by all the code between <Window> and </Window>. In this area we also can add controls etc.
WPF supports mutliple ways of arranging these. More to that in the next post, here we simply use Grid. As the name already tells, this is a grid, which means that controls can be assigned to cells of the grid. That way the controls are already grouped, if the grid is moved, the controls are moved too.
We now want to add 4 controls, 2 buttons and 2 textboxes, to the form. For that we first specify a grid, in which we create 2 rows and columns (so that each controls gets a cell).
This is done by the code:

<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
</Grid.RowDefinitions>

A button can for example be added to the form with the following code:

<Button Name="btn1" Grid.Row="0" Grid.Column="0" Click="btn1_Click">Button 1</Button>

With the properties Row and Column the cell of the button in the grid can be determined, the property Click describes the function which is called when the button is clicked. In Windows Forms applications one could select the control, and then add an event handler by double clicking the event. Here this can be done be typing the event, then already with auto completion automatically a new handler can be added in the code.
The code of course is the standard C# code (in "MainWindow.xaml.cs"):

private void btn1_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Button 1");
}

Now we add the other 3 controls, for the textboxes we add a handler for the TextChanged event. The complete code looks as follows:

MainWindow.xaml:

<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>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
<Button Name="btn1" Grid.Row="0" Grid.Column="0" Click="btn1_Click">Button 1</Button>
<Button Name="btn2" Grid.Row="0" Grid.Column="1" Click="btn2_Click">Button 2</Button>
<TextBox Name="txt1" Grid.Row="1" Grid.Column="0" TextChanged="txt1_TextChanged">TextBox 1</TextBox>
<TextBox Name="txt2" Grid.Row="1" Grid.Column="1" TextChanged="txt2_TextChanged">TextBox 2</TextBox>
    </Grid>
</Window>

MainWindow.xaml.cs:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
   ///
   /// Interaktionslogik für MainWindow.xaml
   ///
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btn1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Button 1");
        }

        private void btn2_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Button 1");
        }

        private void txt1_TextChanged(object sender, TextChangedEventArgs e)
        {
            MessageBox.Show("TextBox 1 Changed");
        }

        private void txt2_TextChanged(object sender, TextChangedEventArgs e)
        {
            MessageBox.Show("TextBox 2 Changed");
        }
    }
}

The complete application then looks as follows:

As you can see, the whole form with its content adapts to size changes.

That should be enough for today. Congratulations, you created your first WPF application!

No comments:

Post a Comment