13.7 Seitenvorlage Standardseite
In diesem Abschnitt wird für die Entwicklung des Projekts MASeitenvorlageStandard die Hauptseite gegen eine Seite ausgetauscht, die nach der Seitenvorlage Standardseite erzeugt wird. Dies ist eine fast leere Seite mit Titelzeile und einem bei Bedarf sichtbaren Zurück-Button. Sie stellt im Hintergrund die speziellen Styles der Windows Store-App zur Verfügung.
Es wird ein neues Projekt erzeugt, mithilfe der Projektvorlage Blank. Sie markieren dann als Erstes im Projektmappen-Explorer die Datei MainPage.xaml und löschen sie. Die Programmcodedatei MainPage.xaml.vb wird dabei automatisch mitgelöscht. Anschließend rufen Sie den Menüpunkt Projekt • Neues Element hinzufügen auf und wählen die Seitenvorlage Standardseite aus.
Die Datei nennen Sie MainPage.xaml. Sie müssen dann in den Anwendungsdateien keine Umbenennung vornehmen. Die Seite mit der Klasse MainPage wird von der Anwendung als Hauptseite erkannt. Anschließend müssen Sie durch Betätigung des Buttons Ja bestätigen, dass dem Projekt noch weitere notwendige Dateien hinzugefügt werden.
Damit alle neu hinzugefügten Elemente miteinander verbunden werden, starten Sie nun am besten die Anwendung. Es erscheint Abbildung 13.11 mit dem Schriftzug MyApplication im typischen Style der Windows Store-Apps.
Abbildung 13.11 Projekt »MASeitenvorlageStandard«,Original-Startseite
Diesen Text können Sie leicht gegen einen eigenen Text austauschen, zum Beispiel den Text Meine Windows Store-App. In der Datei MainPage.xaml wird die entsprechende Zeichenkette der Seite als Ressource zur Verfügung gestellt, im Bereich Page.Resources.
Es sollen weitere Elemente innerhalb eines StackPanel hinzugefügt werden, so dass der Benutzer seinen Namen eingeben kann und anschließend mit diesem Namen begrüßt wird, siehe Abbildung 13.12.
Abbildung 13.12 Projekt »MASeitenvorlageStandard«, geänderte Startseite
Das StackPanel mit den Elementen fügen Sie in der Datei MainPage.xaml nach dem Aufbau des inneren Grids ein, vor dem Bereich VisualStateManager:
...
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack"
IsEnabled="{Binding Frame.CanGoBack,
ElementName=pageRoot}"
Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1"
Text="{StaticResource AppName}"
Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<StackPanel Grid.Row="1" Margin="150, 0, 0, 0">
<TextBlock>Ihr Name</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBox x:Name="eingabe" Width="300" />
<Button Click="bu_Click">Sag Hallo</Button>
</StackPanel>
<TextBlock x:Name="ausgabe" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
...
Listing 13.14 Projekt »MASeitenvorlageStandard«, Datei MainPage.xaml, Ausschnitt
Das StackPanel steht in der Zeile 1 des äußeren Grids (Grid.Row = 1), mithilfe von Margin nach rechts verschoben. Es beinhaltet:
- einen TextBlock als Überschrift,
- innerhalb eines inneren, horizontalen StackPanel eine Textbox zur Eingabe und einen Button,
- sowie einen TextBlock zur Ausgabe der Begrüßung.
Die Ereignisprozedur für den Button sieht wie folgt aus:
Private Sub bu_Click(sender As Object, e As RoutedEventArgs)
ausgabe.Text = "Hallo " & eingabe.Text
End Sub
Listing 13.15 Projekt »MASeitenvorlageStandard«, Datei MainPage.xaml.vb
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.