Xamarin.Forms: Tutorial zu „Button“
Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:
- Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App
- Das Tutorial zu StackLayout
In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:
- Erstellen eines Xamarin.Forms
Button
-Elements in XAML - Reagieren auf das angetippte
Button
-Element - Ändern der Darstellung eines
Button
-Elements
Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie ein Button
anpassen können. Die folgenden Screenshots zeigen die finale Anwendung:
Außerdem verwenden Sie XAML Hot Reload für Xamarin.Forms, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu erstellen.
Erstellen einer Schaltfläche
Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.
Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen LabelTutorial.
Wichtig
Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe ButtonTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.
Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Projektmappen-Explorer im Projekt ButtonTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ButtonTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Button Text="Click me" /> </StackLayout> </ContentPage>
In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die ein
Button
-Element in einemStackLayout
enthält. DieButton.Text
-Eigenschaft gibt den Text an, der auf demButton
-Element angezeigt wird.Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:
Beachten Sie, dass ein
Button
-Element standardmäßig die gesamte verfügbare Fläche einnimmt. In diesem Fall entspricht das der Breite des übergeordneten Elements (StackLayout
).Beenden Sie die Anwendung in Visual Studio.
Behandeln von Klicks
Ändern Sie in MainPage.xaml die
Button
-Deklaration, sodass ein Handler für dasClicked
-Ereignis festgelegt wird:<Button Text="Click me" Clicked="OnButtonClicked" />
Dieser Code legt das
Clicked
-Ereignis auf einen Ereignishandler namensOnButtonClicked
fest, der im nächsten Schritt erstellt wird.Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt ButtonTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie dann in der Datei MainPage.xaml.cs der Klasse den
OnButtonClicked
-Ereignishandler hinzu:void OnButtonClicked(object sender, EventArgs e) { (sender as Button).Text = "Click me again!"; }
Wenn die
Button
angetippt wird, wird dieOnButtonClicked
-Methode ausgeführt. Dassender
-Argument ist dasButton
-Objekt, das für das Auslösen desClicked
-Ereignisses verantwortlich ist und für den Zugriff auf dasButton
-Objekt verwendet werden kann. Dieser Ereignishandler aktualisiert den von derButton
angezeigten Text.Hinweis
Neben dem
Clicked
-Ereignis definiert dasButton
-Element auch die EreignissePressed
undReleased
. Weitere Informationen finden Sie unter Drücken und Loslassen der Schaltfläche im Leitfaden zu Xamarin.Forms-Schaltflächen.Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten: Klicken Sie auf die
Button
, und beobachten Sie, dass sich der darauf angezeigte Text ändert:Weitere Informationen zum Verarbeiten von Schaltflächenklicks finden Sie unter Verarbeiten von Schaltflächenklicks im Leitfaden zu Xamarin.Forms-Schaltflächen.
Ändern der Darstellung
Ändern Sie in MainPage.xaml die
Button
-Deklaration, um die visuelle Darstellung zu ändern:<Button Text="Click me" Clicked="OnButtonClicked" TextColor="Blue" BackgroundColor="Aqua" BorderColor="Red" BorderWidth="5" CornerRadius="5" WidthRequest="150" HeightRequest="75" />
Dieser Code legt Eigenschaften fest, die die visuelle Darstellung von
Button
ändern. DieTextColor
-Eigenschaft legt die Farbe desButton
-Texts fest, und dieBackgroundColor
-Eigenschaft legt die Farbe des Texthintergrunds fest. DieBorderColor
-Eigenschaft legt die Farbe des Bereichs umButton
fest, und dieBorderWidth
-Eigenschaft legt die Breite des Rahmens fest. Per Standardeinstellung istButton
rechteckig. Jedoch können die Ecken abgerundet werden, indem dieCornerRadius
-Eigenschaft auf einen geeigneten Wert festgelegt wird. Zusätzlich wird die Größe vonButton
geändert, indem die EigenschaftenWidthRequest
undHeightRequest
festgelegt werden.Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten. Beachten Sie, wie sich die Darstellung von
Button
geändert hat:Beenden Sie die Anwendung in Visual Studio.
Weitere Informationen zum Festlegen der Darstellung von
Button
finden Sie im Abschnitt Schaltflächendarstellung im Leitfaden zu Xamarin.Forms-Schaltflächen.
Herzlichen Glückwunsch!
Glückwunsch, Sie haben das Tutorial erfolgreich abgeschlossen und Folgendes gelernt:
- Erstellen eines Xamarin.Forms
Button
-Elements in XAML - Reagieren auf das angetippte
Button
-Element - Ändern der Darstellung eines
Button
-Elements
Nächste Schritte
Wenn Sie mehr über die Grundlagen der Erstellung mobiler Apps mit Xamarin.Forms lernen möchten, fahren Sie mit dem Tutorial zu Eingaben fort.
Tutorial zu Entry
Verwandte Links
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.