Windows Dev Center

Teil 1: Erstellen der App "Hello, world" (Windows Store-Apps mit C#/VB und XAML)

In diesem Lernprogramm erfahren Sie, wie Sie die einfache Windows Store-App "Hello, world" mit XAML (Extensible Application Markup Language) und Microsoft Visual Basic oder C# erstellen. Hierbei handelt es sich um das erste von mehreren Lernprogrammen zum Erstellen von Windows Store-Apps.

Wichtig  Dieses Lernprogramm ist für Microsoft Visual Studio 2013 und Windows 8.1 konzipiert. Teile des Lernprogramms funktionieren in Verbindung mit Microsoft Visual Studio 2012 und Windows 8 nicht ordnungsgemäß.

In diesem Lernprogramm lernen Sie Folgendes:

  • Erstellen eines neuen Projekts
  • Hinzufügen von XAML-Inhalt zu Ihrer Startseite
  • Behandeln von Finger-, Stift- und Mauseingaben
  • Wechseln zwischen den Designs für hell und dunkel
  • Erstellen eigener Stile

Hier zeigen wir Ihnen, wie Sie eine Windows Store-App mit XAML und Visual Basic oder C# erstellen.

Vorbereitung

  • Zum Durcharbeiten dieses Lernprogramms benötigen Sie Windows 8.1 und Visual Studio 2013. Informationen zum Herunterladen finden Sie unter Herunterladen der Tools.
  • Außerdem benötigen Sie eine Entwicklerlizenz. Entsprechende Anweisungen finden Sie unter Anfordern einer Entwicklerlizenz.
  • Es wird davon ausgegangen, dass Sie über Grundkenntnisse zu XAML und den Konzepten in der XAML-Übersicht verfügen.
  • Wir gehen davon aus, dass Sie das Standardfensterlayout in Microsoft Visual Studio verwenden. Wenn Sie das Standardlayout ändern, können Sie es im Menü Fenster über den Befehl Fensterlayout zurücksetzen wiederherstellen.
  • Den vollständigen Code für dieses Lernprogramm finden Sie unter Teil 1: Vollständiger Code.

Schritt 1: Erstellen eines neuen Projekts in Visual Studio

  1. Starten Sie Visual Studio 2013.

    Die Startseite von Visual Studio 2013 wird angezeigt.

    (Im weiteren Verlauf nennen wir Visual Studio 2013 der Einfachheit halber nur noch "Visual Studio".)

  2. Klicken Sie auf Datei > Neues Projekt.

    Das Dialogfeld Neues Projekt wird geöffnet. Im linken Bereich des Dialogfelds können Sie die Art der anzuzeigenden Vorlagen auswählen.

  3. Erweitern Sie im linken Bereich die Option Installiert > Vorlagen und anschließend Visual Basic oder Visual C#, und wählen Sie den Vorlagentyp Windows Store aus. Im mittleren Bereich des Dialogfelds sehen Sie eine Liste mit Projektvorlagen für Windows Store-Apps.

    Visual Studio-Fenster für ein neues Projekt

  4. Wählen Sie im mittleren Bereich die Projektvorlage Blank App aus.

    Die Vorlage Blank App stellt eine minimale Windows Store-App bereit, die kompiliert und ausgeführt wird, aber keine UI-Steuerelemente oder -Daten enthält. Die App wird später in diesem Lernprogramm noch mit Steuerelementen und Daten versehen.

  5. Geben Sie im Textfeld Name den Namen "HelloWorld" ein.
  6. Klicken Sie auf OK, um das Projekt zu erstellen.

    Visual Studio erstellt Ihr Projekt und zeigt es im Projektmappen-Explorer an.

    Visual Studio-Projektmappen-Explorer

Blank App ist zwar nur eine Minimalvorlage, umfasst aber trotzdem eine Reihe von Dateien:

  • Eine Manifestdatei (package.appxmanifest), die Ihre App beschreibt (Name, Beschreibung, Kachel, Startseite usw.) und die in der App enthaltenen Dateien aufführt.
  • Einen Satz mit kleinen und großen Logobildern (Logo.scale-100.png und SmallLogo.scale-100.png), die auf der Startseite angezeigt werden.
  • Ein Bild der App für den Windows Store (StoreLogo.scale-100.png).
  • Einen Begrüßungsbildschirm (SplashScreen.scale-100.png), der beim Start der App angezeigt wird.
  • XAML- und Codedateien für die App (App.xaml und App.xaml.cs/.vb) .
  • Eine Startseite (MainPage.xaml) und eine entsprechende Codedatei (MainPage.xaml.cs/.vb), die beim Start der App ausgeführt werden.

Diese Dateien werden für alle Windows Store-Apps mit Visual Basic oder C# benötigt. Sie sind Teil jedes Projekts, das Sie mit Visual Studio erstellen.

Ersetzen der Hauptseite

Die MainPage in der Projektvorlage Blank App basiert auf der Vorlage Leere Seite. Sie enthält gerade so viel XAML und Code wie zum Instanziieren einer Page erforderlich. Wenn Sie jedoch eine App für den Windows Store erstellen, müssen Sie mehr tun. Beispiel: Selbst Apps mit nur einer Seite müssen an verschiedene Layouts und Ansichten angepasst werden. Zudem muss ihr Zustand beim Anhalten gespeichert und beim Fortsetzen wiederhergestellt werden. Die übrigen Projekt- und Page-Vorlagen in Visual Studio enthalten zusätzlichen Code und Hilfsklassen, die Sie bei der Ansichts- und Zustandsverwaltung unterstützen. Bei Verwendung der Projektvorlage Leere App ersetzen Sie die leere MainPage normalerweise durch eine der anderen Page-Vorlagen, um so das jeweilige Layout und die Hilfsklassen zu nutzen.

In diesem Beispiel ersetzen wir die standardmäßige MainPage durch eine Seite, für die die Vorlage Standardseite verwendet wird. Spätere Lernprogramme in dieser Reihe basieren auf den Hilfsklassen, die von der Vorlage für die Ansichts- und Zustandsverwaltung verwendet werden. Weitere Informationen zu den Page-Vorlagen, die Sie in Visual Studio auswählen können, finden Sie unter C#-, VB- und C++-Elementvorlagen.

Hh986965.wedge(de-de,WIN.10).gifSo ersetzen Sie die Hauptseite in der leeren App

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf MainPage.xaml, und klicken Sie anschließend auf Löschen.
  2. Klicken Sie auf OK, um den Löschvorgang zu bestätigen.
  3. Klicken Sie auf Projekt > Neues Element hinzufügen. Das Dialogfeld Neues Element hinzufügen wird geöffnet. Es ähnelt dem Dialogfeld Neues Projekt.
  4. Wählen Sie im linken Bereich unter Visual C# oder Visual Basic den Vorlagentyp Windows Store aus.
  5. Wählen Sie im mittleren Bereich Standardseite als Seitentyp für Ihr Projekt aus.
  6. Geben Sie "MainPage.xaml" als Namen für die Seite an.
    Wichtig  Wenn Sie den Standardnamen "BasicPage1" übernehmen, wird das Projekt nicht richtig erstellt.
  7. Klicken Sie auf Hinzufügen.

    Wenn Sie der Vorlage Blank App erstmalig eine neue Seite hinzufügen, bei der es sich nicht um eine Leere Seite handelt, zeigt Visual Studio ein Dialogfeld mit dem Hinweis an, dass die hinzugefügte Seite auf Dateien beruht, die im Projekt nicht vorhanden sind. Klicken Sie auf Ja, um die entsprechenden Dateien hinzuzufügen. Ihrem Projekt werden im Ordner Common Dateien für einige Hilfsklassen hinzugefügt.

    Die XAML- und CodeBehind-Dateien für Ihre Seite werden dem Projekt hinzugefügt.

  8. Klicken Sie auf Erstellen > Projektmappe erstellen, um die App zu erstellen.
    Wichtig  Für die neue Seite tritt im Designer ein Fehler auf, solange Sie die erforderlichen Hilfsklassen nicht erstellen.

Schritt 2: Starten der App

Sie haben nun eine sehr einfache App erstellt. Falls Sie wissen möchten, wie sie aussieht, drücken Sie F5, um die App zu erstellen, bereitzustellen und im Debugging-Modus zu starten. Zunächst erscheint ein standardmäßiger Begrüßungsbildschirm. Der Begrüßungsbildschirm setzt sich zusammen aus einem Bild (SplashScreen.scale-100.png) und einer Hintergrundfarbe (in der Manifestdatei unserer App angegeben). Er lässt sich ganz einfach anpassen, allerdings gehen wir an dieser Stelle nicht weiter darauf ein. (Informationen zur entsprechenden Vorgehensweise finden Sie unter Hinzufügen eines Begrüßungsbildschirms.)

Der Begrüßungsbildschirm verschwindet, und Ihre App wird angezeigt. Sie besteht aus einem schwarzen Bildschirm und dem Titel "My Application".

Erster App-Bildschirm

Es gibt keine Schaltfläche und keinen Befehl zum Schließen der App. Sie können die Anwendung zwar mithilfe der Schließen-Geste oder durch Drücken von ALT+F4 schließen, Windows Store-Apps werden jedoch üblicherweise nicht geschlossen. Auf diesen Aspekt gehen wir in Teil 2: Verwalten von App-Lebenszyklus und -Zustand näher ein. Drücken Sie die Windows-Taste, um auf den Bildschirm Start zu wechseln, und zeigen Sie alle Apps an. Beachten Sie, dass beim Bereitstellen der App dem Bildschirm Apps die dazugehörige Kachel hinzugefügt wird. Wenn Sie die App erneut ausführen möchten, tippen oder klicken Sie auf dem Bildschirm Apps auf die Kachel, oder drücken Sie in Visual Studio F5, um die App im Debugmodus auszuführen.

Viel zu bieten hat sie zwar noch nicht, aber trotzdem: Herzlichen Glückwunsch! Sie haben Ihre erste Windows Store-App erstellt!

Wenn Sie das Debuggen der App beenden möchten, drücken Sie ALT-TAB, um zu Visual Studio zurückzukehren. Klicken Sie in Visual Studio auf Debuggen > Debuggen beenden, um die App zu schließen. Solange sie sich im Debugging-Modus befindet, können Sie die App in Visual Studio nicht bearbeiten.

Weitere Informationen finden Sie unter Ausführen von Windows Store-Apps über Visual Studio.

Schritt 3: Anpassen der Startseite

Inhalt der Dateien

Beim Erstellen eines neuen Projekts mit der Vorlage Blank App erstellt Visual Studio eine App mit einigen Dateien. Doppelklicken Sie zum Anzeigen und Bearbeiten der Dateien im Projektmappen-Explorer auf die gewünschte Datei. Zum Anzeigen der zugeordneten Codedatei können Sie eine XAML-Datei genau wie einen Ordner erweitern. Standardmäßig werden XAML-Dateien in einer geteilten Ansicht geöffnet, die sowohl die Entwurfsoberfläche als auch den XAML-Editor enthält.

In diesem Lernprogramm verwenden Sie lediglich einige der zuvor aufgeführten Dateien, nämlich App.xaml, App.xaml.cs/.vb, MainPage.xaml und MainPage.xaml.cs/.vb.

App.xaml

In App.xaml deklarieren Sie Ressourcen, die in der gesamten App zur Anwendung kommen.


<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld">

</Application>


App.xaml.cs/vb

App.xaml.cs/.vb ist die CodeBehind-Datei für App.xaml. CodeBehind ist der Code, der mit den partiellen Klassen der XAML-Seite verknüpft wird. Zusammen bilden XAML und CodeBehind eine vollständige Klasse. App.xaml.cs/.vb ist der Einstiegspunkt für Ihre App. Sie enthält wie alle CodeBehind-Seiten einen Konstruktor, der die InitializeComponent-Methode aufruft. Die InitializeComponent-Methode wird nicht von Ihnen geschrieben. Sie wird von Visual Studio generiert und dient in erster Linie dazu, die in der XAML-Datei deklarierten Elemente zu initialisieren. App.xaml.cs/.vb enthält außerdem Methoden zum Behandeln der Aktivierung und Unterbrechung der App. Diesen Methoden fügen wir in Teil 2: Verwalten von App-Lebenszyklus und -Zustand noch Code hinzu.


' The Blank Application template is documented at http://go.microsoft.com/fwlink/p/?LinkID=234227

''' <summary>
''' Provides application-specific behavior to supplement the default Application class.
''' </summary>
NotInheritable Class App
    Inherits Application

    ''' <summary>
    ''' Invoked when the application is launched normally by the end user.  Other entry points
    ''' will be used when the application is launched to open a specific file, to display
    ''' search results, and so forth.
    ''' </summary>
    ''' <param name="e">Details about the launch request and process.</param>
    Protected Overrides Sub OnLaunched(e As Windows.ApplicationModel.Activation.LaunchActivatedEventArgs)
#If DEBUG Then
        ' Show graphics profiling information while debugging.
        If System.Diagnostics.Debugger.IsAttached Then
            ' Display the current frame rate counters
            Me.DebugSettings.EnableFrameRateCounter = True
        End If
#End If

        Dim rootFrame As Frame = TryCast(Window.Current.Content, Frame)

        ' Do not repeat app initialization when the Window already has content,
        ' just ensure that the window is active

        If rootFrame Is Nothing Then
            ' Create a Frame to act as the navigation context and navigate to the first page
            rootFrame = New Frame()
            If e.PreviousExecutionState = ApplicationExecutionState.Terminated Then
                ' TODO: Load state from previously suspended application
            End If
            ' Place the frame in the current Window
            Window.Current.Content = rootFrame
        End If
        If rootFrame.Content Is Nothing Then
            ' When the navigation stack isn't restored navigate to the first page,
            ' configuring the new page by passing required information as a navigation
            ' parameter
            If Not rootFrame.Navigate(GetType(MainPage), e.Arguments) Then
                Throw New Exception("Failed to create initial page")
            End If
        End If

        ' Ensure the current window is active
        Window.Current.Activate()
    End Sub

    ''' <summary>
    ''' Invoked when application execution is being suspended.  Application state is saved
    ''' without knowing whether the application will be terminated or resumed with the contents
    ''' of memory still intact.
    ''' </summary>
    ''' <param name="sender">The source of the suspend request.</param>
    ''' <param name="e">Details about the suspend request.</param>
    Private Sub OnSuspending(sender As Object, e As SuspendingEventArgs) Handles Me.Suspending
        Dim deferral As SuspendingDeferral = e.SuspendingOperation.GetDeferral()
        ' TODO: Save application state and stop any background activity
        deferral.Complete()
    End Sub

End Class


MainPage.xaml

In der Datei MainPage.xaml definieren Sie die Benutzeroberfläche für Ihre App. Sie können Elemente direkt mithilfe von XAML-Markup hinzufügen oder die Designtools von Visual Studio verwenden. Mit der Vorlage Standardseite wird eine neue Klasse mit dem Namen MainPage (bzw. mit dem von Ihnen eingegebenen Namen) erstellt, die von Page erbt. Sie enthält außerdem einfache Inhalte, z. B. eine Zurück-Schaltfläche und einen Seitentitel, und verfügt über Methoden für die Navigation und die Zustandsverwaltung.


<Page
    x:Name="pageRoot"
    x:Class="HelloWorld.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:common="using:HelloWorld.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <AppBarButton x:Name="backButton" Icon="Back" Height="95" Margin="10,46,10,0"
                          Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" 
                          Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource Mode=Self}}"
                          AutomationProperties.Name="Back"
                          AutomationProperties.AutomationId="BackButton"
                          AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

MainPage.xaml.cs/vb

MainPage.xaml.cs/.vb ist die CodeBehind-Seite für MainPage.xaml. Hier fügen Sie Ihre App-Logik- und Ereignishandler hinzu. In der Vorlage Standardseite gibt es zwei Methoden zum Speichern und Laden des Seitenzustands.


' The Basic Page item template is documented at http://go.microsoft.com/fwlink/p/?LinkID=234237

''' <summary>
''' A basic page that provides characteristics common to most applications.
''' </summary>
Public NotInheritable Class MainPage
    Inherits Page

    ''' <summary>
    ''' NavigationHelper is used on each page to aid in navigation and 
    ''' process lifetime management
    ''' </summary>
    Public ReadOnly Property NavigationHelper As Common.NavigationHelper
        Get
            Return Me._navigationHelper
        End Get
    End Property
    Private _navigationHelper As Common.NavigationHelper

    ''' <summary>
    ''' This can be changed to a strongly typed view model.
    ''' </summary>
    Public ReadOnly Property DefaultViewModel As Common.ObservableDictionary
        Get
            Return Me._defaultViewModel
        End Get
    End Property
    Private _defaultViewModel As New Common.ObservableDictionary()

    Public Sub New()

        InitializeComponent()
        Me._navigationHelper = New Common.NavigationHelper(Me)
        AddHandler Me._navigationHelper.LoadState, AddressOf NavigationHelper_LoadState
        AddHandler Me._navigationHelper.SaveState, AddressOf NavigationHelper_SaveState
    End Sub

    ''' <summary>
    ''' Populates the page with content passed during navigation.  Any saved state is also
    ''' provided when recreating a page from a prior session.
    ''' </summary>
    ''' <param name="sender">
    ''' The source of the event; typically <see cref="NavigationHelper"/>
    ''' </param>
    ''' <param name="e">Event data that provides both the navigation parameter passed to
    ''' <see cref="Frame.Navigate"/> when this page was initially requested and
    ''' a dictionary of state preserved by this page during an earlier
    ''' session.  The state will be null the first time a page is visited.</param>
    Private Sub NavigationHelper_LoadState(sender As Object, e As Common.LoadStateEventArgs)

    End Sub

    ''' <summary>
    ''' Preserves state associated with this page in case the application is suspended or the
    ''' page is discarded from the navigation cache.  Values must conform to the serialization
    ''' requirements of <see cref="Common.SuspensionManager.SessionState"/>.
    ''' </summary>
    ''' <param name="sender">
    ''' The source of the event; typically <see cref="NavigationHelper"/>
    ''' </param>
    ''' <param name="e">Event data that provides a dictionary of state preserved by this page 
    ''' during an earlier session.  The state will be null the first time a page is visited.</param>
    Private Sub NavigationHelper_SaveState(sender As Object, e As Common.SaveStateEventArgs)

    End Sub

#Region "NavigationHelper registration"

    ''' The methods provided in this section are simply used to allow
    ''' NavigationHelper to respond to the page's navigation methods.
    ''' 
    ''' Page specific logic should be placed in event handlers for the  
    ''' <see cref="Common.NavigationHelper.LoadState"/>
    ''' and <see cref="Common.NavigationHelper.SaveState"/>.
    ''' The navigation parameter is available in the LoadState method 
    ''' in addition to page state preserved during an earlier session.

    Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
        _navigationHelper.OnNavigatedTo(e)
    End Sub

    Protected Overrides Sub OnNavigatedFrom(e As NavigationEventArgs)
        _navigationHelper.OnNavigatedFrom(e)
    End Sub

#End Region


End Class


Anpassen der Startseite

Lassen Sie uns nun der App einige Inhalte hinzufügen.

Hh986965.wedge(de-de,WIN.10).gifSo passen Sie die Startseite an

  1. Doppelklicken Sie zum Öffnen im Projektmappen-Explorer auf MainPage.xaml.
  2. Wählen Sie zum Ändern des Seitentitels im XAML-Designer am Seitenanfang den Text "My Application" aus.

    Stellen Sie sicher, dass das TextBlock-Objekt mit der Bezeichnung pageTitle im Bereich Eigenschaften angezeigt wird. Standardmäßig befindet sich der Bereich Eigenschaften unter dem Bereich für den Projektmappen-Explorer.

  3. Das Eigenschaftenpanel enthält eine Liste mit Eigenschaften und Werten für das ausgewählte Objekt. Neben jedem Eigenschaftswert befindet sich ein Eigenschaftsmarker. Dies ist ein kleines Feldsymbol, auf das Sie klicken können, um ein Eigenschaftenmenü zu öffnen. Der Eigenschaftsmarker für Text ist grün, um anzuzeigen, dass er auf eine Ressource festgelegt ist.

    Klicken Sie im Bereich Eigenschaften unter Allgemein auf den Eigenschaftsmarker für die Text-Eigenschaft. Das Eigenschaftenmenü wird geöffnet.

  4. Wählen Sie im Eigenschaftsmenü Ressource bearbeiten aus. Das Dialogfeld Ressource bearbeiten wird geöffnet.
  5. Ändern Sie im Dialogfeld Ressource bearbeiten den Wert "My Application" in "Hello, world!".
  6. Klicken Sie auf OK.

    Anstatt den App-Namen direkt in den Textblock einzugeben, haben Sie eine Zeichenfolgenressource aktualisiert, an die die Text-Eigenschaft des Textblocks gebunden ist. Die Verwendung einer solchen Ressource führt dazu, dass Text wiederverwendet, einfacher gepflegt und leichter lokalisiert werden kann. In MainPage.xaml werden die XAML-Daten für die AppName-Ressourcendefinition auf diese Weise aktualisiert.

    
    <x:String x:Key="AppName">Hello, world!</x:String>
    
    
  7. Fügen Sie im XAML-Editor die Steuerelemente für die UI hinzu.

    Fügen Sie diesen XAML-Code im Grid-Stammelement direkt nach dem Grid-Element hinzu, in dem die Zurück-Schaltfläche und der Seitentitel enthalten ist. Darin ist ein StackPanel-Element mit einem TextBlock-Element enthalten, in dem der Name des Benutzers angefordert wird, sowie ein TextBox-Element zum Akzeptieren des Benutzernamens und ein Button-Element sowie ein weiteres TextBlock-Element.

    
    
            <StackPanel Grid.Row="1" Margin="120,30,0,0">
                <TextBlock Text="What's your name?"/>
                <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
                    <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
                    <Button Content="Say &quot;Hello&quot;"/>
                </StackPanel>
                <TextBlock x:Name="greetingOutput"/>
            </StackPanel>
    
    
    

    Auf das XAML-Layout gehen wir im Abschnitt Teil 3: Navigation, Layout und Ansichten noch genauer ein.

  8. Drücken Sie F5, um die App auszuführen. Sie sieht ungefähr so aus:

    App-Bildschirm mit Steuerelementen

    Sie können zwar Text in die TextBox eingeben und auf das Button-Element klicken, aber nach dem Klicken passiert nichts. In den nächsten Schritten erstellen wir daher einen Ereignishandler für das Click-Ereignis der Schaltfläche, um eine personalisierte Begrüßung anzuzeigen. Fügen Sie den Ereignishandlercode der Datei MainPage.xaml.cs/.vb hinzu.

Schritt 4: Erstellen eines Ereignishandlers

XAML-Elemente können Meldungen senden, wenn bestimmte Ereignisse eintreten. Dank dieser Ereignismeldungen können Sie mit einer Aktion auf das Ereignis reagieren. Sie fügen Ihren Code zum Reagieren auf das Ereignis in eine Ereignishandlermethode ein. Eines der am häufigsten auftretenden Ereignisse in vielen Apps ist das Klicken eines Benutzers auf ein Button-Element.

Definieren wir nun einen Ereignishandler für das Click-Ereignis Ihrer Schaltfläche. Der Ereignishandler ruft den Namen des Benutzers aus dem TextBox-Steuerelement nameInput ab und gibt unter Verwendung dieser Information eine Begrüßung an das TextBlock-Element greetingOutput aus.

Verwenden von Ereignissen für Touch-, Maus- und Stifteingaben

Welches Ereignis muss behandelt werden? Windows Store-Apps können auf unterschiedlichsten Geräten ausgeführt werden. Berücksichtigen Sie bei der App-Gestaltung also auch die Nutzung der Fingereingabe. Ihre App muss zudem mit Maus- und Stifteingaben zurechtkommen. Praktischerweise sind Ereignisse wie Click und DoubleTapped aber geräteunabhängig. Wenn Sie mit der Programmierung für Microsoft .NET vertraut sind, sind Ihnen möglicherweise separate Ereignisse für Maus-, Touch- und Stifteingaben (wie MouseMove, TouchMove und StylusMove) geläufig. Bei Windows Store-Apps werden diese durch ein einzelnes PointerMoved-Ereignis ersetzt, das gleichzeitig für Touch-, Maus- und Stifteingaben verwendet werden kann.

Hh986965.wedge(de-de,WIN.10).gifSo fügen Sie einen Ereignishandler hinzu

  1. Wählen Sie in der XAML- oder Designansicht die Button "Say Hello" aus, die Sie MainPage.xaml hinzugefügt haben.
  2. Klicken Sie im Eigenschaftenfenster auf die Ereignisschaltfläche (Ereignisschaltfläche).
  3. Suchen Sie am Anfang der Ereignisliste nach dem Click-Ereignis. Geben Sie im Textfeld für das Ereignis den Namen der Funktion ein, die das Click-Ereignis behandelt. Geben Sie für dieses Beispiel die Zeichenfolge "Button_Click" ein.

    Ereignisliste im Eigenschaftenfenster

  4. Drücken Sie die EINGABETASTE. Die Ereignishandlermethode wird erstellt und im Code-Editor geöffnet, damit Sie den Code hinzufügen können, der bei Auftreten des Ereignisses ausgeführt werden soll.

    Im XAML-Editor wird die XAML für die Button aktualisiert, sodass der Click-Ereignishandler wie folgt deklariert wird: .

    
    <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    
    
  5. Fügen Sie dem Ereignishandler, den Sie auf der CodeBehind-Seite erstellt haben, Code hinzu. Rufen Sie im Ereignishandler den Namen des Benutzers aus dem TextBox-Steuerelement nameInput ab, und erstellen Sie damit eine Begrüßung. Zeigen Sie das Ergebnis mithilfe des greetingOutputTextBlock -Elements an.
    
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
            greetingOutput.Text = "Hello, " & nameInput.Text & "!"
        End Sub
    
    
  6. Drücken Sie F5, um die App zu erstellen und auszuführen. Wenn Sie Ihren Namen in das Textfeld eingeben und anschließend auf die Schaltfläche klicken, zeigt die App eine personalisierte Begrüßung an.

    App-Bildschirm mit angezeigter Meldung

Schritt 5: Gestalten der Startseite

Auswählen eines Designs

Das Erscheinungsbild Ihrer App lässt sich ganz einfach anpassen. Standardmäßig verwendet die App Ressourcen mit dunklem Design. Die Systemressourcen enthalten auch ein helles Design. Probieren wir doch einmal aus, wie das aussieht.

Hh986965.wedge(de-de,WIN.10).gifSo wechseln Sie zum hellen Design

  1. Doppelklicken Sie im Projektmappen-Explorer auf App.xaml, um es zu öffnen.
  2. Fügen Sie im öffnenden Application-Tag die RequestedTheme-Eigenschaft hinzu, deren Wert auf Light festgelegt ist.
    
    RequestedTheme="Light"
    
    

    Hier ist das gesamte Application-Tag mit hinzugefügtem hellem Design.

    
    <Application
        x:Class="HelloWorld.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelloWorld" 
        RequestedTheme="Light">
    
    
  3. Drücken Sie F5, um die App zu erstellen und auszuführen. Nun verwendet sie das helle Design.

    App-Bildschirm mit hellem Design

Welches Design sollten Sie verwenden? Das bleibt ganz Ihnen überlassen. Bei Apps, die hauptsächlich Bilder oder Videos anzeigen, sollten Sie das dunkle Design verwenden, während sich bei Apps mit viel Text die Verwendung des hellen Designs empfiehlt. Falls Sie ein benutzerdefiniertes Farbschema verwenden, verwenden Sie das Design, das am besten zum Erscheinungsbild Ihrer App passt.

Hinweis  Das Design wird bei Aktivierung der App angewendet. Während der Ausführung der App ist das Ändern von Designs nicht möglich.

Verwenden von Systemstilen

Momentan ist der gesamte Text ziemlich klein und nur schwer lesbar. Sie können ganz einfach Systemstile auf Elemente in Ihrer App anwenden, um eine ansprechende Optik zu erzielen.

Hh986965.wedge(de-de,WIN.10).gifSo gestalten Sie ein Element

  1. Doppelklicken Sie zum Öffnen im Projektmappen-Explorer auf MainPage.xaml.
  2. Wählen Sie in der XAML- oder Designansicht den von Ihnen hinzugefügten TextBlock "What's your name?" aus.
  3. Klicken Sie im Eigenschaftenfenster auf die Eigenschaftenschaltfläche (Ereignisschaltfläche).
  4. Erweitern Sie die Gruppe Sonstiges, und suchen Sie dort nach der Eigenschaft Style.
  5. Klicken Sie auf den Eigenschaftsmarker neben Stil, um das Menü zu öffnen.
  6. Wählen Sie im Menü die Option Systemressource > BaseTextBlockStyle.

    Visual Studio-Eigenschaftenfenster

    Auf der XAML-Entwurfsoberfläche ändert sich die Textdarstellung. Im XAML-Editor wird das XAML für den TextBlock aktualisiert.

    
    <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
    
    
  7. Wiederholen Sie den Prozess, um den BaseTextBlockStyle dem greetingOutputTextBlock -Element zuzuweisen.
    Tipp  Dieser TextBlock enthält zwar keinen Text, wenn Sie jedoch den Mauszeiger über die XAML-Entwurfsoberfläche bewegen, zeigt ein blauer Umriss die TextBlock-Position an, sodass Sie ihn auswählen können.

    Ihr XAML sieht nun so aus:

    
    <StackPanel Grid.Row="1" Margin="120,30,0,0">
        <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput" Style="{ThemeResource BaseTextBlockStyle}"/>
    </StackPanel>
    
    
  8. Drücken Sie F5, um die App zu erstellen und auszuführen. Sie sieht jetzt so aus:

App-Bildschirm mit Textdesign

Erstellen eigener Stile

Wenn Sie das Erscheinungsbild der App anpassen möchten, können Sie eigene Stile erstellen. Weitere Informationen finden Sie unter Schnellstart: Formatieren von Steuerelementen.

An dieser Stelle können Sie einen neuen Stil erstellen und auf den greetingOutputTextBlock anwenden. Sie fügen den Stil in den Ressourcenabschnitt von MainPage.xaml ein.

Hh986965.wedge(de-de,WIN.10).gifSo verwenden Sie Ihren eigenen Stil

  1. Wählen Sie in der XAML- oder Designansicht den TextBlock vom Typ greetingOutput aus, den Sie MainPage.xaml hinzugefügt haben.
  2. Erweitern Sie die Gruppe Sonstiges, und suchen Sie dort nach der Eigenschaft Style.
  3. Klicken Sie auf den Eigenschaftsmarker neben Stil, um das Menü zu öffnen.
  4. Wählen Sie im Menü die Option In neue Ressource konvertieren... aus. Das Dialogfeld zum Erstellen von Stilressourcen wird geöffnet.
    Hinweis  Der zu ändernde Stil muss bereits auf das Steuerelement angewendet worden sein. In diesem Beispiel ist der BaseTextBlockStyle noch aus dem vorherigen Schritt angewendet, sodass Sie also eine Kopie dieses Stils ändern.
  5. Geben Sie im Dialogfeld zum Erstellen von Stilressourcen die Zeichenfolge "BigGreenTextStyle" als Ressourcenschlüssel ein, und wählen Sie die Option zum Definieren der Ressource in diesem Dokument aus.

    Dialogfeld zum Erstellen von Stilressourcen

  6. Klicken Sie auf OK. Der neue Stil wird im Ressourcenabschnitt der Datei MainPage.xaml erstellt, und der TextBlock wird für die Verwendung der neuen Stilressource aktualisiert.
    
    <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
    
    

    Der neue Stil wird vom TextBlock-Element verwendet, aber es sieht genauso wie vorher aus. Sie müssen den von Ihnen erstellten Stil bearbeiten, um ihm ein neues Aussehen zu verleihen.

  7. Klicken Sie auf den Eigenschaftsmarker neben der Eigenschaft Stil, um das Menü erneut zu öffnen.
  8. Klicken Sie im Menü auf Ressource bearbeiten.
  9. Fügen Sie unter der Ressource "BigGreenTextStyle" ein Setter-Element für die Foreground-Eigenschaft mit dem Wert "Green" hinzu.
    
    
        <Setter Property="Foreground" Value="Green"/>
    
    
    
    Hinweis  Wenn Sie den Stil im XAML-Editor ändern, sehen Sie die Auswirkung Ihrer Änderungen in der Entwurfsansicht.
  10. Ändern Sie unter FontSize Setter den Wert in "36".
  11. Löschen Sie das Setter-Element für die LineHeight-Eigenschaft.
    
    
    <!-- Delete this Setter. -->
    <Setter Property="LineHeight" Value="20"/>
    
    
    

    Dies ist der fertige XAML-Code für den Stil.

    
    <Style x:Key="BigGreenTextStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="Green"/> 
        <Setter Property="FontSize" Value="36"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="Typography.StylisticSet20" Value="True"/>
        <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
        <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
        <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
        <Setter Property="TextLineBounds" Value="TrimToBaseline"/>
        <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
    </Style>
    
    
  12. Drücken Sie F5, um die App zu erstellen und auszuführen. Die Begrüßung wird jetzt in großen grünen Buchstaben dargestellt.

    App-Bildschirm mit grünem Text

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das erste Lernprogramm vollständig durchgearbeitet! Sie haben gelernt, wie Sie einer Windows Store-App Inhalte hinzufügen. Darüber hinaus wissen Sie jetzt, wie Sie eine App mit Interaktionsmöglichkeiten ausstatten und das Erscheinungsbild der App anpassen.

Siehe Code

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Informationen finden Sie unter Teil 1: Vollständiger Code.

Nächste Schritte

Im nächsten Teil dieser Lernprogrammreihe erhalten Sie Informationen zur Funktionsweise des App-Lebenszyklus sowie zum Speichern des App-Zustands. Wechseln Sie zu Teil 2: Verwalten von App-Lebenszyklus und -Zustand.

 

 

Anzeigen:
© 2015 Microsoft