Teil 1: Animierte Übergange bei Navigation
Teil 2: Drehanimation bei Orientierungswechsel, Animationen per Style setzen
Im dritten und letzten Teil geht es darum, das TransitionFrame Control so abzuwandeln, das automatisch Standardanimationen verwendet, sofern keine eigenen gesetzt werden.
Anstatt mühsam auf jeder Seite eigene Übergangsanimationen zu definieren, sollen diese einmal als Standard definiert werden.
Dazu verändern wir das TransitionFrame Control, das mit dem Silverlight Control Toolkit für Phone im Quellcode zur Verfügung steht.
Anlegen des Projektes & Kopieren des TransitionFrame Controls
In einer neuen Silverlight Phone Class Library wird dazu die Datei TransitionFrame.cs und das Themes Verzeichnis mit der Datei Generic.xaml aus dem Toolkit Sourcecode eingefügt. Sowohl die Klasse, als auch die Datei werden von TransitionFrame in TransitionFrameWithDefaults umbenannt.
Achtung: Benennen Sie die Klasse mit F2 / Rename um, damit wirklich alle Stellen aktualisiert werden (auch der Constructor und der Code IM Constructor!)
Fügen Sie außerdem eine Referenz auf das Silverlight Control Toolkit für Phone hinzu (Microsoft.Phone.Controls.Toolkit.dll).
Die Datei Themes\Generic.xaml, die wir zuvor aus dem Control Toolkit kopiert haben enthält die Standard Templates für alle Controls.
Löschen Sie alle Styles aus dieser Datei, außer den, der als TargetType TransitionFrame oder bereits TransitionFrameWithDefaults hat. Dieses Template enthält die beiden ContentPresenter, die die alte und die neue Seite darstellen und zwischen denen die Animation passiert.
Falls Visual Studio den Style noch nicht umbenannt hat, tun Sie das manuell:
<ResourceDictionary ..xmlns:my="clr-namespace:Knom.Phone.Controls">
<Style TargetType="my:TransitionFrameWithDefaults">
...
<ControlTemplate TargetType="my:TransitionFrameWithDefaults">
Neue Eigenschaften hinzufügen
In der neuen TransitionFrameWithDefaults Klasse werden vier Dependency Properties vom Typ TransitionElement angelegt, die die vier Standardübergänge (Vorwärts/Rückwärts/In/Out) angeben.
1: #region Properties
2:
3: public TransitionElement DefaultForwardInTransition
4: {
5: get { return (TransitionElement)GetValue(DefaultForwardInTransitionProperty); }
6: set { SetValue(DefaultForwardInTransitionProperty, value); }
7: }
8:
9: public static readonly DependencyProperty DefaultForwardInTransitionProperty =
10: DependencyProperty.Register("DefaultForwardInTransition", typeof(TransitionElement),
typeof(TransitionFrameWithDefaults), null);
11:
12: public TransitionElement DefaultForwardOutTransition
13: {
14: get { return (TransitionElement)GetValue(DefaultForwardOutTransitionProperty); }
15: set { SetValue(DefaultForwardOutTransitionProperty, value); }
16: }
17:
18: public static readonly DependencyProperty DefaultForwardOutTransitionProperty =
19: DependencyProperty.Register("DefaultForwardOutTransition", typeof(TransitionElement),
typeof(TransitionFrameWithDefaults), null);
20:
21: public TransitionElement DefaultBackwardInTransition
22: {
23: get { return (TransitionElement)GetValue(DefaultBackwardInTransitionProperty); }
24: set { SetValue(DefaultBackwardInTransitionProperty, value); }
25: }
26:
27: public static readonly DependencyProperty DefaultBackwardInTransitionProperty =
28: DependencyProperty.Register("DefaultBackwardInTransition", typeof(TransitionElement),
typeof(TransitionFrameWithDefaults), null);
29:
30: public TransitionElement DefaultBackwardOutTransition
31: {
32: get { return (TransitionElement)GetValue(DefaultBackwardOutTransitionProperty); }
33: set { SetValue(DefaultBackwardOutTransitionProperty, value); }
34: }
35:
36: public static readonly DependencyProperty DefaultBackwardOutTransitionProperty =
37: DependencyProperty.Register("DefaultBackwardOutTransition", typeof(TransitionElement),
typeof(TransitionFrameWithDefaults), null);
38:
39: #endregion
Standardanimationen verwenden
In der Methode OnContentChanged werden, sobald sich der Content des Frames auf eine neue Seite ändert, die Animationen geladen und dann ausgeführt.
An dieser Stelle fügen wir folgenden Code ein, um gegebenfalls eine Standardanimation zu verwenden (Fett & Kursiv ist der neu eingefügte Code):
1: if (_isForwardNavigation)
2: {
3: if (oldElement != null)
4: {
5: oldTransitionElement = ForwardOut(oldElement);
6: AssignDefaultTransition(ref oldTransitionElement, DefaultForwardOutTransition);
7: }
8: newTransitionElement = ForwardIn(newElement);
9: AssignDefaultTransition(ref newTransitionElement, DefaultForwardInTransition);
10: }
11: else
12: {
13: if (oldElement != null)
14: {
15: oldTransitionElement = BackwardOut(oldElement);
16: AssignDefaultTransition(ref oldTransitionElement, DefaultBackwardOutTransition);
17: }
18: newTransitionElement = BackwardIn(newElement);
19: AssignDefaultTransition(ref newTransitionElement, DefaultBackwardInTransition);
20: }
Der neu eingefügte Methodenaufruf AssignDefaultTransition überprüft, ob die übergebene Transition null ist, und nimmt in diesem Fall eine vorhandene Default Transition. Die entsprechende Hilfsmethode muss unterhalb der OnContentChanged Methode eingefügt werden:
1: private void AssignDefaultTransition(ref TransitionElement transitionElement,
2: TransitionElement defaultTransition)
3: {
4: // Keine Transition explizit gesetzt && Default Transition vorhanden
5: if (transitionElement == null && defaultTransition != null)
6: {
7: // Default Transition verwenden
8: transitionElement = defaultTransition;
9: }
10: }
Fertig!
Verwendung des Controls in einem eigenen Projekt
Nun können Sie ein neues Phone Projekt anlegen und eine Referenz auf ihre Klassenbibliothek, die das neue Control enthält hinzufügen.
In der App.xaml fügen Sie vier Standardanimationen ein:
<pt:SlideTransition Mode="SlideLeftFadeIn" x:Key="DefaultFwInTransition"/>
<pt:SwivelTransition Mode="BackwardIn" x:Key="DefaultBwInTransition"/>
<pt:SlideTransition Mode="SlideLeftFadeOut" x:Key="DefaultFwOutTransition"/>
<pt:SwivelTransition Mode="BackwardOut" x:Key="DefaultBwOutTransition"/>
Wie schon im ersten Artikel wird nun in der App.xaml.cs die Methode InitializePhoneApplication angepasst. Diesmal wird allerdings der neue Frame verwendet und die die Default Transitions aus den XAML Ressourcen geladen:
1: RootFrame = new PhoneApplicationFrame();
2: var frm = new TransitionFrameWithDefaults();
3:
4: frm.DefaultForwardInTransition = (TransitionElement)this.Resources["DefaultFwInTransition"];
5: frm.DefaultBackwardInTransition = (TransitionElement)this.Resources["DefaultBwInTransition"];
6: frm.DefaultForwardOutTransition = (TransitionElement)this.Resources["DefaultFwOutTransition"];
7: frm.DefaultBackwardOutTransition = (TransitionElement)this.Resources["DefaultBwOutTransition"];
8:
9: RootFrame = frm;
Fazit
Ohne explizite Animationen definieren zu müssen, können Sie mit dem TransitionFrameWithDefaults Control Standardseitenübergänge definieren, die für alle Seiten Ihrer Applikation gelten.
knom
