31 Tage Mango | Tag #19: Tilt Effekt

Die­ser Arti­kel ist Tag #19 der Serie 31 Tage Man­go von Jeff Blan­ken­burg.

Der Ori­gi­nal­ar­ti­kel befin­det sich hier: Day #19: Tilt Effec­ts.

Die­ser Arti­kel wur­de in der Ori­gi­nal­se­rie von Gast­au­tor Doug Mair geschrie­ben. Bei Twit­ter kann Doug unter @doug_mair erreicht wer­den.

Anwen­dun­gen, die wie nati­ve Win­dows Pho­ne Anwen­dun­gen aus­se­hen und sich auch so ver­hal­ten, wer­den Win­dows Pho­ne Anwen­dern attrak­ti­ver erschei­nen. Ihre Anwen­dung soll­te so viel nati­ves Ver­hal­ten zei­gen wie mög­lich. Ein Vehal­ten, wel­ches in vie­len nati­ven Anwen­dun­gen gefun­den wer­den kann, ist der TiltEf­fect. Schau­en Sie sich zum Bei­spiel die Lis­te Ihrer getä­tig­ten Anru­fe an.

Ach­ten Sie dar­auf, was pas­siert, wenn Sie einen Ein­trag aus der Lis­te wäh­len. Sie sehen, wie der Ein­trag leicht unter Ihrem Fin­ger kippt. Wenn Sie los­las­sen, kippt der Ein­trag in sei­ne ursprüng­li­che Posi­ti­on. Die­se dezen­te Kipp-Ani­ma­ti­on gibt Ihnen die Sicher­heit, dass das Tele­fon Ihre Ein­ga­be ver­ar­bei­tet hat. Es ist nur ein sub­ti­ler Effekt — er wird aber die Zufrie­den­heit Ihrer Anwen­der stei­gern, da sie eine visu­el­le Rück­mel­dung auf ihre Aktio­nen bekom­men.

In die­sem Arti­kel schau­en wir uns an, wie wir die Con­trols unse­rer Sil­ver­light Anwen­dung mit dem TiltEf­fect aus­stat­ten kön­nen. Wir wer­den eine Bei­spiel­an­wen­dung ent­wi­ckeln, die den TiltEf­fect in Akti­on zeigt. Wei­ter­hin wer­den wir den TiltEf­fect zur Lauf­zeit der Anwen­dung ein- und aus­schal­ten.

Vorbereitungen zur Verwendung des TiltEffects

Der TiltEf­fect ist nicht im Stan­dard­um­fang des Win­dows Pho­ne SDK ent­hal­ten. Wir ver­wen­den des­halb ein Code­bei­spiel von Micro­soft. Um das kip­pen­de Ver­hal­ten zu errei­chen, ver­wen­den wir eine C# Datei mit dem Namen TiltEffect.cs aus dem Con­trol Tilt Effect Sam­ple auf MSDN.

Als ers­tes laden Sie das Bei­spiel her­un­ter und ent­pa­cken die Datei­en in einen Ord­ner auf Ihrem Com­pu­ter. Die Datei TiltEffect.cs befin­det sich im Unter­ver­zeich­nis Con­trol­TiltEf­fect. Mer­ken Sie sich den Spei­cher­ort der Datei, so dass Sie die­se zu Ihrem Pro­jekt hin­zu­fü­gen kön­nen.

Um die Datei Ihrem Sil­ver­light Pro­jekt hin­zu­zu­fü­gen, machen Sie fol­gen­des:

1. Öff­nen Sie Ihr Pro­jekt im Visu­al Stu­dio und kli­cken Sie rechts auf Ihr Pro­jekt.
2. Wäh­len Sie aus dem Kon­text­me­nü Add und dann Exis­ting Item…
   
3. Im Dia­log Add Exis­ting Item navi­gie­ren Sie zur zuvor her­un­ter­ge­la­de­nen Datei TiltEffect.cs und wäh­len Sie die­se aus.
4. Damit wird eine Kopie der Datei in Ihrem Pro­jekt­ver­zeich­nis ange­legt und die­se Ihrem Pro­jekt hin­zu­ge­fügt.

Namespace

Öff­nen Sie die Datei TiltEffect.cs. Sie sehen, dass der Name­space oben in der Datei Con­trol­TiltEf­fect heißt. Ent­we­der Sie ändern den Name­space auf den Stan­dard­na­me­space Ihres Pro­jekts oder Sie las­sen ihn unver­än­dert. In unse­rem Bei­spiel wer­den wir den Name­space Con­trol­TiltEf­fect bei­be­hal­ten.

Wenn Sie den TiltEf­fect in Ihrer Anwen­dung ver­wen­den wol­len, müs­sen Sie die­sen Name­space erst bekannt machen. Hier­zu fügen Sie fol­gen­de Zei­len im Kopf der XAML Datei hin­zu, in der Sie den TiltEf­fect ver­wen­den möch­ten:

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

Mit der ers­ten Zei­le erstel­len wir ein Ali­as local für den Name­space Con­trol­TiltEf­fect. Damit kön­nen wir die im Name­space ent­hal­te­nen Klas­sen in unse­rer Sei­te ver­wen­den.

Die zwei­te Zei­le akti­viert den TiltEf­fect. Allein durch die­se zwei Zei­len wer­den alle But­tons und List­Bo­xes auf der Sei­te das TiltEf­fect Ver­hal­ten zei­gen. Sie wer­den also leicht unter dem Fin­ger weg­kip­pen. Wie wir spä­ter sehen, kön­nen wir das Ver­hal­ten auch für ein­zel­nen Con­trols auf der Sei­te an- oder aus­schal­ten.

Da wir jetzt wis­sen, wie wir das TiltEf­fect Ver­hal­ten unse­rem Pro­jekt und unse­ren Sei­ten hin­zu­fü­gen kön­nen, las­sen Sie uns ein kon­kre­tes Bei­spiel betrach­ten.

Beispielanwendung

Die Bei­spiel­an­wen­dung ent­hält vie­le Con­trols, die das Ver­hal­ten des TiltEf­fect demons­trie­ren. Die meis­ten But­tons und List­Bo­xes auf der Sei­te wer­den kip­pen, wenn Sie dar­auf drü­cken. Durch die Zei­le TiltEffect.IsTiltEnabled=„True“ ist dies das Stan­dard­ver­hal­ten der Con­trols auf der Sei­te.

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

Ange­nom­men, wir haben einen bestimm­ten But­ton auf der Sei­te, der nicht kip­pen soll. Wie kön­nen den TiltEf­fect für jedes ein­zel­ne Con­trol indi­vi­du­ell ein- und aus­schal­ten. In unse­rem Bei­spiel wird der zwei­te But­ton nicht kip­pen, da wir hier die Eigen­schaft Sup­pres­sed gesetzt haben. Hier ist der XAML Code für den zwei­ten But­ton:

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

Beach­ten Sie die Eigen­schaft local:TiltEffect.SuppressTilt=„True“. Damit wird der TiltEf­fect für die­ses Con­trol unter­drückt. Die zwei­te List­Box hat die­se Eigen­schaft eben­falls gesetzt, sie wird also auch nicht kip­pen. Alle ande­ren Con­trols haben die Eigen­schaft nicht, sie wer­den also kip­pen.

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

Es ist natür­lich auch mög­lich, den TiltEf­fect für eine gan­ze Sei­te zu unter­drü­cken. Unten auf der Sei­te sehen Sie einen But­ton „Stop Tilts“. Wenn der But­ton gedrückt wird, wer­den alle TiltEf­fec­ts der Sei­te unter­drückt. Wenn Sie ihn noch mal drü­cken, wer­den die TiltEf­fec­ts wie­der akti­viert.

Der Hand­ler button3_Click erle­digt die­se Arbeit für uns. Um die TiltEf­fec­ts auch im C# code-behind zu ver­wen­den, fügen wir oben ein State­ment using Con­trol­TiltEf­fect; ein.

Im Hand­ler button3_Click fra­gen wir dann den aktu­el­len Wert der Eigen­schaft IsTil­tEn­ab­led der gan­zen Sei­te ab. Hier ver­wen­den wir eine klei­ne Metho­de der Klas­se TiltEf­fect GetI­s­Til­tEn­ab­led, wel­che das Depen­den­cy­Proper­ty der gan­zen Sei­te aus­liest. Beach­ten Sie, dass der Über­ga­be­pa­ra­me­ter this unse­re gan­ze Sei­te reprä­sen­tiert. Den Rück­ga­be­wert mer­ken wir uns in der Varia­ble til­tEn­ab­led.

Dann set­zen wir den Inhalt des But­tons Toggle­Til­ting abhän­gig vom Wert til­tEn­ab­led.

Zuletzt ändern wir den Wert der Eigen­schaft IsTil­tEn­ab­led für die gan­ze Sei­te genau auf das Gegen­teil des ursprüng­li­chen Werts. Wir ändern das Depen­den­cy­Proper­ty mit der Metho­de SetI­s­Til­tEn­ab­led.

Mit die­sem Code kön­nen wir das Kip­pen aller unse­rer Con­trols aus­schal­ten. Pro­bie­ren Sie es aus. Wenn Sie den But­ton Toggle­Til­ting noch mal drü­cken, wer­den alle But­tons wie­der kip­pen.

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. leit­ning: die­sen Absatz habe ich dazu­ge­dich­tet. In der Regel braucht man näm­lich die oben beschrie­be­ne Datei nicht her­un­ter­la­den…)

Der TiltEf­fect ist auch Teil des Sil­ver­light for Win­dows Pho­ne Tool­kit (wel­ches es übri­gens bei NuGet gibt). Wenn Sie das Sil­ver­light for Win­dows Pho­ne Tool­kit in Ihrem Pro­jekt ver­wen­den, haben Sie den TiltEf­fect also sowie­so schon. In die­sem Fall müs­sen Sie, ent­ge­gen der obi­gen Beschrei­bung, die klei­ne Datei nicht her­un­ter­la­den und Ihrem Pro­jekt hin­zu­fü­gen.

Gegen­über dem Quell­code die­ses Arti­kels ändern sich bei Ver­wen­dung des Sil­ver­light for Win­dows Pho­ne Tool­kits eigent­lich nur die Name­spaces. Im XAML Code wür­den Sie bei­spiels­wei­se fol­gen­de Zei­len im Kopf der Sei­te ver­wen­den:

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

In der code-behind Datei wür­den Sie ent­spre­chend fol­gen­des using State­ment ver­wen­den:

using Microsoft.Phone.Controls;

(Anm. leit­ning: so, wei­ter im Ori­gi­nal­text…)

Zusammenfassung

Indem Sie den TiltEf­fect zu Ihrem Pro­jekt hin­zu­fü­gen, las­sen Sie Ihre Anwen­der durch einen sub­ti­len Effekt wis­sen, dass deren Ein­ga­be ange­kom­men ist. Sol­che klei­nen Details machen natür­lich etwas mehr Arbeit, ohne dass die eigent­li­che Funk­tio­na­li­tät der Anwen­dung sich ändert. Die­se Mehr­ar­beit zahlt sich aber aus, da die Anwen­dung attrak­ti­ver für Ihre Anwen­der wird. Wir haben in die­sem Arti­kel gese­hen, wie wir den TiltEf­fect zu unse­rem Pro­jekt hin­zu­fü­gen kön­nen, wie wir ihn für eine gan­ze Sei­te akti­vie­ren kön­nen, wie wir ihn für ein­zel­ne Con­trols deak­ti­vie­ren kön­nen und wie wir ihn im code-behind deak­ti­vie­ren kön­nen. Durch klei­ne Details wie den TiltEf­fect wird Ihre Anwen­dung aus der Mas­se her­vor­ste­chen.

Neben­bei: wenn Sie Inter­es­se haben, emp­feh­le ich Ihnen einen Blick in den Quell­code der Datei TiltEffect.cs. Die­se ist ein gutes Bei­spiel für die Ver­wen­dung von Sto­ry­boards und Touch Ver­ar­bei­tung. Indem Sie etwas Zeit auf das Stu­di­um die­ses „Kipp-Ver­hal­tens“ ver­wen­den, wer­den Sie Ihre Kennt­nis­se der Win­dows Pho­ne Ent­wick­lung aus­bau­en. Viel­leicht kön­nen Sie den Code sogar auf Ihre eige­nen Bedürf­nis­se anpas­sen.

Um ein lauf­fä­hi­ges Win­dows Pho­ne Pro­jekt her­un­ter­zu­la­den, wel­ches den TiltEf­fect demons­triert, kli­cken Sie auf den Down­load Code But­ton unten:

Mor­gen wer­den wir uns mit der Erstel­lung von Klin­gel­tö­nen beschäf­ti­gen. Dabei wer­den wir die neu­en Man­go APIs für Klin­gel­tö­ne ver­wen­den.

Bis dahin!