Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 1: Masterseite (XAML und C#)

Artikel
06/05/2015

Sie können eine Windows Store-App schneller und effizienter entwickeln, indem Sie die XAML-Entwurfstools in Blend for Visual Studio verwenden. Bei diesem Lernprogramm erstellen Sie die einfache App, „PickaFlick“, in der Sie eine Liste neuer Filmen durchsuchen können. Die Liste wird mit einer API von Rotten Tomatoes generiert. Wenn Sie dieses Lernprogramm durchführen möchten, müssen Sie sich registrieren, um einen API-Schlüssel zu erhalten, den Sie in den Code einfügen.

Zudem benötigen Sie für die Installation von NuGet, die für die Durchführung dieses Lernprogramms erforderlich ist, eine Voll- oder Testversion von Microsoft Visual Studio Professional, Premium oder Ultimate. NuGet ist für Visual Studio Express nicht verfügbar und erfordert eine gültige Windows Store-Entwicklerlizenz.

Die Startseite der PickaFlick-App

PickaFlick-App in Blend

In Teil 1 dieses Lernprogramms erstellen Sie die Startseite der App. Dabei lernen Sie Folgendes:

Wenn Sie dieses Projekt aus der Beispielgalerie herunterladen, können Sie nicht nur den Code überprüfen, sondern auch alle dessen Objekte, sodass Sie alles nachvollziehen und dabei zugleich das Projekt erstellen können.

Erfahrung mit XAML oder C# ist nicht erforderlich, um dieses Lernprogramm abzuschließen. Für eine erfolgreiche Verwendung von Blend ist eine gewisse Erfahrung mit XAML und C# allerdings hilfreich.

Erstellen eines Projekts von einer Vorlage

Blend und Visual Studio bieten dieselben Projektvorlagen, die Ihnen dabei helfen, mit der Entwicklung einer Windows Store-App zu beginnen. Weitere Informationen zu den von Blend und Visual Studio angebotenen Vorlagen für das Entwickeln anderer Apps finden Sie unter Vorlagen für eine schnelle App-Entwicklung.

So erstellen Sie ein Projekt

Klicken Sie in Blend im Menü Datei auf Neues Projekt.

Auf der linken Seite des Dialogfelds Neues Projekt wird eine Liste der Projekttypen angezeigt. Wenn Sie auf einen Projekttyp klicken, werden die Projektvorlagen, die diesem Typ zugeordnet sind, auf der rechten Seite angezeigt.
Klicken Sie in der Liste Projekttypen auf XAML (Windows Store).
Klicken Sie in der Liste der Projektvorlagen auf Leere App (XAML).
Geben Sie im Textfeld Name den Namen PickaFlick ein.
Überprüfen Sie im Textfeld Speicherort den Projektspeicherort.
Klicken Sie in der Liste Sprache auf Visual C#.
Klicken Sie in der Liste Version auf 8.1. Klicken Sie auf OK.

Anzeigen, wie die Blend-Benutzeroberfläche die Änderungen an der Anwendung wiedergibt

Die visuelle Oberfläche im Standardarbeitsbereich von Blend ermöglicht das Erstellen von Windows Store-Apps: die Entwurfsoberfläche, Bereiche, Arbeitsbereichskonfigurationen, Erstellungsansichten und Menüs. Weitere Informationen finden Sie unter Blend-Arbeitsbereich für Apps (XAML).

Wenn Sie an einem Projekt arbeiten, werden die in einem Bereich der App vorgenommenen Änderungen über die gesamte Schnittstelle hinweg umgesetzt.

Klicken Sie oben links auf die Registerkarte Projekte, um die Ordner und Dateien zu finden, die automatisch generiert werden, wenn Sie ein Projekt mit der Vorlage Leere App erstellen:

Verweise Enthält Projektverweise und -dateien wie z. B. DLL-Dateien.
Objekte Enthält Projektressourcen, einschließlich der Standardbildanlagen für Ihre Windows Store-App.
Eigenschaften Enthält allgemeine Assemblyinformationen.
App.xaml Deklariert freigegebene Ressourcen und behandelt globale Ereignisse auf Anwendungsebene. App.xaml ist erforderlich, um die Benutzeroberfläche anzuzeigen.
MainPage.xaml Dies ist die Standardstartseite der App.
package.appxmanifest Enthält Metadaten, die die App beschreiben. Unter anderem Anzeigenamen, Logos, App-Beschreibung, Deklarationen, Funktionen und Bereitstellungsverpackung.

Projektbereich in Blend

Weitere Informationen finden Sie unter Projektbereich (XAML).

Unter dem Bereich Projekteunten links in der Schnittstelle befindet sich der Bereich Objekte und Zeitachsen. Im Bereich Objekte und Zeitachsen wird die Struktur von MainPage.xaml angezeigt.

Der Bereich Objekte und Zeitachsen stellt eine Ansicht der Objekthierarchie der Seite bereit, an der Sie arbeiten. Wenn Sie direkt im Bereich Objekte und Zeitachsen arbeiten, können Sie die Objekthierarchie schnell und einfach ändern.

Weitere Informationen finden Sie unter Objekte und Zeitachsen (Bereich) (XAML).

Indem Sie das Projekt in der Ansicht Geteilt anzeigen, können Sie sowohl die Entwurfsoberfläche als auch den Code für MainPage.xaml gleichzeitig anzeigen. Wenn Sie Elemente ändern, die auf der Entwurfsoberfläche angezeigt werden, wird der Code automatisch aktualisiert. Wenn der Code für MainPage.xaml nicht angezeigt wird, klicken Sie auf das Ansichtssymbol Teilen in der rechten oberen Ecke der Entwurfsoberfläche.

In diesem Verfahren fügen Sie MainPage.xaml eine Hintergrundfarbe hinzu und überprüfen, ob der Code bei der Arbeit aktualisiert wird.

So ändern Sie den Hintergrund von MainPage.xaml

Klicken Sie im Bereich Objekte und Zeitachsen auf Raster.
Klicken Sie im Bereich Eigenschaften in der Kategorie Pinsel auf das Symbol Pinsel mit Volltonfarbe.
Geben Sie im Textfeld Farbtonwert den Wert #D5BF9A ein und drücken Sie anschließend die EINGABETASTE.

Das Tag Grid in der Codeansicht enthält jetzt das Attribut Background="#FFD5BF9A" (als Alpha-Wert wird standardmäßig 100 % oder FF verwendet), und die neue Hintergrundfarbe wird in der Entwurfsoberfläche angezeigt.

Dem Projekt Bilder hinzufügen

Die PickaFlick-App wird mit Bildern erstellt, die von einem Grafikdesigner erstellt wurden. Neben dem Hinzufügen von visuellem Reiz dient das ChickenSprite-Bild auch als Schaltfläche, auf die der Benutzer zum Starten der App klickt.

Die folgenden Bilder sind im Beispielprojekt enthalten:

ChickenSprite
FilmStrip
MainLogo
SmallLogo-Huhn
Temp

Sie können die Bilder dem Projekt wie folgt hinzufügen:

Mithilfe des Befehls Vorhandenes Element hinzufügen im Menü Projekt
Kopieren und Einfügen
Drag & Drop

In diesem Beispiel werden Sie die Bilder kopieren und einfügen.

So fügen Sie dem Projekt die Bilder hinzu

Wenn Sie das Beispielprojekt heruntergeladen haben, öffnen Sie den Ordner PickaFlick Assets, drücken Sie STRG+A und dann STRG+C.
Klicken Sie in Blend im Bereich Projekte mit der rechten Maustaste auf den Ordner Objekte, und klicken Sie dann auf Einfügen.

Sie können die Bilder zum Formatieren der App der Entwurfsoberfläche hinzufügen.

Formatieren von Bildern und Elementen

Die Darstellung von MainPage.xaml basiert auf drei Bildern: dem Logo (Schild), einem Hintergrundbild (grüner Filmstreifen) und der Schaltfläche (Huhn). Jedes dieser Bilder wird auf eine andere Art implementiert. Das erste Bild, das Logo (MainLogo.png), ist ein einfaches Image-Steuerelement. Das zweite Bild, der Filmstreifen (FilmStrip.png), ist ein schmales Bild, das wiederholt wird, um so den Anschein eines viel größeren Bilds zu erwecken. Der Filmstreifen wird mithilfe von C#-Laufzeitcode implementiert. Das dritte Bild, die Hühnerschaltfläche (ChickenSprite.png) beginnt als Image-Steuerelement, wird jedoch mithilfe der Option Steuerelement erstellen in ein Button-Steuerelement umgewandelt.

Beim Erstellen einer App ändern Sie die Darstellung der App hauptsächlich dadurch, dass Sie Eigenschaften auf Elemente anwenden. Diese Eigenschaften werden in der Entwurfsoberfläche im Bereich Eigenschaften hinzugefügt. Sie können Eigenschaften im Bereich Eigenschaften auf drei Arten anordnen: nach Kategorie, nach Name oder nach Quelle.

Blend - Eigenschaftenbereich - Anordnen nach

Wenn Sie Eigenschaften nach Kategorie anordnen, werden die Eigenschaften nach Kategorie gruppiert angezeigt, wobei die Kategorien alphabetisch angeordnet sind. Wenn Sie die Eigenschaften nach Name anordnen, wird eine alphabetische Liste aller verfügbaren Eigenschaften angezeigt. Wenn Sie die Eigenschaften nach Quelle anordnen, werden sie nach Lokal, Bindung und Ressource oder Andere gruppiert und innerhalb dieser Kategorien alphabetisch geordnet.

Hinzufügen und Formatieren eines Bild-Steuerelements

Im folgenden Verfahren fügen Sie das Hauptlogo für die PickaFlick-App mithilfe eines Image-Steuerelements hinzu und formatieren es.

So fügen Sie das Hauptlogo hinzu und formatieren es

Doppelklicken Sie im Bereich Projekte auf MainLogo.png, um das Logo in der Entwurfsoberfläche hinzuzufügen.

Das Bild wird in der Entwurfsoberfläche angezeigt, und im Bereich Objekte und Zeitachsen wird ein Bild-Steuerelement hinzugefügt.

Beachten Sie, dass im Bereich Eigenschaften in der Kategorie Allgemein das Quellattribut für das Bild-Steuerelement Assets/MainLogo.png lautet.
Für eine einfachere Verwaltung des Image-Steuerelements, das das Hauptlogobild enthält, geben Sie MainLogo oben im Bereich Eigenschaftenim Textfeld Name ein. Beachten Sie, dass im Bereich Objekte und Zeitachsen das Image-Steuerelement in MainLogo umbenannt wurde.
Klicken Sie im Bereich Eigenschaften in der Kategorie Layout rechts neben Rand auf den Indikator Erweiterte Eigenschaften , und klicken Sie dann auf Zurücksetzen.

Tipp

Die Indikatorbezeichnung Erweiterte Eigenschaften ändert sich auf Grundlage der Ressourcen und Datenbindungen.In dieser Instanz lautet die Bezeichnung Lokal.
Klicken Sie in der Kategorie Allgemein in der Liste Strecken auf Kein.

Das Hauptlogo wird jetzt in der Mitte der Entwurfsoberfläche angezeigt.

Hinzufügen eines Bilds, das zur Laufzeit gerendert wird

Der Filmstreifen (FilmStrip.png) ist ein schmales Bild, das wiederholt wird, um so den Anschein eines viel größeren Bilds zu erwecken. Da die Eigenschaft TileBrush.TileMode (eine Eigenschaft, die das Teilen von Bildern unterstützt) in Windows Store-Apps nicht unterstützt wird, verwendet die PickaFlick-App C#-Code, um eine Reihe von Image-Steuerelementen in einem Layoutcontainer anzuordnen. In diesem Fall handelt es sich um ein Raster-Steuerelement namens FilmStrip.

Erstellen des FilmStrip-Layoutcontainers

Da Blend nicht für die Arbeit mit Code optimiert ist, erstellen Sie das Hauptraster in Blend und wechseln dann für die Entwicklung des Codes zu Visual Studio.

So erstellen Sie den Container für das FilmStrip-Bild

Achten Sie darauf, dass Raster im Bereich Objekte und Zeitachsen ausgewählt ist. Doppelklicken Sie im Bereich Objekte auf Raster, um ein Grid-Steuerelement in der Entwurfsoberfläche hinzuzufügen.

Tipp

Wechseln Sie zu Raster, indem Sie Raster im Feld Suchen eingeben, oder öffnen Sie Steuerelemente, klicken Sie auf Panels und dann auf Raster.
Benennen Sie das zweite Raster-Steuerelement im Bereich Objekte und Zeitachsen um, indem Sie darauf klicken und dann FilmStrip eingeben.
Achten Sie darauf, dass FilmStrip ausgewählt ist. Setzen Sie im Bereich Eigenschaften in der Kategorie Layout die Breite auf 2560 (für breitere Geräte) und die Höhe auf 218 (Höhe von FilmStrip.png).

Beachten Sie, dass der Steuerelement-Funktionsindikator oben in der Entwurfsoberfläche erweitert wird.
Setzen Sie VerticalAlignment in der Kategorie Layout auf Zentriert .

Beachten Sie, dass der Steuerelement-Funktionsindikator sich jetzt in der Mitte der Entwurfsoberfläche befindet.

Wechseln zu Visual Studio und wieder zurück

Jetzt haben Sie das Grid-Steuerelement FilmStrip erstellt und können zu Visual Studio wechseln, um den Code fertig zu stellen.

Beim Bearbeiten eines Projekts können Sie einfach zwischen Blend und Visual Studio wechseln. Eine Projektdatei kann sogar auf dem gleichen Computer gleichzeitig in Blend und in Visual Studio geöffnet sein. Wenn Sie eine Änderung an einer Datei in einem Tool speichern und dann zu dem anderen Tool wechseln, laden Sie die Datei einfach neu, um die Ansicht des Projekts zu aktualisieren.

Wichtig

Sie können Code in Blend oder Visual Studio kopieren und einfügen.Doch ist Visual Studio das empfohlene Tool zum Schreiben oder Bearbeiten von C#.In diesem Schritt wird gezeigt, wie Sie zwischen Blend und Visual Studio problemlos wechseln können, wenn Sie an einem einzelnen Projekt arbeiten.

Wenn Sie dem Projekt bei der Arbeit in Visual Studio neue Dateien hinzufügen, müssen Sie das Projekt mit Alles speichern (STRG+UMSCHALT+S) speichern, oder die App erstellen und ausführen, bevor Sie zu Blend wechseln.Wenn Sie zu Blend wechseln, wird eine Meldung angezeigt, mit der Sie gefragt werden, ob Sie das Projekt erneut laden möchten.Klicken Sie auf Ja, und die neuen Dateien werden dem Projekt in Blend hinzugefügt.

Anschließend wechseln Sie zu Visual Studio und erstellen den Code, der das FilmStrip-Bild rendert, wenn die Hauptseite der App geladen wird.

Erstellen einer neuen Klasse

In diesem Verfahren erstellen Sie eine neue Klassendatei namens TileCanvas.cs. Hierbei handelt es sich um den Code, der die Bild-Steuerelemente anordnet, die in dem Grid-Steuerelement (FilmStrip) enthalten sind, das Sie in Blend erstellt haben.

So erstellen Sie TileCanvas.cs

Klicken Sie im Bereich Projekte in Blend mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf In Visual Studio bearbeiten.
Klicken Sie in Visual Studio im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, klicken Sie auf Hinzufügen und dann auf Klasse.
Klicken Sie im Dialogfeld Neues Element hinzufügen auf Klasse. Geben Sie im Textfeld Name den Namen TileCanvas.cs ein, und klicken Sie auf Hinzufügen.

Fügen Sie in der Datei TileCanvas.cs nach using System.Threading.Tasks; die folgenden using-Anweisungen ein:

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Foundation;

Löschen Sie den Code class TileCanvas {} und ersetzen Sie ihn durch den folgenden Code (Grundlage ist die Datei TileCanvas.cs von Rob Fonseca-Ensor, die unter https://gist.github.com/robfe/3077863#file-tilecanvas-cs verfügbar ist und mit Genehmigung gemäß der Apache 2.0-Lizenz verwendet wird.):

public class TileCanvas : Canvas
    {
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));

        private Size lastActualSize;

        public TileCanvas()
        {
            LayoutUpdated += OnLayoutUpdated;
        }

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
           set { SetValue(ImageSourceProperty, value); }
        }

        private void OnLayoutUpdated(object sender, object o)
        {
            var newSize = new Size(ActualWidth, ActualHeight);
            if (lastActualSize != newSize)
            {
                lastActualSize = newSize;
                Rebuild();
            }
        }

        private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
        {
            TileCanvas self = (TileCanvas)o;
            var src = self.ImageSource;
            if (src != null)
            {
                var image = new Image { Source = src };
                image.ImageOpened += self.ImageOnImageOpened;
                image.ImageFailed += self.ImageOnImageFailed;

                //add it to the visual tree to kick off ImageOpened
                self.Children.Add(image);
            }
        }

        private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
        }

        private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Rebuild();
        }

        private void Rebuild()
        {
            var bmp = ImageSource as BitmapSource;
            if (bmp == null)
            {
                return;
            }

            var width = bmp.PixelWidth;
            var height = bmp.PixelHeight;

            if (width == 0 || height == 0)
            {
                return;
            }

            Children.Clear();
            for (int x = 0; x < ActualWidth; x += width)
            {
                for (int y = 0; y < ActualHeight; y += height)
                {
                    var image = new Image { Source = ImageSource };
                    Canvas.SetLeft(image, x);
                    Canvas.SetTop(image, y);
                    Children.Add(image);
                }
            }
            Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
        }
    }

Drücken Sie zum Speichern der Änderungen STRG+S.

Ändern von MainPage.xaml.cs

Indem Sie der Seite einen Verweis auf den Windows.UI.Xaml.Media.Imaging-Namespace hinzufügen, können Sie einen URI als Verweis auf eine Bildquelle verwenden. Dieser URI zeigt auf FilmStrip.png.

So fügen Sie einen Verweis auf den Windows.UI.Xaml.Media.Imaging-Namespace hinzu

Erweitern Sie MainPage.xaml im Projektmappen-Explorer, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie nach using Windows.UI.Xaml.Navigation; die folgende Anweisung hinzu:
```
using Windows.UI.Xaml.Media.Imaging;
```

Hinzufügen eines PageLoaded-Ereignisses

TileCanvas.cs stellt den Code bereit, der das FilmStrip-Raster mit Image-Steuerelementen füllt. Aufgrund des Verweises auf den Windows.UI.Xaml.Media.Imaging-Namespace besteht die Möglichkeit, auf einen bestimmten Bild-URI zu zeigen. Zur Fertigstellung des Codes müssen Sie ein Page_Loaded-Ereignis hinzufügen, das TileCanvas.cs aufruft und den Bild-URI definiert, wenn MainPage.xaml geladen wird.

So fügen Sie ein PageLoaded-Ereignis zu MainPage.xaml hinzu

Doppelklicken Sie im Projektmappen-Explorer auf MainPage.xaml.
Klicken Sie in der XAML-Ansicht innerhalb der Page-Zeile oben auf der Seite. Klicken Sie im Bereich Eigenschaften auf die Schaltfläche Ereignisse .
Doppelklicken Sie innerhalb des Textfelds Geladen, um ein Page_Loaded-Ereignis zu MainPage.xaml hinzuzufügen.

MainPage.xaml.cs wird geöffnet, und der folgende Code wurde der Seite hinzugefügt.
```
private void Page_Loaded(object sender, RoutedEventArgs e) {}
```

Fügen Sie den folgenden Code zwischen den geschweiften Klammern ein, die hinter private void Page_Loaded(object sender, RoutedEventArgs e) stehen:

            TileCanvas tc = new TileCanvas();
            BitmapImage img = new BitmapImage();
            Uri baseUri = new Uri("ms-appx:///");
            img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
            tc.ImageSource = img;
            FilmStrip.Children.Add(tc);

Drücken Sie STRG+UMSCHALT+S, um alle Änderungen am Projekt zu speichern.

Wechseln Sie wieder zu Blend. Es wird eine Meldung mit der Frage angezeigt, ob Sie das Projekt erneut laden möchten. Klicken Sie auf Ja.
Drücken Sie F5, um das Projekt zu erstellen und auszuführen. Beachten Sie, dass sich der Filmstreifen wie erwartet über die App-Anzeige erstreckt. Jedoch befindet er sich vor dem Hauptlogo und verdeckt es. Drücken Sie ALT+F4, um die App zu schließen.
In Blend im Bereich Objekte und Zeitachsen können Sie sehen, dass FilmStrip sich in der Objekthierarchie unter MainLogo befindet. Die Objektebenen (auch ZIndex genannt) in einer XAML-Datei werden durch die Reihenfolge der Hierarchie bestimmt. Klicken Sie auf FilmStrip, und ziehen Sie das Objekt so, dass es in der Hierarchie vor MainLogo angezeigt wird.

Tipp

Alternativ können Sie den ZIndex im Bereich Eigenschaften festlegen und dann auswählen, dass Elemente im Bereich Objekte und Zeitachsen angezeigt werden, indem Sie auf Nach Z-Reihenfolge anordnen unten links im Bereich klicken.

Tipp

Der blaue Funktionsindikator gibt die Einfügemarke an.
Drücken Sie F5, um die App zu erstellen und auszuführen. Beachten Sie, dass der Filmstreifen jetzt wie erwartet hinter dem Hauptlogo angezeigt wird. Drücken Sie ALT+F4, um die App zu schließen.

Erstellen der Hühnerschaltfläche

Das dritte Bild in der PickaFlick-App ist das Schaltflächenbild (ChickenSprite.png). Sie können eine Schaltfläche schnell aus einem Bild erstellen, indem Sie in der Entwurfsoberfläche ein Bild-Steuerelement hinzufügen und das Bild dann in ein Button-Benutzersteuerelement umwandeln. Sie können dann die Vorlage Schaltfläche verwenden, die automatisch generiert wird, wenn Sie ein Button-Steuerelement erstellen.

Erstellen eines Benutzersteuerelements aus einem Bild

Im folgenden Verfahren fügen Sie die Hühnerschaltfläche in der Entwurfsoberfläche hinzu und wandeln sie dann mit dem Befehl Steuerelement erstellen in ein Button-Steuerelement um.

So erstellen Sie das ChickenButton-Steuerelement

Stellen Sie sicher, dass Raster im Bereich Objekte und Zeitachse ausgewählt ist. Öffnen Sie im Bereich Projekte den Ordner Objekte, und doppelklicken Sie dann auf ChickenSprite.png, um der Entwurfsoberfläche das Bild hinzufügen.
Benennen Sie die Image-Steuerelemente im Bereich Objekte und Zeitachsen um, indem Sie darauf klicken und dann ChickenSprite eingeben. Drücken Sie die EINGABETASTE.
Klicken Sie im Menü Tools auf Steuerelement erstellen.

Das Dialogfeld Steuerelement erstellen wird geöffnet.
Klicken Sie im Dialogfeld Steuerelement erstellen in der Liste Steuerelemente auf Schaltfläche.
Geben Sie im Textfeld Name (Schlüssel) den Namen ChickenButton ein.
Unter Definieren in ist Dieses Dokument ausgewählt. In der Dropdownliste Dieses Dokument wird Seite: <kein Name> angezeigt. Klicken Sie auf OK.

Das Image-Steuerelement ChickenSprite ist jetzt ein Button-Steuerelement. Beachten Sie, dass die Schaltflächenvorlage jetzt im Bereich Objekte und Zeitachsen angezeigt wird (wird auch als Vorlagenbearbeitungsmodus bezeichnet). Die Vorlage wird oben im Bereich hervorgehoben (ChickenButton (Schaltflächenvorlage)). Die Vorlagenobjekthierarchie wird angezeigt (Raster, ChickenSprite-Steuerelement und ContentPresenter).

Blend - Schaltflächenvorlage - Objekte und Zeitachse

Formatieren einer Steuerelementvorlage

Jetzt können Sie die Steuerelementvorlage anpassen. Sie beginnen, indem Sie den ContentPresenter entfernen (das Steuerelement, das den Schaltflächentext in der Entwurfsoberfläche anzeigt). Sie ändern den Containertyp und ändern dann die Anzeige so, dass der Container nur die obere Bildhälfte anzeigt. Die zweite Bildhälfte wird ausgeblendet.

So ändern Sie die Schaltflächenvorlage

Zum Entfernen des ContentPresenter-Objekts klicken Sie im Bereich Objekte und Zeitachsen mit der rechten Maustaste auf [ContentPresenter]. Dann klicken Sie auf Löschen.
Ändern Sie den Typ des Layoutcontainers, indem Sie mit der rechten Maustaste auf Raster klicken und dann auf Layouttyp ändern und auf Viewbox klicken.
Um die Größe von Viewbox um die Hälfte zu verringern, setzen Sie die Höhe in der Kategorie Layout im Bereich Eigenschaften auf 180.
Die Bildgröße wird an die Höhe von Viewbox angepasst. Um dieses Problem zu beheben, setzen Sie Strecken in der Kategorie Darstellung im Bereich Eigenschaften auf Kein.

Das Bild erstreckt sich jetzt über die Breite des Viewbox-Steuerelements, und nur die obere Bildhälfte ist sichtbar.
Die Bearbeitung der Vorlage ist jetzt beendet. Daher beenden Sie den Vorlagenbearbeitungsmodus, indem Sie auf das Symbol Bereich auf "{...}" zurücksetzen oben im Bereich Objekte und Zeitachsen klicken.
Um das Schaltflächen-Steuerelement in die Mitte der App-Anzeige zu verschieben, klicken Sie in der Kategorie Layout rechts neben Rand auf das Symbol Erweiterte Eigenschaften und dann auf Zurücksetzen. Klicken Sie auf das Symbol Zentriert neben HorizontalAlignment.

Hinzufügen der Änderung eines visuellen Zustands

Wenn Sie die PickaFlick-App ausführen, ist ChickenButton das Steuerelement, das die Filmdetailseite öffnet, wenn der Benutzer darauf klickt. Wenn Sie mit dem Mauszeiger auf ChickenButton zeigen, scheint das Huhn sich zu bewegen. Dieser interaktive Effekt ist die Änderung eines visuellen Zustands, die auf das Steuerelement angewendet wird. Standardmäßig wird nur die obere Hälfte des Bilds angezeigt. Wenn Sie darauf zeigen, wird der ausgeblendete untere Bildbereich sichtbar, ersetzt die Standardansicht und simuliert eine Animation.

Um die Zustandsänderung hinzuzufügen, bearbeiten Sie die ChickenButton-Vorlage.

So fügen Sie dem ChickenButton-Steuerelement eine Änderung des visuellen Zustands hinzu

Klicken Sie im Bereich Objekte und Zeitachsen mit der rechten Maustaste auf Schaltfläche, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle bearbeiten.

Alternativ können Sie in der Breadcrumb-Leiste unter der Dokumentregisterkarte auf Vorlage klicken.
Klicken Sie im Bereich Objekte und Zeitachsen auf ChickenSprite.
Klicken Sie im Bereich Zustände auf PointerOver.
Setzen Sie im Bereich Eigenschaften in der Kategorie Layout den oberen Rand auf - 179.

Warnung

Wenn der obere Randauf - 180 gesetzt wird, ist sowohl die obere als auch die untere Bildhälfte sichtbar.
Sie können die Zustandsaufzeichnung durch Klicken auf die Anzeige für den Aufzeichnungsmodus im Entwurfsfenster unter den Dokumentregisterkarten beenden.
Beenden Sie den Vorlagenbearbeitungsmodus, indem Sie auf das Symbol Bereich auf "{...}" zurücksetzen oben im Bereich Objekte und Zeitachsen klicken.

Drücken Sie F5, um die App zu erstellen und auszuführen. Zeigen Sie auf den Hühnerbild, um zu bestätigen, dass das die Zustände des Hühnerbilds gewechselt werden. Drücken Sie ALT+F4, um die App zu schließen.

Sie können nun die Detailseite erstellen. Informationen zum Fortsetzen finden Sie unter Erstellen Ihrer ersten Windows Store-App mit Blend, Teil 2: Detailseite (XAML und C#).