Silverlight for Windows Phone 7 Toolkit

De november release van de Toolkit bevat de volgende componenten: AutoCompleteBox , ContextMenu/ContextMenuService, DatePicker. GestureListener/GestureService, ListPicker, LongListSelector , Page Transitions, TimePicker, ToggleSwitch en WrapPanel. Dit zijn voornamelijk Controls maar ook Attached Properties (Services). In dit artikel leg ik aan de hand van voorbeelden de mogelijkheden van deze componenten uit. 


 

Installatie


De setup van de Toolkit is te downloaden van de codeplex website (zie Links) en daarna te installeren. Naast deze setup kun je ook de sourcecode en een voorbeeldapplicatie downloaden. 


Om in Expression Blend gebruik te maken van de Toolkit moet je aan het project een Project Reference toevoegen naar de Microsoft.Phone.Controls.Toolkit.dll assembly uit de 


C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin map. Daarna kun je de controls vanuit de Assets tab toevoegen aan een Page.


In Visual Studio 2010 kun je het beste deze Toolkit toevoegen aan de Toolbox. Voeg daarvoor eerst een Tab toe met de naam Toolkit, gebruik hiervoor de rechtermuisknop. Selecteer daarna ‘Choose Items...’ en gebruik de ‘Browse...’ knop om de hierboven genoemde assembly toe te voegen, klik daarna op OK.


Bij het plaatsen van een control uit de Toolkit vanuit Blend of Visual Studio aan een Page wordt automatisch de onderstaande Toolkit namespace toegevoegd aan de XAML van de page. Visual Studio voegt daarnaast ook een Project Reference naar de assembly toe aan het project.


 

xmlns:Toolkit="clr-namespace:Microsoft.Phone.
Controls;
               assembly=Microsoft.Phone.Controls.Toolkit"

Ook als je geen telefoon hebt, kun je met behulp van de gratis development tools en de emulator de Toolkit en de voorbeelden proberen.


 

DatePicker en TimePicker


Deze twee controls maken het mogelijk om een datum en tijd in te voeren. Deze controls gedragen zich zoals de standaard datum/tijd selectie controls van de Windows Phone. Hierbij worden verticale draairollen getoond voor dag/maan/jaar of uur/minuut. Deze controls zijn culture-aware en houden bovendien rekening met de gebruikersinstellingen van de telefoon. 


Figuur 1.

Het gebruik van deze controls is eenvoudig. Met de Header property kan men eenvoudig een label met het juiste lettertype en kleur boven de controls plaatsen, zie codevoorbeeld 1.


 

<StackPanel>

   <toolkit:DatePicker Header="Datum"
                       ValueStringFormat="{}{0:D}" />

   <toolkit:TimePicker Header="Tijd" />

</StackPanel>

      

Codevoorbeeld 1.


Om de juiste ApplicationBar iconen onderin de DatePicker en TimePicker getoond te krijgen moet je een map maken in de root van het project genaamd ‘Toolkit.Content’. Hierin kopieer je de ‘ApplicationBar.Cancel.png’ en ‘ApplicationBar.Check.png’ bestanden vanuit de Toolkit ‘Icons’ map. Tot slot moet je de ‘Build Action’ property voor deze twee bestanden op ‘Content’ zetten.


 

ListPicker


De ListPicker control kan het beste worden vergeleken met een ComboBox, maar dan natuurlijk met de eigenschappen van de Windows Phone UI. De ListPicker kun je met behulp van de ListPickerMode property in drie modes instellen: Normal, Expanded en Full. Bij de Normal mode wordt de lijst van items getoond in de ListPicker nadat de gebruiker op het control klikt (zie figuur 2). De ListPicker moet je wel in een StackPanel te plaatsen, zodat de items daaronder automatisch mee naar onderen verschuiven. Door de CacheMode van deze StackPanel op BitmapCache te zetten loopt de animatie extra vlot.


Figuur 2.

Standaard kunnen er maximaal vijf items worden getoond. Bij meer items kun je ook de Full mode gebruiken. Hierbij worden de items in een pop-up venster getoond waarna je het juiste item kunt selecteren. De Expanded mode zal bij minder dan vijf items de Normal mode gebruiken en anders automatisch overschakelen naar Full. De items kun je handmatig in de XAML opnemen, maar je kunt ook de ItemSource databinden (zie codevoorbeeld 2). Met behulp van templating kan men de opmaak van deze items zelf instellen.


 

<StackPanel CacheMode="BitmapCache">


    <toolkit:ListPicker 
       ListPickerMode="Normal"
 
       Header="Tempo"
 
       ItemCountThreshold="7">


       <toolkit:ListPickerItem Content="Normaal" />

       <toolkit:ListPickerItem Content="Snel" />

       <toolkit:ListPickerItem>


          <StackPanel Orientation="Horizontal">

             <Image Source="/WindowsPhoneToolkitDemo;component/Assets/Images/
Smiley.png" />

             <TextBlock Text="Super snel" Margin="12,0" />

          </StackPanel>


       </toolkit:ListPickerItem>

    </toolkit:ListPicker>

      

    <toolkit:ListPicker  
       FullModeHeader="Selecteer een SampleData"

       Header="SampleData"

       DisplayMemberPath="LineOne"

       ItemsSource="{Binding Items}">


       <toolkit:ListPicker.FullModeItemTemplate>


          <DataTemplate>

            <StackPanel>

               <TextBlock 
                  Text="{Binding LineOne}"

                  FontSize="{StaticResource PhoneFontSizeLarge}"

                  Margin="{StaticResource PhoneHorizontalMargin}" />

               <TextBlock 
                  Text="{Binding LineThree}"

                  FontSize="{StaticResource PhoneFontSizeSmall}"

                  Margin="{StaticResource PhoneHorizontalMargin}"

                  TextWrapping="Wrap" />

            </StackPanel>

          </DataTemplate>

       </toolkit:ListPicker.FullModeItemTemplate>

    </toolkit:ListPicker>

</StackPanel>


      

Codevoorbeeld 2.


 

ToggleSwitch


De ToggleSwitch is een alternatief voor een CheckBox (zie figuur 3). De werking komt overeen met de standaard lichtschakelaar bekend van de IPod en IPhone. Pas wel op dat je deze control niet in een horizontale ScrollViewer (bijvoorbeeld Pivot of Panorama) plaatst. Het omzetten van de schakelaar veroorzaakt dan namelijk een scroll in de viewer waardoor dit niet werkt.


Figuur 3.

 

WrapPanel


Het WrapPanel bestond al in WPF- en in de Silverlight Toolkit. Het is vergelijkbaar met een StackPanel, maar toont de child controls op de volgende regel als er niet genoeg ruimte meer is. In codevoorbeeld 3 en figuur 4 wordt de WrapPanel gebruikt als 


ItemsPanel van de ListBox. De WrapPanel is daarnaast voorzien van een FluidMoveBehavior waardoor de items geanimeerd verplaatst worden als men de telefoon roteert.


 

<ListBox ItemsSource="{Binding Items}">


    <ListBox.ItemTemplate>

        <DataTemplate>

            <StackPanel 
                Margin="10, 10, 0, 0"

                Background="Red"

                Height="100"

                Width="210">

                
                <TextBlock 
                   Text="{Binding LineOne}"

                   Margin="12,0"

                   FontSize="{StaticResource PhoneFontSizeLarge}" />

                <TextBlock 
                   Text="{Binding LineTwo}"

                   Margin="12,0"

                   TextWrapping="Wrap"

                   FontSize="{StaticResource PhoneFont
SizeSmall}" />

            </StackPanel>

        </DataTemplate>

    </ListBox.ItemTemplate>


    <ListBox.ItemsPanel>

        <ItemsPanelTemplate>

            <toolkit:WrapPanel>

                <Custom:Interaction.Behaviors>

                     <il:FluidMoveBehavior 
                         AppliesTo="Children">

                         <il:FluidMoveBehavior.EaseY>

                             <CircleEase EasingMode="EaseInOut" />

                         </il:FluidMoveBehavior.EaseY>

          
                         <il:FluidMoveBehavior.EaseX>

                             <CircleEase EasingMode="EaseInOut" />

                         </il:FluidMoveBehavior.EaseX>

                     </il:FluidMoveBehavior>

                </Custom:Interaction.Behaviors>

           </toolkit:WrapPanel>

       </ItemsPanelTemplate>

    </ListBox.ItemsPanel>

</ListBox>


      

codevoorbeeld 3.


 

<toolkit:DatePicker 
     Header="Datum"

     x:Name="datePicker1"

     ValueStringFormat="{}{0:D}">

     
     <toolkit:ContextMenuService.ContextMenu>

          <toolkit:ContextMenu>

             <toolkit:MenuItem 
                 Header="Vandaag"

                 Click="MenuItemVandaag_Click" />

             <toolkit:MenuItem 
                 Header="Morgen"

                 Click="MenuItemMorgen_Click" />

             <toolkit:Separator />

             <toolkit:MenuItem 
                 Header="Wissen"

                 Click="MenuItemWissen_Click" />

          </toolkit:ContextMenu>

     </toolkit:ContextMenuService.ContextMenu>

</toolkit:DatePicker>


      

codevoorbeeld 4.


Figuur 4.

 

ContextMenu en ContextMenuService


Een ContextMenu wordt gebruikt om in een pop-up venster extra menu opties te tonen. Deze wordt zichtbaar als je op het control, waaraan de ContextMenu gekoppeld is, voor een aantal seconden (ongeveer twee) een vinger houdt (Touch and Hold gesture).


Een ContextMenu koppel je aan een control met behulp van een ContextMenuService. Dit is vergelijkbaar met het koppelen van een Tooltip aan een control met behulp van de TooltipService. Op een ContextMenu plaats kun je MenuItems en Seperator controls plaatsen (zie codevoorbeeld 4). Een MenuItem heeft een Click event maar ondersteunt ook (MVVM) commanding met behulp van de Command en CommandParameters properties. De MenuItems kunnen ook met behulp van databinding gezet worden.


Figuur 5.

 

GestureListener en GestureService 


Met een GestureListener en GestureService kun je de aanraak (touch) interface van een Windows Phone eenvoudiger toepassen. Deze classes vertalen natuurlijke bewegingen naar events waarop je je kunt abonneren zoals: Tap, Double Tap, Touch and Hold, Flick, Drag (started/delta/completed), en Pinch (started/delta/completed) (zie figuur 6). 


Al deze events hebben event arguments waarmee de properties zoals Direction, Angle en Velocity mee op te vragen zijn. Het enige wat men moet doen is een GestureListener aan een control koppelen en de juiste events afhandelen (zie codevoorbeeld 5). Dit moet je handmatig invoeren in de XAML, omdat er in Expression Blend en Visual Studio hiervoor geen designer ondersteuning is. 


 

<Border 
    Background="Red"

    Margin="100"

    Padding="40">


    <toolkit:GestureService.GestureListener>

 
       <toolkit:GestureListener 
           Tap="GestureListener_Tap"

           DoubleTap="GestureListener_DoubleTap"

           Hold="GestureListener_Hold"

           Flick="GestureListener_Flick" />

       </toolkit:GestureService.GestureListener>

      

     <TextBlock 
        x:Name="GestureTextBlock"

        TextWrapping="Wrap"

        Text="Voer hier uw Gesture uit"

        HorizontalAlignment="Center" />

</Border>

      

Codevoorbeeld 5.


Figuur 6.

Het is verstandig de richtlijnen voor het gebruik van Gestures na te lezen in het ‘UI Design and Interaction Guide for Windows Phone’ document. Deze zijn zeer uitgebreid en geven duidelijk aan waarvoor ze wel en niet mogen worden gebruikt.


 

AutoCompleteBox 


AutoCompleteBox werd geïntroduceerd in de Silverlight 2 Toolkit en later opgenomen in de Silverlight 3 SDK. Nu is deze ook te gebruiken in de Windows Phone 7! De Bing zoekpagina maakt hier bijvoorbeeld ook gebruik van om te voorspellen op welke zoekterm de gebruiker zoekt. Het enige dat je moet doen is de ItemSource databinden aan een lijst van woorden of objecten (zie codevoorbeeld 6 en figuur 7). Met behulp van templating kun je zelfs de keuzelijst opmaken, zodat er bijvoorbeeld twee regels tekst getoond worden.


 

<TextBlock 
     Text="AutoCompleteBox, single-line items"

     Style="{StaticResource PhoneTextNormalStyle}" />


<toolkit:AutoCompleteBox 
     VerticalAlignment="Top"

     ItemsSource="{StaticResource words}"

     Margin="0,12" />


<TextBlock 
     Text="AutoCompleteBox, double-line items"

     Style="{StaticResource PhoneTextNormalStyle}" />


<toolkit:AutoCompleteBox 
     InputScope="Url"

     ItemsSource="{StaticResource websites}"

     Margin="0,12"

     ValueMemberPath="Item1">


     <toolkit:AutoCompleteBox.ItemTemplate>

        <DataTemplate>

            <StackPanel Margin="0,7">

                <TextBlock 
                    Margin="8,0"

                    Text="{Binding Item1}" />

                <TextBlock 
                    FontSize="{StaticResource PhoneFontSizeNormal}"

                    Foreground="#ff666666"

                    Margin="8,-6,8,2"

                    Text="{Binding Item2}" />

            </StackPanel>

        </DataTemplate>

     </toolkit:AutoCompleteBox.ItemTemplate>

</toolkit:AutoCompleteBox>


      

codevoorbeeld 6.





Figuur 7.

 

LongListSelector 


De LongListSelector is een krachtig, maar ook complex control waarmee je, zoals de naam al zegt, een lange lijst toont. Het is een soort super listbox. Deze wordt onder andere gebruikt in de People Hub om al je contacten te tonen (zie figuur 8). De normale ListBox kent een aantal performance uitdagingen die je kunt vermijden door deze te vervangen door een LongListSelector. Door de complexiteit leent dit control zich niet voor een codevoorbeeld. Het beste kun je de werking bestuderen met behulp van de Toolkit Sample Applicatie van codeplex.


Figuur 8.

 

Page Transitions


Page Transitions zijn geanimeerde transitie-effecten die tussen de navigatie van twee pagina’s plaats vinden (zie figuur 9). In de ‘UI Design and Interaction Guide for Windows Phone’ wordt aangeraden om deze toe te passen. Deze release van de Toolkit ondersteunt een aantal verschillende transities: Turnstile, Slide, Rotate, Swivel, en Roll. Het is ook mogelijk om eigen transities te implementeren. Het toepassen is heel eenvoudig. Als eerste verander je de RootFrame in de App.xaml.cs van een PhoneApplicationFrame naar een TransitionFrame. Daarna voegt men de XAML van codevoorbeeld 7 toe aan elke Page. Dat is alles.


Figuur 9.

 

RootFrame = new TransitionFrame();

      

...

      

<toolkit:TransitionService.NavigationInTransition>

    <toolkit:NavigationInTransition>

        <toolkit:NavigationInTransition.Backward>

            <toolkit:TurnstileTransition Mode="BackwardIn"/>

        </toolkit:NavigationInTransition.Backward>


        <toolkit:NavigationInTransition.Forward>

            <toolkit:TurnstileTransition Mode="ForwardIn"/>

        </toolkit:NavigationInTransition.Forward>


    </toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>


<toolkit:TransitionService.NavigationOutTransition>

   <toolkit:NavigationOutTransition>

        <toolkit:NavigationOutTransition.Backward>

           <toolkit:TurnstileTransition Mode="BackwardOut"/>

        </toolkit:NavigationOutTransition.Backward>


        <toolkit:NavigationOutTransition.Forward>

           <toolkit:TurnstileTransition Mode="ForwardOut"/>

        </toolkit:NavigationOutTransition.Forward>

   </toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>


      

codevoorbeeld 7.


 

Conclusie


De Silverlight for Windows Phone 7 Toolkit maakt het bouwen van Windows Phone applicaties weer een stukje eenvoudiger. De Toolkit voldoet aan de UI richtlijnen van Microsoft waardoor de applicaties een professionele uitstraling krijgen. Tijdens het gebruik ben ik nog wel tegen een aantal kleine fouten (bugs) aangelopen, maar deze waren redelijk gemakkelijk te omzeilen. Ik verwacht dat Microsoft deze in de volgende releases oplost en ook extra componenten blijft toevoegen. De Toolkit is op dit moment een onmisbare bouwsteen bij het ontwikkelen van Silverlight applicaties voor de Windows Phone 7.


 

Links





• Download
• UI Design and Interaction Guide for Windows Phone
• November release
• September release

 

Over de auteur


Fons Sonnemans is een freelance docent en ontwikkelaar, gespecialiseerd in Silverlight en Windows Phone 7. Hij geeft In-house trainingen in Nederland en Belgie en gebruikt hiervoor zijn eigen cursusmateriaal. Hij is bereikbaar via fons.sonnemans@reflectionit.nl