Weil es in Expression Blend 4 noch keine VB-Projektvorlagen für die Windows Phone-Anwendungsentwicklung gibt, stelle ich nachfolgend die Vorgehensweise für ein C#-Projekt dar. VB-Programmierer können Expression Blend 4 für das Design der Benutzeroberfläche, einschließlich der VisualStates, auch nutzen. Sie müssen aber zwei Projekte erstellen: Ein C#-Projekt, für das in Expression Blend die Benutzeroberfläche gestaltet wird. Und ein VB-Projekt in Visual Studio 2010, in das später der Xaml-Quellcode aus dem C#-Projekt eingefügt wird.
Generelle Vorgehensweise
Das Prinzip ist einfach. Jeweils ein TextBlock- und ein TextBox-Steuerelement werden in einem Grid gruppiert. Das Grid hat Spalten- und Zeilendefinitionen. Für jede Ansicht (Portrait / Landscape) wird jeweils ein visueller Zustand erzeugt, in dem die TextBlock- und TextBox-Steuerelemente jeweils verschiedene Spalten- und Zeilenzuweisungen erhalten.
Schritt 1
Ein neues Windows Phone 7-Projekt wird in Expression Blend 4 erstellt. Projektvorlage ist eine einfache Windows Phone 7-Anwendung. Der Wert der Eigenschaft "SupportedPageOrientation" in der PhoneApplicationPage wird auf "PortraitOrLandscape" gesetzt.
Schritt 2
Für das ContentPanel-Element werden vier Zeilendefinitionen erstellt.
Schritt 3
In die ersten drei Zeilen wird jeweils ein Grid eingefügt. Die Werte für HorizontalAllignment und für VerticalAllignment werden jeweils auf "1" "Star" gesetzt.
Schritt 4
Jedes der eingefügten Grid-Steuerelemente erhält zwei Zeilendefinitionen und zwei Spaltendefinitionen. Der Wert für Width der ersten Spalte wird auf "1" "Auto" gesetzt.
Schritt 5
Jedem Grid wird ein TextBlock- und eine TextBox-Steuerelement hinzugefügt. Die Anwendung befindet sich standardmäßig zunächst in der Portrait-Orientierung. Also erstellen wir zunächst das Layout für diese Ansicht.
Dies sind die maßgeblichen Eigenschaftswerte für jedes TextBlock-Element, mit denen die Zuordnung zu den einzelnen Spalten- und Zeilen erfolgt:
Und dies sind die maßgeblichen Eigenschaftswerte für jedes TextBox-Steuerelement, mit denen die Zuordnung zu den einzelnen Spalten- und Zeilen erfolgt:
Danach sieht die Anwendung in der Design-Ansicht so aus:
Schritt 6
Jetzt wechseln wir zur Registerkarte "Zustände" und erzeugen eine neue VisualStateGroup. In dieser VisualStateGroup werden zwei neue visuelle Zustände erzeugt. Der visuelle Zustand "POP" enthält den Zustand der Benutzeroberfläche in der Portrait-Ansicht (PageOrientationPortrait). Der visuelle Zustand "POL" enthält den Zustand der Benutzeroberfläche in der Landscape-Ansicht (PageOrientationLandscape).
Der visuelle Zustand POP muss nicht verändert werden, weil die anfänglich entworfene Benutzeroberfläche bereits für die Portrait-Ansicht erstellt wurde.
Für den visuellen Zustand POL müssen folgende Eigenschaften modifiziert werden. Für ein TextBlock-Steuerelement muss nur der Wert für RowSpan auf "2" gesetzt werden:
Für ein TextBox-Steuerelement müssen die Zeilen- und Spaltenzuweisungen sowie der Wert für VerticalAllignment wie folgt geändert werden:
Die übrigen TextBlock- und TextBox-Steuerelemente in den anderen Grid-Elementen werden im visuellen Zustand POL entsprechend geändert.
Schritt 7
In der CodeBehind-Datei wird schließlich der folgende Quellcode hinzugefügt. Dieser Quellcode reagiert auf das OrientationChanged-Ereignis von MainPage und wechselt den visuellen Zustand abhängig davon, in welche Ansicht gewechselt wurde.
VB:
Partial Public Class MainPage
Inherits PhoneApplicationPage
' Konstruktor
Public Sub New()
InitializeComponent()
SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape
End Sub
Private Sub MainPage_OrientationChanged(
ByVal sender As Object,
ByVal e As Microsoft.Phone.Controls.OrientationChangedEventArgs) _
Handles MyBase.OrientationChanged
If (e.Orientation And PageOrientation.Landscape) <> 0 Then
VisualStateManager.GoToState(Me, "POL", True)
Else
VisualStateManager.GoToState(Me, "POP", True)
End If
End Sub
End Class
C#:
namespace TextDesignPortraitLanscapeLab
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
SupportedOrientations =
SupportedPageOrientation.PortraitOrLandscape;
}
private void PhoneApplicationPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
VisualStateManager.GoToState(this, "POL", true);
}
else
{
VisualStateManager.GoToState(this, "POP", true);
}
}
}
}
F5! Und in der Landscape-Ansicht sieht die Benutzeroberfläche nun so aus:
Das war's.
Download: Quellcode des Beispiel-Projekts.
Keine Kommentare:
Kommentar veröffentlichen