Freitag, 8. November 2013

WPF Tutorial Teil 2 - Eine erste WPF Anwendung

Nach der grundlegenden Einleitung möchte ich euch in diesem Post bei der Erstellung eurer ersten WPF Anwendung begleiten.
Dazu öffnen wir das Visual Studio und wählen "Neues Projekt - WPF Anwendung" aus. Das neue Projekt enthält dann verschiedene Dateien. Wichtig sind für uns erstmal nur die "MainWindow.xaml" und als Unterdatei davon die "MainWindow.xaml.cs". Erstere enthält den XAML Code zur Beschreibung der Programmoberfläche (die frühere Designer.cs), zweitere den eigentlichen C# Code.
Logischerweise ist das Formular am Anfang leer. Schauen wir uns kurz das XAML Gerüst dazu an:

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

Oben sehen wir den Namen den Applikation, darunter Definitionen, welche Spezifikiation von XAML wir verwenden. In der 4. Zeile werden Titel und Größe des Hauptfensters festgelegt, welches durch den Code zwischen <Window> und </Window> beschrieben wird. In diesem Raum können wir nun auch Steuerelemente etc. dem Formular hinzufügen.
WPF bietet verschiedene Layoutmöglichkeiten, um diese anzuordnen. Dazu mehr im nächsten Post, hier benutzen wir einfach Grid. Wie der Name es schon sagt, ist dieses ein Gitter, das heißt, Steuerelemente können in Felder eines Gitters angeordnet werden. So kriegen die Steuerelemente schon eine Gruppierung, verschieben wir das Gitter, bewegen sich die Steuerelemente mit.
Wir möchten nun 4 Steuerelemente, 2 Buttons und 2 Textfelder, dem Formular hinzufügen. Dafür konkretisieren wir erst einmal das Gitter, in dem wir 2 Reihen und Spalten anlegen (sodass dann jedes Steuerelement seine eigene Zelle bekommt). Dieses erledigen wir mit dem Code (Row steht für Zeile auf Englisch, Column für Spalte):

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

Einen Button fügen wir nun z.B. mit folgender Codezeile dem Formular hinzu:

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

Über die Eigenschaften Row und Column wird die Zelle des Buttons im Gitter festgelegt, die Eigenschaft Click beschreibt die Funktion, welche aufgerufen wird, wenn der Button geklickt wird. Bei Windows Forms Anwendungen konnte man das Steuerelement anwählen, und dann per Doppelklick auf das gewünschte Ereignis eine Behandlungsmethode hinzufügen. Hier tuen wir das durch Eintippen des Ereignisses, dann kann schon per Autovervollständigung automatisch eine neue Behandlungsroutine im Code hinzugefügt werden.
Der Code ist natürlich der gewohnte C# Code (in der "MainWindow.xaml.cs"):

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

Nun fügen wir die 3 anderen Steuerelemente hinzu, bei den Textboxen fügen wir eine Behandlung für das TextChanged Ereignis hinzu.
Der vollständige Code sieht dann so aus:

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");
        }
    }
}

Die fertige Anwendung sieht dann so aus:

Wie man sehen kann, passt sich das komplette Formular samt Inhalt Größenänderungen an.

 Das sollte für heute genügen. Herzlichen Glückwunsch, du hast gerade deine erste WPF Anwendung erstellt!

Kommentare:

  1. Danke für diese knackige Einführungsbeispiel.
    Mich wundert nur, warum vor dem eigentlichen Anzeigen des Fensters die beiden Meldungsfenster "TextBox 1 Changed" und "TextBox 2 Changed" am Bildschirm erscheinen.

    AntwortenLöschen
    Antworten
    1. Hey, gerne, freut mich!
      Das von dir beschriebene Verhalten ist normal so. Denn die Initialisierung der Textfelder wird auch als Änderung betrachtet, quasi von "nichts" auf "leer".

      Löschen