Windows Phone 7 - Navigation mit Animation–Standard Animationen (3)

Von Max Knor Autor Feed 29. December 2010 15:08

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).

image

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.

KnomImageknom

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Datenschutzhinweis: Sie stimmen durch "Kommentar speichern" der Speicherung Ihrer Angaben durch Microsoft Österreich für die Beantwortung der Anfrage zu. Sie erhalten dadurch keine unerwünschten Werbezusendungen. Ihre Emailadresse wird auf Ihren Wunsch dazu verwendet Sie über neue Kommentare zu informieren.

Microsoft respektiert den Datenschutz. Datenschutz & Cookies

Entwickler Wettbewerbe:

Wettbewerbe

Entwickler Events:

Developer Events

App für Windows 8, Windows Phone oder/und Azure? Diese Events zeigen Dir, wie es geht:

Mehr Information

Aktuelle Downloads

Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork