Grafische Anwendung ( WPF )

Grafische Anwendung ( WPF )

Description: In diesem letzten Video lernt ihr die Grundlagen im Umgang mit XAML in Verbindung mit C#. Als praktisches Beispiel wird ein kleiner Taschenrechner erstellt.

Duration: PT19M42S

ContentUrl: http://video.ch9.ms/ch9/6df5/1a9f5c7f-fa45-413f-bb5c-471d07596df5/08GrafischeAnwendungen_mid.mp4

EmbedUrl: https://channel9.msdn.com/Series/Programmieren-fuer-Beginner-mit-C-/08-Grafische-Anwendungen/player

UploadDate: 2014-09-30T12:52:00+02:00

Thumbnail

Inhaltszusammenfassung

Hierbei geht es um eine grafische Anwendung, die vom Benutzer bedient werden kann. Das Ziel dieser Übung ist es, einen kleinen Taschenrechner zu erstellen. Um eine grafische Anwendung zu programmieren, werden hier die Grundlagen von XAML in Verbindung mit C# erklärt.


Ergebnis der Übung

WPF Taschenrechner Übungsergebnis

Durchführung

Beispielprogramm

Da wir jetzt eine grafische Anwendung erstellen und keine Konsolenanwendung, erstellen wir jetzt ein anderes Projekt. Klicke dazu auf "Neues Projekt" und wähle statt Konsolenanwendung diesmal WPF-Anwendung. Gib dem Projekt noch einen Namen und klicke auf "OK".

Erstellen eines neuen WPF-Projekts

Wurde das Projekt erstellt, scheint folgendes Fenster auf dem Bildschirm auf, dass das Aussehen unserer Anwendung anzeigt.

Startansicht des WPF-Projekts und Position der Werkzeugkiste

In der linken Leiste gibt es einen Werkzeugkasten, den wir später verwenden werden. Falls sich dort kein Werkzeugkasten befindet, drückt ihr auf das Menü Item "ANSICHT" und wählt "Werkzeugkiste". Starte erst einmal das Programm ( grüner Knopf "Starten" drücken ). Wie man sieht, wird in unserem Programm noch nichts angezeigt. Das Erste was wir ändern, ist der Titel unseres Programms. Dazu ändert man im XAML-Code, also dem Codestück, das auf obigem Screenshot unter dem Grafikfenster angezeigt wird, den Text von Title="MainWindow" auf Title="Unser Fenster". Führt man das Programm aus, sieht man den neuen Fenstertitel. Befüllen wir nun unser Fenster.
Um uns erstmals mit der Umgebung vertraut zu machen, fangen wir einfach an. Klicke auf den Werkzeugkasten und ziehe ein Label mit gedrückter Maustaste in das Fenster.

Erstellen eines Labels durch die Werkzeugkiste

<Label Content="Label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>

Content steht für den Text, der angezeigt wird. Der Margin legt die Abstände zwischen dem Text und dem Fensterrand in dem Format: "Linker Abstand, Obiger Abstand, Rechter Abstand, Untere Abstand" fest und ist in Pixel angegeben. Es gäbe noch viel mehr Attribute, aber dazu später. Ändern wir den dargestellten Text auf "Beispieltext" indem wir in das Content-Attribut unseren Text schreiben.

<Label Content="Beispieltext" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>

Klickt man mit der Maustaste auf das Label im Fenster, kann man es mit gedrückter Maustaste auf eine andere Position verschieben. Nun füge über die Werkzeugkiste ein Textfeld (TextBox) und einen Knopf (Button) ein. Folgendes müsste jetzt in deinem "Window" im XAML-Code stehen:

<Grid>
<Label Content="Label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="22" Margin="10,41,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="182"/>
<Button Content="Button" HorizontalAlignment="Left" Height="28" Margin="10,68,0,0" VerticalAlignment="Top" Width="182"/>
</Grid>

Wichtige Attribute davon sind:
Bei der TextBox steht das Attribut "Text" für den Inhalt des Textfeldes und bei dem Button ist es "Content". Bei TextBox und Button gibt es die Attribute "Width" und "Height". Width steht für die Breite des Feldes und wird in Pixel angegeben. Height steht für die Höhe des Feldes und wird in Pixel angegeben.

Ändern wir nun den Inhalt des Textfeldes indem wir in das Text-Attribut folgendes schreiben: "Hier Inhalt einfügen!" Und in das Content-Attribut schreiben wir "Klick mich!"

<Grid>
<Label Content="Beispieltext" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<TextBox HorizontalAlignment="Left" Height="22" Margin="10,41,0,0" TextWrapping="Wrap" Text="Hier Inhalt einfügen!"
VerticalAlignment="Top" Width="182"/>
<Button Content="Klick mich!" HorizontalAlignment="Left" Height="28" Margin="10,68,0,0" VerticalAlignment="Top" Width="182"/>
</Grid>

Wechselt man in den Tab "MainWindow.xaml.cs" sieht es eher leer aus. Hierin befindet sich in späterer Folge die Programmlogik. Wenn man das Programm jetzt ausführt, würde der Klick auf den Knopf nichts bewirken. Um dies jetzt zu ermöglichen, wechselt man in die "MainWindows.xaml" zurück und macht einen Doppelklick auf den Knopf. Wie man sieht wurde eine neue Funktion erstellt, die die Logik für den Knopfdruck beinhalten wird. Zum Beispiel soll sich der Text in dem Textfeld nach dem Knopfdruck ändern. Noch haben wir aber keinen Zugriff auf das Textfeld. Zuerst müssen wir dem Textfeld einen Namen zuweisen:

<TextBox Name="TextBox_1" HorizontalAlignment="Left" Height="22" Margin="10,41,0,0" TextWrapping="Wrap" Text="Hier Inhalt einfügen!"
VerticalAlignment="Top" Width="182"/>

Nachdem wir dem Textfeld einen Namen zugewiesen haben, können wir von unserem Code aus über diesen Namen auf die Textfeld-Variable zugreifen.

private void Button_Click(object sender, RoutedEventArgs e)
{
// Text der Textbox ändern
TextBox_1.Text = "Hallo!";
}

Beachte: Den Text ändert man nicht wie sonst über Variablenname = Text; sondern über <Variablenname>.<Attribut> = <Text>



Taschenrechner

Erstelle wie in der vorherigen Übung gelernt, das Aussehen des Taschenrechners, indem man die Items aus der Werkzeugkiste in das Fenster zeiht. Vergib zusätzlich entsprechende Namen an die Textfelder und weise jedem Knopf, Textfeld und dem Label einen Text zu. Hat man alles Nötige von der Werkzeugkiste in das Fenster gezogen und Text und Namen vergeben, sowie die Größen geändert, sollte der XAML-Code folgendermaßen aussehen:

<Grid>
<Label Content="Beispieltext" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<TextBox Name="TextBox_1" HorizontalAlignment="Left" Height="22" Margin="10,41,0,0" TextWrapping="Wrap" Text="Hier Inhalt einfügen!"
VerticalAlignment="Top" Width="182"/>
<Button Content="Klick mich!" HorizontalAlignment="Left" Height="28" Margin="10,68,0,0" VerticalAlignment="Top" Width="182"
Click="Button_Click"/>
<Label Content="Taschenrechner" HorizontalAlignment="Left" Margin="10,128,0,0" VerticalAlignment="Top"/>
<TextBox Name="Wert_1" HorizontalAlignment="Left" Height="22" Margin="10,167,0,0" TextWrapping="Wrap" Text="Wert"
VerticalAlignment="Top" Width="35"/>
<TextBox Name="Wert_2" HorizontalAlignment="Left" Height="22" Margin="67,167,0,0" TextWrapping="Wrap" Text="Wert"
VerticalAlignment="Top" Width="35"/>
<TextBox Name="Ergebnis" HorizontalAlignment="Left" Height="22" Margin="157,167,0,0" TextWrapping="Wrap" Text="Ergebnis"
VerticalAlignment="Top" Width="76"/>
<Button Content="+" HorizontalAlignment="Left" Height="28" Margin="10,194,0,0" VerticalAlignment="Top" Width="35"/>
<Button Content="-" HorizontalAlignment="Left" Height="28" Margin="67,194,0,0" VerticalAlignment="Top" Width="35"/>
<Button Content="*" HorizontalAlignment="Left" Height="28" Margin="127,194,0,0" VerticalAlignment="Top" Width="35"/>
<Button Content="/" HorizontalAlignment="Left" Height="28" Margin="188,194,0,0" VerticalAlignment="Top" Width="35"/>
</Grid>

Führt man das Programm aus, erkennt man, dass die Knopfdrücke noch nicht funktionieren. Erstellen wir so wie in der vorherigen Übung, durch einen Doppelklick auf die Knöpfe, die Funktionen der Knöpfe. Die neu generierten Funktionen in der MainWindow.xaml.cs sollten nun folgendermaßen aussehen:

// Addition
private void Button_Click_1(object sender, RoutedEventArgs e)
{

}

// Subtraktion
private void Button_Click_2(object sender, RoutedEventArgs e)
{

}

// Multiplikation
private void Button_Click_3(object sender, RoutedEventArgs e)
{

}

// Division
private void Button_Click_4(object sender, RoutedEventArgs e)
{

}

Erstellen der Programmlogik:

Um das Ergebnis zu berechnen, benötigen wir den Inhalt aus den 2 TextBoxen. Der Zugriff auf den Text von TextBoxen erfolgt über <Variablenname>.Text Der Text aus den TextBoxen sind aber Zeichenketten (Strings), deshalb müssen wir sie zuerst in Zahlenwerte umwandeln, um damit rechnen zu können. Hat man das Ergebnis berechnet, setzt man den Text in der Ergebnistextbox auf diesen Wert.

// Addition
private void Button_Click_1(object sender, RoutedEventArgs e)
{
int ergebnis = Convert.ToInt32(Wert_1.Text) + Convert.ToInt32(Wert_2.Text);
Ergebnis.Text = Convert.ToString(ergebnis);
}

Diese zwei Zeilen Programmlogik kopiert man in die anderen 3 Funktionen ( Minus, Mal, Dividieren ) und ändert das Pluszeichen dementsprechend um. Der Taschenrechner ist jetzt fertig programmiert.

Die ausführbare Anwendung dieses Projekts, unser Taschenrechner, befindet sich in dem gespeicherten Projektordner in dem Ordner "bin" -> "debug". Die Anwendung hat den Namen unseres Projektes. Mit Doppelklick wird das Programm ausgeführt. Ein sehr gutes, umfangreiches WPF-Tutorial (in Englisch) findest du unter: http://wpftutorial.net/


Vollständiger Programmcode

<Grid>
<Label Content="Beispieltext" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<TextBox Name="TextBox_1" HorizontalAlignment="Left" Height="22" Margin="10,41,0,0" TextWrapping="Wrap" Text="Hier Inhalt einfügen!" VerticalAlignment="Top" Width="182"/>
<Button Content="Klick mich!" HorizontalAlignment="Left" Height="28" Margin="10,68,0,0" VerticalAlignment="Top" Width="182" Click="Button_Click"/>
<Label Content="Taschenrechner" HorizontalAlignment="Left" Margin="10,128,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="Wert_1" HorizontalAlignment="Left" Height="22" Margin="10,167,0,0" TextWrapping="Wrap" Text="Wert" VerticalAlignment="Top" Width="35" RenderTransformOrigin="0.445,0.904"/>
<TextBox x:Name="Wert_2" HorizontalAlignment="Left" Height="22" Margin="67,167,0,0" TextWrapping="Wrap" Text="Wert" VerticalAlignment="Top" Width="35" RenderTransformOrigin="0.445,0.904"/>
<TextBox x:Name="Ergebnis" HorizontalAlignment="Left" Height="22" Margin="157,167,0,0" TextWrapping="Wrap" Text="Ergebnis" VerticalAlignment="Top" Width="76" RenderTransformOrigin="0.445,0.904"/>
<Button Content="+" HorizontalAlignment="Left" Height="28" Margin="10,194,0,0" VerticalAlignment="Top" Width="35" Click="Button_Click_1"/>
<Button Content="-" HorizontalAlignment="Left" Height="28" Margin="67,194,0,0" VerticalAlignment="Top" Width="35" Click="Button_Click_2"/>
<Button Content="*" HorizontalAlignment="Left" Height="28" Margin="127,194,0,0" VerticalAlignment="Top" Width="35" Click="Button_Click_3"/>
<Button Content="/" HorizontalAlignment="Left" Height="28" Margin="188,194,0,0" VerticalAlignment="Top" Width="35" Click="Button_Click_4"/>
</Grid>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
// Text der Textbox ändern
TextBox_1.Text = "Hallo!";
}

// Addition
private void Button_Click_1(object sender, RoutedEventArgs e)
{
var ergebnis = Convert.ToInt32(Wert_1.Text) + Convert.ToInt32(Wert_2.Text);
Ergebnis.Text = Convert.ToString(ergebnis);
}

// Subtraktion
private void Button_Click_2(object sender, RoutedEventArgs e)
{
var ergebnis = Convert.ToInt32(Wert_1.Text) - Convert.ToInt32(Wert_2.Text);
Ergebnis.Text = Convert.ToString(ergebnis);
}

// Multiplikation
private void Button_Click_3(object sender, RoutedEventArgs e)
{
var ergebnis = Convert.ToInt32(Wert_1.Text) * Convert.ToInt32(Wert_2.Text);
Ergebnis.Text = Convert.ToString(ergebnis);
}

// Division
private void Button_Click_4(object sender, RoutedEventArgs e)
{
var ergebnis = Convert.ToInt32(Wert_1.Text) / Convert.ToInt32(Wert_2.Text);
Ergebnis.Text = Convert.ToString(ergebnis);
}
}