Erste Schritte: Aufbau von Visual Studio

Applies to Windows and Windows Phone

Aufbau von Microsoft Visual Studio

Kehren wir nun zum MyApp-Projekt zurück, das Sie zuvor erstellt haben. Dabei soll der Aufbau der integrierten Entwicklungsumgebung (Integrated Development Environment, IDE) von Visual Studio veranschaulicht werden.

Xcode-Entwickler sollten die in der folgenden Abbildung dargestellte Standardansicht kennen. Dabei befinden sich die Quelldateien im linken Bereich und der Editor (für UI oder Code) ist in der Mitte angeordnet. Im Bereich auf der rechten Seite sind die Steuerelemente und die zugehörigen Eigenschaften angeordnet.

Xcode-Entwicklungsumgebung

Microsoft Visual Studio ist ähnlich aufgebaut, obwohl sich die Steuerelemente in der Standardansicht auf der linken Seite in der Toolbox befinden. Die Quelldateien befinden sich im Projektmappen-Explorer auf der rechten Seite, und die Eigenschaften werden unter Eigenschaften auf der rechten Seite aufgeführt. Dieser Aufbau ist in der folgenden Abbildung dargestellt.

Visual Studio-Entwicklungsumgebung

Hinweis  Beachten Sie, dass die Dateien in der rechten Spalte der Ansicht Projektmappen-Explorer in drei Hauptabschnitte aufgeteilt sind: MyApp.Windows, MyApp.WindowsPhone und MyApp.Shared. Diese Abschnitte sind vorhanden, da es sich um eine Universal-Windows-App handelt. Quelldateien können unter „MyApp.Shared“ für beide Projekte oder nach Bedarf unter dem plattformspezifischen Abschnitt aufgeführt werden.

Wenn Sie für die Quelldateien die linke Seite und für die Steuerelemente die rechte Seite bevorzugen, können Sie die Bereich in Visual Studio neu anordnen. Wenn Sie beispielsweise die Toolbox von der linken Bildschirmseite auf die rechte Seite verschieben möchten, halten Sie die Titelleiste des Toolbox-Bereichs gedrückt, ziehen Sie sie, und legen Sie sie dann am Dropziel ganz rechts ab, das in der Mitte des Bildschirms angezeigt wird. In Visual Studio wird ein schattiertes Feld angezeigt, das die Andockposition der Toolbox nach dem Ablegen angibt.

Wenn die IDE wie in der vorherigen Abbildung aussehen soll, führen Sie die folgenden Schritte aus:

  1. Halten Sie im Projektmappen-Explorer unter MyApp.Windows die Datei MainPage.xaml gedrückt (bzw. klicken Sie mit der rechten Maustaste darauf), um sie zu öffnen.
  2. Tippen Sie auf der linken Seite auf Toolbox, um sie anzuzeigen. Tippen Sie dann in der Titelleiste des Toolbox-Bereichs auf das Reißzweckensymbol, um sie anzuheften. Dies wird in der folgenden Abbildung dargestellt.
Anheften der Toolbox in Visual Studio

Oben

Hinzufügen von Steuerelementen, Festlegen der zugehörigen Eigenschaften und Reagieren auf Ereignisse

Lassen Sie uns dem MyApp-Projekt nun einige Steuerelemente hinzufügen. Anschließend ändern wir einige der Steuerelementeigenschaften und schreiben Code, um auf eines der Steuerelementereignisse zu reagieren.

Zum Hinzufügen von Steuerelementen in Xcode öffnen Sie die gewünschte XIB-Datei und fügen Sie dann wie in der folgenden Abbildung dargestellt Steuerelemente hinzu, beispielsweise eine rechteckige Schaltfläche mit abgerundeten Ecken und eine Beschriftung. XAML-Dateien in Visual Studio ähneln XIB-Dateien.

Entwerfen von UI in Xcode

Lassen Sie uns nun einen ähnlichen Vorgang in Visual Studio ausführen. Halten Sie in der Toolbox das Button-Steuerelement gedrückt und legen Sie es auf der Entwurfsoberfläche der Datei "MainPage.xaml" ab. Führen Sie dieselbe Aktion für das TextBlock-Steuerelement aus, wie in der folgenden Abbildung dargestellt.

Entwerfen von UI in Visual Studio

In Xcode sind Layout- und Bindungsinformationen in einer XIB-Datei gespeichert. Beachten Sie, dass diese Details im Gegensatz dazu in Visual Studio in XAML-Dateien enthalten sind und in einer umfangreichen, bearbeitbaren, deklarativen Sprache dargestellt werden. Weitere Informationen zu Extensible Application Markup Language (XAML) finden Sie in der XAML-Übersicht. Alle im Bereich Entwurf angezeigten Inhalte werden im XAML-Bereich definiert. Dieser Bereich ermöglicht bei Bedarf eine genauere Steuerung, und sobald Sie sich eingearbeitet haben, kommen Sie mit dem Scheiben von Code schneller voran. An dieser Stelle konzentrieren wir uns jedoch ausschließlich auf den Bereich Entwurf und die Eigenschaften.

Lassen Sie uns nun Inhalt und Namen der Schaltfläche ändern. Zum Ändern der Schaltflächeninhalte in Xcode ändern Sie im Eigenschaftsbereich der Schaltfläche den Wert des Felds Titel, wie in der folgenden Abbildung dargestellt.

Eigenschaftsfenster in Xcode

In Visual Studio gehen Sie ähnlich vor. Tippen Sie im Bereich Entwurf auf die Schaltfläche, damit sie den Fokus erhält. Wenn Sie nun die Schaltflächeninhalte ändern möchten, ändern Sie im Bereich Eigenschaften den Wert des Felds Inhalt von "Button" in "Press Me". Wenn Sie nun den Namen der Schaltfläche ändern möchten, ändern Sie den Wert im Feld Name von "<No Name>" in "myButton", wie in der folgenden Abbildung dargestellt.

Fenster "Schaltflächeneigenschaften" in Visual Studio

Lassen Sie uns nun einen Code zum Ändern der Inhalte des TextBlock-Steuerelements in "Hello, World!" schreiben, sodass dieser Text angezeigt wird, nachdem der Benutzer auf die Schaltfläche getippt hat.

In Xcode würden Sie das Verhalten für ein Ereignis zu einem Steuerelement zuordnen, indem Sie Code schreiben und diesen Code dann dem Steuerelement zuordnen. Siehe folgender Code und folgende Abbildung.


// Objective-C header.

-(IBAction) buttonPressed: (id) sender;


// Objective-C implementation.

-(IBAction) buttonPressed: (id) sender {

}

Verknüpfen einer Schaltfläche mit einem Ereignis in Xcode

Beachten Sie, dass Sie in Xcode einem Steuerelement auch einen Ereigniscode zuordnen können, wie in der folgenden Abbildung dargestellt.

Alternative Methode zum Verknüpfen einer Schaltfläche mit einem Ereignis in Xcode

Visual Studio ist ähnlich aufgebaut. Rechts über den Eigenschaften befindet sich eine Schaltfläche mit einem Gewitterblitz. Dort werden die dem ausgewählten Steuerelement zugeordneten Ereignisse aufgelistet, wie in der folgenden Abbildung dargestellt.

Schaltflächenereignisliste in Visual Studio

Um Code für das Klickereignis der Schaltfläche hinzuzufügen, tippen Sie im Bereich Entwurf zuerst auf die Schaltfläche. Tippen Sie dann auf die Schaltfläche mit dem Blitz, und halten Sie das Feld neben der Bezeichnung Click gedrückt. Visual Studio fügt den Text "myButton_Click" zum Feld Click hinzu. Anschließend wird der entsprechende Ereignishandler zur Datei "MainPage.xaml.cs" hinzugefügt und angezeigt, wie im folgenden Code dargestellt.


private void myButton_Click(object sender, RoutedEventArgs e)
{

}

Ändern wir nun den Namen des TextBlock-Steuerelements. In Xcode müssten Sie dazu den folgenden Code schreiben und dem Steuerelement eine Definition zuordnen, wie in der folgenden Abbildung dargestellt.


// Objective-C header.

IBOutlet UILabel *myLabel;

Verknüpfen einer Bezeichnung mit der zugehörigen Definition in Xcode

Beachten Sie, dass Sie in Xcode dem Code auch die zugehörige Definition zuordnen können, wie in der folgenden Abbildung dargestellt.

Alternative Methode zum Verknüpfen einer Bezeichnung mit der zugehörigen Definition in Xcode

In Visual Studio führen Sie diese Aktion gemäß Darstellung in der folgenden Abbildung aus:

  1. Tippen Sie auf die Registerkarte der Datei "MainPage.xaml".
  2. Tippen Sie im Bereich Entwurf auf das TextBlock-Steuerelement.
  3. Tippen Sie im Bereich Eigenschaften auf die Schaltfläche mit dem Schraubenschlüssel, um die zugehörigen Eigenschaften anzuzeigen.
  4. Ändern Sie im Feld Name den Eintrag "<No Name>" in "myLabel".
Fenster "Bezeichnungseigenschaften" in Visual Studio

Lassen Sie uns nun dem Klickereignis der Schaltfläche Code hinzufügen. Tippen Sie dazu auf die Datei "MainPage.xaml.cs", und fügen Sie dem myButton_Click-Ereignishandler den folgenden Code hinzu.


private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

Der vorherige Code ähnelt dem Code, den Sie in Xcode schreiben würden, siehe unten.


-(IBAction) buttonPressed: (id) sender {
    myLabel.text = @"Hello, World!";
}

Stellen Sie zum Schluss zum Ausführen der App in Visual Studio sicher, dass MyApp.Windows fett dargestellt wird (womit angegeben wird, dass dies das Standard-Startprojekt ist), und tippen Sie auf das Menü Debuggen. Tippen Sie dann auf Debugging starten (oder drücken Sie einfach F5). Nachdem die App gestartet wurde, tippen Sie auf die Schaltfläche "Press Me". Sie werden feststellen, dass der Inhalt der Bezeichnung von "TextBlock" zu "Hello, World!" geändert wurde, wie in der folgenden Abbildung dargestellt.

Ausführungsergebnisse der ersten exemplarischen Vorgehensweise: Hello, World!

Wenn Sie die App beenden möchten, tippen Sie in Visual Studio auf das Menü Debuggen, und tippen Sie dann auf Debugging beenden (oder drücken Sie einfach die UMSCHALTTASTE+F5).

Sie können den Prozess für das Windows Phone-Projekt wiederholen, indem Sie genau dieselben Schritte ausführen – dieses Mal aber für MainPage.xaml unter dem Zweig MyApp.WindowsPhone. Wenn dies das Einzige wäre, was Ihre App ausführen würde, könnten Sie die Datei MainPage.xaml natürlich in den Zweig MyApp.Shared ziehen und die vorhandene MainPage.xaml unter dem Zweig MyApp.WindowsPhone löschen. Dadurch würde die Datei MainPage.xaml zwischen beiden Plattformen gemeinsam verwendet, sodass Sie weniger Arbeitsaufwand hätten.

Nächster Schritt

Erste Schritte: Allgemeine Steuerelemente

 

 

Anzeigen:
© 2014 Microsoft