Georg fährt extra nach Berlin um Steve Ballmer zu treffen

31 Tage Mango | Tag #19: Tilt Effekt

Dieser Artikel ist Tag #19 der Serie 31 Tage Mango von Jeff Blankenburg.

Der Originalartikel befindet sich hier: Day #19: Tilt Effects.

Dieser Artikel wurde in der Originalserie von Gastautor Doug Mair geschrieben. Bei Twitter kann Doug unter @doug_mair erreicht werden.

Anwendungen, die wie native Windows Phone Anwendungen aussehen und sich auch so verhalten, werden Windows Phone Anwendern attraktiver erscheinen. Ihre Anwendung sollte so viel natives Verhalten zeigen wie möglich. Ein Vehalten, welches in vielen nativen Anwendungen gefunden werden kann, ist der TiltEffect. Schauen Sie sich zum Beispiel die Liste Ihrer getätigten Anrufe an.

Achten Sie darauf, was passiert, wenn Sie einen Eintrag aus der Liste wählen. Sie sehen, wie der Eintrag leicht unter Ihrem Finger kippt. Wenn Sie loslassen, kippt der Eintrag in seine ursprüngliche Position. Diese dezente Kipp-Animation gibt Ihnen die Sicherheit, dass das Telefon Ihre Eingabe verarbeitet hat. Es ist nur ein subtiler Effekt – er wird aber die Zufriedenheit Ihrer Anwender steigern, da sie eine visuelle Rückmeldung auf ihre Aktionen bekommen.

In diesem Artikel schauen wir uns an, wie wir die Controls unserer Silverlight Anwendung mit dem TiltEffect ausstatten können. Wir werden eine Beispielanwendung entwickeln, die den TiltEffect in Aktion zeigt. Weiterhin werden wir den TiltEffect zur Laufzeit der Anwendung ein- und ausschalten.

Vorbereitungen zur Verwendung des TiltEffects

Der TiltEffect ist nicht im Standardumfang des Windows Phone SDK enthalten. Wir verwenden deshalb ein Codebeispiel von Microsoft. Um das kippende Verhalten zu erreichen, verwenden wir eine C# Datei mit dem Namen TiltEffect.cs aus dem Control Tilt Effect Sample auf MSDN.

Als erstes laden Sie das Beispiel herunter und entpacken die Dateien in einen Ordner auf Ihrem Computer. Die Datei TiltEffect.cs befindet sich im Unterverzeichnis ControlTiltEffect. Merken Sie sich den Speicherort der Datei, so dass Sie diese zu Ihrem Projekt hinzufügen können.

Um die Datei Ihrem Silverlight Projekt hinzuzufügen, machen Sie folgendes:

  1. Öffnen Sie Ihr Projekt im Visual Studio und klicken Sie rechts auf Ihr Projekt.
  2. Wählen Sie aus dem Kontextmenü Add und dann Existing Item…
  3. Im Dialog Add Existing Item navigieren Sie zur zuvor heruntergeladenen Datei TiltEffect.cs und wählen Sie diese aus.
  4. Damit wird eine Kopie der Datei in Ihrem Projektverzeichnis angelegt und diese Ihrem Projekt hinzugefügt.

Namespace

Öffnen Sie die Datei TiltEffect.cs. Sie sehen, dass der Namespace oben in der Datei ControlTiltEffect heißt. Entweder Sie ändern den Namespace auf den Standardnamespace Ihres Projekts oder Sie lassen ihn unverändert. In unserem Beispiel werden wir den Namespace ControlTiltEffect beibehalten.

Wenn Sie den TiltEffect in Ihrer Anwendung verwenden wollen, müssen Sie diesen Namespace erst bekannt machen. Hierzu fügen Sie folgende Zeilen im Kopf der XAML Datei hinzu, in der Sie den TiltEffect verwenden möchten:

xmlns:local="clr-namespace:ControlTiltEffect"
local:TiltEffect.IsTiltEnabled="True"

Mit der ersten Zeile erstellen wir ein Alias local für den Namespace ControlTiltEffect. Damit können wir die im Namespace enthaltenen Klassen in unserer Seite verwenden.

Die zweite Zeile aktiviert den TiltEffect. Allein durch diese zwei Zeilen werden alle Buttons und ListBoxes auf der Seite das TiltEffect Verhalten zeigen. Sie werden also leicht unter dem Finger wegkippen. Wie wir später sehen, können wir das Verhalten auch für einzelnen Controls auf der Seite an- oder ausschalten.

Da wir jetzt wissen, wie wir das TiltEffect Verhalten unserem Projekt und unseren Seiten hinzufügen können, lassen Sie uns ein konkretes Beispiel betrachten.

Beispielanwendung

Die Beispielanwendung enthält viele Controls, die das Verhalten des TiltEffect demonstrieren. Die meisten Buttons und ListBoxes auf der Seite werden kippen, wenn Sie darauf drücken. Durch die Zeile TiltEffect.IsTiltEnabled=“True“ ist dies das Standardverhalten der Controls auf der Seite.

Den TiltEffect für ein einzelnes Control unterdrücken: die Eigenschaft SuppressTilt

Angenommen, wir haben einen bestimmten Button auf der Seite, der nicht kippen soll. Wie können den TiltEffect für jedes einzelne Control individuell ein- und ausschalten. In unserem Beispiel wird der zweite Button nicht kippen, da wir hier die Eigenschaft Suppressed gesetzt haben. Hier ist der XAML Code für den zweiten Button:

<Button local:TiltEffect.SuppressTilt="True"
   Content="Tilt Suppressed"
   Height="82" HorizontalAlignment="Left"
   Margin="229,52,0,0"
   Name="button2" 
   VerticalAlignment="Top" 
   Width="221" />

Beachten Sie die Eigenschaft local:TiltEffect.SuppressTilt=“True“. Damit wird der TiltEffect für dieses Control unterdrückt. Die zweite ListBox hat diese Eigenschaft ebenfalls gesetzt, sie wird also auch nicht kippen. Alle anderen Controls haben die Eigenschaft nicht, sie werden also kippen.

Den TiltEffect für eine ganze Seite unterdrücken: die Eigenschaft IsTiltEnabled

Es ist natürlich auch möglich, den TiltEffect für eine ganze Seite zu unterdrücken. Unten auf der Seite sehen Sie einen Button „Stop Tilts“. Wenn der Button gedrückt wird, werden alle TiltEffects der Seite unterdrückt. Wenn Sie ihn noch mal drücken, werden die TiltEffects wieder aktiviert.

Der Handler button3_Click erledigt diese Arbeit für uns. Um die TiltEffects auch im C# code-behind zu verwenden, fügen wir oben ein Statement using ControlTiltEffect; ein.

Im Handler button3_Click fragen wir dann den aktuellen Wert der Eigenschaft IsTiltEnabled der ganzen Seite ab. Hier verwenden wir eine kleine Methode der Klasse TiltEffect GetIsTiltEnabled, welche das DependencyProperty der ganzen Seite ausliest. Beachten Sie, dass der Übergabeparameter this unsere ganze Seite repräsentiert. Den Rückgabewert merken wir uns in der Variable tiltEnabled.

Dann setzen wir den Inhalt des Buttons ToggleTilting abhängig vom Wert tiltEnabled.

Zuletzt ändern wir den Wert der Eigenschaft IsTiltEnabled für die ganze Seite genau auf das Gegenteil des ursprünglichen Werts. Wir ändern das DependencyProperty mit der Methode SetIsTiltEnabled.

Mit diesem Code können wir das Kippen aller unserer Controls ausschalten. Probieren Sie es aus. Wenn Sie den Button ToggleTilting noch mal drücken, werden alle Buttons wieder kippen.

using Microsoft.Phone.Controls;
using ControlTiltEffect;

namespace Day19_TiltEffects
{
   public partial class MainPage : PhoneApplicationPage
   {
      // Constructor
      public MainPage()
      {
         InitializeComponent();
      }

      private void button3_Click(object sender, RoutedEventArgs e)
      {
         bool tiltEnabled = TiltEffect.GetIsTiltEnabled(this);

         ToggleTilting.Content = (tiltEnabled) ? "Start Tilts" : "Stop Tilts";
         TiltEffect.SetIsTiltEnabled(this, !tiltEnabled);
      }
   }
}

Kompletter XAML Quellcode

<phone:PhoneApplicationPage
   x:Class="Day19_TiltEffects.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait" Orientation="Portrait"
   xmlns:local="clr-namespace:ControlTiltEffect"
   local:TiltEffect.IsTiltEnabled="True"
   shell:SystemTray.IsVisible="True">

   <!--LayoutRoot is the root grid where all page content is placed-->
   <Grid x:Name="LayoutRoot" Background="Transparent">
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
      </Grid.RowDefinitions>

      <!--TitlePanel contains the name of the application and page title-->
      <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
         <TextBlock x:Name="ApplicationTitle" Text="Day 19"
            Style="{StaticResource PhoneTextNormalStyle}"/>
         
         <TextBlock x:Name="PageTitle" Text="Tilt Effects" Margin="9,-7,0,0"
            Style="{StaticResource PhoneTextTitle1Style}" Height="75"
            FontSize="56" />
      </StackPanel>

      <!--ContentPanel - place additional content here-->
      <Grid x:Name="ContentPanel" Margin="12,118,12,0" Grid.RowSpan="2">
         <TextBlock Height="48" HorizontalAlignment="Left" Margin="20,6,0,0"
            Name="textBlock1" Text="Buttons" VerticalAlignment="Top"
            Width="402" FontSize="32" FontWeight="Bold" />
         
         <Button Content="Tilts" Height="82" HorizontalAlignment="Left"
            Margin="0,52,0,0" Name="button1" VerticalAlignment="Top"
            Width="202" />

         <Button local:TiltEffect.SuppressTilt="True" Content="Tilt Suppressed"
            Height="82" HorizontalAlignment="Left" Margin="229,52,0,0"
            Name="button2" VerticalAlignment="Top" Width="221" />

         <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left"
            Margin="229,140,0,0" Name="checkBox1" VerticalAlignment="Top" />

         <RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left"
            Margin="9,140,0,0" Name="radioButton1" VerticalAlignment="Top" />

         <HyperlinkButton Content="HyperlinkButton" Height="30"
            HorizontalAlignment="Left" Margin="20,218,0,0"
            Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />

         <TextBlock FontSize="32" FontWeight="Bold" Height="48"
            HorizontalAlignment="Left" Margin="20,282,0,0" Name="textBlock2"
            Text="ListBox" VerticalAlignment="Top" Width="402" />

         <ListBox Height="100" HorizontalAlignment="Left" Margin="24,314,0,0"
            Name="listBox1" VerticalAlignment="Top" Width="438" Grid.Row="1">
            <ListBoxItem Content="Tilts 1" />
            <ListBoxItem local:TiltEffect.SuppressTilt="True"
               Content="Tilt Suppressed 2" />
            <ListBoxItem Content="Tilts 3" />
         </ListBox>

         <Button Name="ToggleTilting" Content="Stop Tilts" Height="82"
            HorizontalAlignment="Left" Margin="14,495,0,0"
            VerticalAlignment="Top" Width="438" Click="button3_Click" />
      </Grid>
   </Grid>
</phone:PhoneApplicationPage>

TiltEffect im Silverlight for Windows Phone Toolkit

(Anm. leitning: diesen Absatz habe ich dazugedichtet. In der Regel braucht man nämlich die oben beschriebene Datei nicht herunterladen…)

Der TiltEffect ist auch Teil des Silverlight for Windows Phone Toolkit (welches es übrigens bei NuGet gibt). Wenn Sie das Silverlight for Windows Phone Toolkit in Ihrem Projekt verwenden, haben Sie den TiltEffect also sowieso schon. In diesem Fall müssen Sie, entgegen der obigen Beschreibung, die kleine Datei nicht herunterladen und Ihrem Projekt hinzufügen.

Gegenüber dem Quellcode dieses Artikels ändern sich bei Verwendung des Silverlight for Windows Phone Toolkits eigentlich nur die Namespaces. Im XAML Code würden Sie beispielsweise folgende Zeilen im Kopf der Seite verwenden:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
toolkit:TiltEffect.IsTiltEnabled="True"

In der code-behind Datei würden Sie entsprechend folgendes using Statement verwenden:

using Microsoft.Phone.Controls;

(Anm. leitning: so, weiter im Originaltext…)

Zusammenfassung

Indem Sie den TiltEffect zu Ihrem Projekt hinzufügen, lassen Sie Ihre Anwender durch einen subtilen Effekt wissen, dass deren Eingabe angekommen ist. Solche kleinen Details machen natürlich etwas mehr Arbeit, ohne dass die eigentliche Funktionalität der Anwendung sich ändert. Diese Mehrarbeit zahlt sich aber aus, da die Anwendung attraktiver für Ihre Anwender wird. Wir haben in diesem Artikel gesehen, wie wir den TiltEffect zu unserem Projekt hinzufügen können, wie wir ihn für eine ganze Seite aktivieren können, wie wir ihn für einzelne Controls deaktivieren können und wie wir ihn im code-behind deaktivieren können. Durch kleine Details wie den TiltEffect wird Ihre Anwendung aus der Masse hervorstechen.

Nebenbei: wenn Sie Interesse haben, empfehle ich Ihnen einen Blick in den Quellcode der Datei TiltEffect.cs. Diese ist ein gutes Beispiel für die Verwendung von Storyboards und Touch Verarbeitung. Indem Sie etwas Zeit auf das Studium dieses „Kipp-Verhaltens“ verwenden, werden Sie Ihre Kenntnisse der Windows Phone Entwicklung ausbauen. Vielleicht können Sie den Code sogar auf Ihre eigenen Bedürfnisse anpassen.

Um ein lauffähiges Windows Phone Projekt herunterzuladen, welches den TiltEffect demonstriert, klicken Sie auf den Download Code Button unten:

Morgen werden wir uns mit der Erstellung von Klingeltönen beschäftigen. Dabei werden wir die neuen Mango APIs für Klingeltöne verwenden.

Bis dahin!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.