Neue Benutzeroberflächentechnologien

Silverlight, Windows Phone 7 und der Multitouch-Thumb

Charles Petzold

Beispielcode herunterladen

Für viele Silverlight-Programmierer stellt die faszinierendste Eigenschaft von Windows Phone 7 dessen Unterstützung für Silverlight als eine seiner beiden Programmierschnittstellen dar. (Die andere Programmierschnittstelle ist XNA.) Silverlight-Programmierer können so nicht nur das vorhandene Wissen und die vorhandenen Fähigkeiten für neue Anwendungen für das Telefon nutzen, sondern auch Silverlight-Programme für das Web und das Telefon entwickeln, denen Code gemeinsam ist.

Natürlich ist die gemeinsame Verwendung von Code, besonders von Code für Benutzeroberflächen, selten so einfach, wie es zuerst aussieht. Die Version von Silverlight, die für das Telefon verwendet wird, heißt Silverlight for Windows Phone. Es handelt sich im Wesentlichen um eine reduzierte Implementierung von Silverlight 3. Wenn Sie eine Anwendung mit gemeinsamem Code in Betracht ziehen, sollten Sie sich die Dokumentation genau ansehen: Die Onlinedokumentation beschreibt für jede Silverlight-Klasse, von welchen Umgebungen sie jeweils unterstützt wird. Innerhalb der einzelnen Klassen verwenden Eigenschaftenlisten, Methoden und Ereignisse Symbole, um die Unterstützung für Windows Phone 7 anzuzeigen.

Eine Silverlight-Anwendung für das Web erhält Benutzereingaben über die Tastatur, die Maus und möglicherweise Multi-Touch. In einem Windows Phone 7-Programm, stellt Multi-Touch das primäre Eingabemittel dar. Es gibt keine Maus. Möglicherweise gibt es eine Hardwaretastatur auf dem Telefon, können sich Silverlight-Programme nur auf virtuelle Tastaturen stützen – das Software Input Panel (SIP) – die ausschließlich über das TextBox-Steuerelement bedient werden können.

Wenn Ihre vorhandenen Silverlight-Programme niemals direkte Tastatur- oder Mauseingaben erwarten und sich vollständig auf Steuerelemente verlassen, müssen Sie sich über die Konvertierung zu Multi-Touch keine Gedanken machen. Auch wenn Ihre Programme eine eigene Mauslogik enthalten, können Sie diese Logik bei der Portierung des Programms zum Telefon bewahren.

Auf dem Telefon werden primäre Touchereignisse in Mausereignisse konvertiert, sodass die vorhandene Mauslogik funktionieren sollte. (Ein primäres Touchereignis ist die gesamte Aktivität des Fingers, der den Bildschirm zuerst berührt, während keine anderen Finger den Bildschirm berühren.)

Die Migration von der Maus zu Multi-Touch erfordert einige Überlegungen: Sowohl Silverlight for the Web als auch Silverlight for Windows Phone unterstützen das statische Touch.FrameReported-Ereignis. Dieses Ereignis stellt jedoch eine Multi-Touch-Schnittstelle auf vergleichsweise niedriger Ebene dar. Ich habe dieses Ereignis im Artikel „Fingerstil: Einführung in die Multitouch-Unterstützung in Silverlight (msdn.microsoft.com/magazine/ee336026) in der Ausgabe von März 2010 behandelt.

Silverlight for Windows Phone unterstützt eine Teilmenge der Manipulationsereignisse aus dem Surface SDK, die mittlerweile Bestandteil von Windows Presentation Foundation (WPF) geworden sind. Dies ist ein Beispiel dafür, wie Multi-Touch Schritt für Schritt mehr Verbreitung findet. Das Telefon unterstützt nur die Übersetzung und Skalierung von Funktionen, nicht die Rotation, und implementiert keine Trägheit. Es sind jedoch ausreichend Informationen verfügbar, um Trägheit selbst zu implementieren. Diese Manipulationsereignisse werden in der Webversion von Silverlight noch nicht unterstützt.

Zusammenfassend lässt sich sagen, dass Sie entweder Mausereignisse oder Touch.FrameReported-Ereignisse verwenden müssen, wenn Sie Code für Silverlight for the Web und Silverlight for Windows Phone gemeinsam verwenden möchten.

Denken Sie an das Thumb-Steuerelement

Es gibt jedoch eine weitere Möglichkeit: Wenn Sie nur die Übersetzungsunterstützung der Manipulationsereignisse benötigen und Sie sich keine Gedanken darüber machen möchten, ob die Eingabe von der Maus oder einer Berührung stammt, gibt es ein Steuerelement, das dies in sehr reiner Form unterstützt. Dieses Steuerelement ist das Thumb-Steuerelement.

Möglicherweise sind Sie dem Thumb-Steuerelement noch nie begegnet. Das Thumb-Steuerelement befindet sich im System.Windows.Controls.Primitives-Namespace und ist primär für ScrollBar- und Slider-Vorlagen vorgesehen. Sie können es jedoch auch für andere Aufgaben verwenden, und ich betrachte seit Kurzem das Thumb-Steuerelement als eine Implementierung der Übersetzungsfunktion der Manipulationsereignisse auf hoher Ebene.

Das Thumb-Steuerelement ist nicht wirklich ein Multi-Touch-Steuerelement. Es unterstützt nur jeweils eine Berührung. Die genauere Betrachtung des Thumb-Steuerelements ermöglicht Ihnen jedoch, mit der Unterstützung für das Touch-Computing und der gemeinsamen Verwendung von Code für eine Silverlight- und eine Windows Phone 7-Anwendung zu experimentieren.

Das Thumb-Steuerelement definiert drei Ereignisse:

• DragStarted wird gestartet, wenn der Benutzer das Steuerelement zuerst mit einem Finger oder der Maus berührt.
• DragDelta zeigt die Bewegung der Maus oder des Fingers im Verhältnis zum Bildschirm an.
• DragCompleted zeigt an, dass die Maus oder der Finger entfernt wurden.

Das DragDelta-Ereignis wird von Ereignisargumenten mit den Eigenschaften „HorizontalChange“ und „VerticalChange“ begleitet, die die Maus- oder Fingerbewegung seit dem letzten Ereignis anzeigen. In der Regel wird dieses Ereignis durch die Hinzufügung der inkrementellen Änderungen für die X- und Y-Eigenschaften eines TranslateTransform-Satzes behandelt, um die RenderTransform-Eigenschaft eines ziehbaren Elements oder die angefügten Eigenschaften „Canvas.Left“ und „Canvas.Top“ festzulegen.

Standardmäßig ist das Thumb-Steuerelement vergleichsweise einfach. Wie im Fall anderer Steuerelemente sind die Eigenschaften „HorizontalAlignment“ und „VerticalAlignment“ als „Stretch“ festgelegt, sodass das Thumb-Steuerelement normalerweise den zulässigen Bereich ausfüllt. Andernfalls beträgt die Größe des Silverlight-Thumb-Steuerelements nur vier Pixel im Quadrat. In Silverlight for Windows Phone beträgt die Größe des Thumb-Steuerelements 48 Pixel im Quadrat. Die Größe scheint jedoch nur 24 Pixel im Quadrat zu betragen, da es auf allen vier Seiten von einem transparenten Rahmen mit einer Breite von 12 Pixeln umgeben wird.

Sie sollten mindestens ausdrücklich eine Höhe und eine Breite für das Thumb-Steuerelement festlegen. Abbildung 1 zeigt nebeneinander die Silverlight- und die Windows Phone 7-Version mit dem standardmäßigen Licht-Dunkel-Farbschema für das Telefon. In beiden Fällen habe ich die Höhe und die Breite als 72 und den Hintergrund als Blau festgelegt. In der Silverlight-Version wird dies zu einem Gradienten, der bei Drücken des Thumb-Steuerelements verändert wird. Keines der beiden Thumb-Steuerelemente beachtet die Foreground-Eigenschaft.

Abbildung 1 Das Thumb-Steuerelement in Silverlight und Windows Phone

Es wird häufig vorkommen, dass Sie nicht nur das Thumb-Steuerelement in der Größe anpassen möchten, sondern auch ein ControlTemplate-Steuerelement anwenden möchten, das die visuellen Elemente des Steuerelements neu definiert. Dieses ControlTemplate-Steuerelement kann äußerst einfach sein.

Gemeinsame Verwendung von Steuerelementen

Nehmen Sie an, Sie möchten ein einfaches Steuerelement, mit dem der Benutzer auf dem Bildschirm Bitmaps verschieben kann. Eine sehr einfache Lösung besteht darin, sowohl ein Image-Element als auch ein Thumb-Steuerelement in einem Raster mit nur einer einzigen Zelle zu platzieren, wobei das Thumb-Steuerelement die gleiche Größe wie das Bild hat und dieses überlagert. Wenn das ControlTemplate-Steuerelement für das Thumb-Steuerelement lediglich ein transparentes Rechteck ist, ist das Thumb-Steuerelement unsichtbar, löst jedoch weiterhin Dragereignisse aus.

Versuchen wir, ein solches Steuerelement zu erstellen, dass sowohl in Silverlight- als auch in Windows Phone 7-Projekten verwendbar ist. Ich gehe davon aus, dass Sie die Windows Phone 7-Entwicklertools installiert haben. Mit diesen Tools können Sie Windows Phone 7-Projekte in Visual Studio erstellen.

Beginnen wir damit, dass wir ein Silverlight 4-Projekt namens DragImage erstellen. Die entsprechende DragImage-Lösung enthält das angepasste DragImage-Projekt (dies ist das eigentliche Silverlight-Programm) und ein DragImage.Web-Projekt (dieses hostet das Silverlight-Programm auf einer HTML- oder ASP.NET-Seite).

Als Nächstes fügen wir der Lösung ein neues Projekt des Typs Windows Phone-Anwendung hinzu. Wir nennen dieses Projekt „DragImage.Phone“. (Sie möchten wahrscheinlich nicht, dass dieser Name in der Programmliste des Telefons oder des Telefonemulators angezeigt wird. Sie können daher den Anzeigenamen im Titelattribut des Anwendungstags in der Datei WMAppManifest.xml ändern.)

Durch Rechtsklick entweder auf das DragImage.Web- oder das DragImage.Phone-Projekt wird ein Kontextmenü angezeigt, in dem Sie das Projekt als Startup-Projekt auswählen und entweder das Silverlight-Programm oder das Windows Phone 7-Programm auswählen können. Mittels einer Symbolleisten-Dropdownliste in Visual Studio können Sie das Telefonprogramm entweder für ein tatsächliches Telefongerät oder den Telefonemulator bereitstellen. (Visual Studio kompiliert die Projekte nicht, wenn Sie in dieser Dropdownliste ein Windows Phone 7-Gerät auswählen und kein Telefon angefügt ist.)

Fügen Sie im DragImage-Projekt (im Silverlight-Projekt) ein neues Objekt des Typs Silverlight-Benutzersteuerung hinzu. Nennen Sie es DraggableImage. Wie gewöhnlich, erstellt Visual Studio für dieses Steuerelement die Dateien „DraggableImage.xaml“ und „DraggableImage.xaml.cs“.

Abbildung 2 zeigt DraggableImage.xaml mit der visuellen Struktur des Steuerelements. Das standardmäßige äußere Raster namens LayoutRoot nimmt die Abmessungen des Containers des Steuerelements vollständig ein. Das innere Raster ist an der oberen linken Ecke ausgerichtet. Der RenderTransform-Eigenschaft ist jedoch eine TranslateTransform zugewiesen, sodass es innerhalb des äußeren Rasters verschoben werden kann. Das innere Raster enthält ein Bildelement mit einem darüber liegenden Thumb-Steuerelement, dessen Template-Eigenschaft auf eine visuelle Struktur festgelegt ist, die lediglich ein transparentes Rechteck enthält.

Abbildung 2 DraggableImage.xaml

<UserControl x:Class="DragImage.DraggableImage"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Name="ctrl">
    
  <Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Left"
          VerticalAlignment="Top">
      <Image Name="image" Stretch="None"
             Source="{Binding ElementName=ctrl, Path=Source}" />
      <Thumb DragDelta="OnThumbDragDelta">
        <Thumb.Template>
          <ControlTemplate>
            <Rectangle Fill="Transparent" />
          </ControlTemplate>
        </Thumb.Template>
      </Thumb>
      <Grid.RenderTransform>
        <TranslateTransform x:Name="translate" />
      </Grid.RenderTransform>
    </Grid>
  </Grid>
</UserControl>

Beachten Sie, dass die Source-Eigenschaft des Bildelements an die Source-Eigenschaft des Steuerelements selbst gebunden ist. Diese Eigenschaft wird in der Datei „DraggableImage.xaml.cs“ definiert, wie in Abbildung 3 gezeigt. Diese Datei verarbeitet auch das DragDelta-Ereignis aus dem Thumb-Steuerelement, indem die X- und Y-Eigenschaften von TranslateTransform verändert werden.

Abbildung 3 DraggableImage.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace DragImage {
  public partial class DraggableImage : UserControl {
    public static readonly DependencyProperty SourceProperty =
      DependencyProperty.Register("Source",
      typeof(ImageSource),
      typeof(DraggableImage),
      new PropertyMetadata(null));

    public DraggableImage() {
      InitializeComponent();
    }

    public ImageSource Source {
      set { SetValue(SourceProperty, value); }
      get { return (ImageSource)GetValue(SourceProperty); }
    }

    void OnThumbDragDelta(object sender, DragDeltaEventArgs args) {
      translate.X += args.HorizontalChange;
      translate.Y += args.VerticalChange;
    }
  }
}

Um dieses Steuerelement auch für das Windows Phone 7-Projekt zu verwenden, klicken Sie mit der rechten Maustaste auf das DragImage.Phone-Projekt und wählen Add | Existing Item (Hinzufügen | Vorhandenes Objekt) aus, um das Dialogfeld für das Hinzufügen vorhandener Objekte zu öffnen. Öffnen Sie das DragImage-Projektverzeichnis. Wählen Sie „DraggableImage.xaml“ und „DraggableImage.xaml.cs“ aus, klicken Sie jedoch nicht auf die Schaltfläche zum Hinzufügen. Klicken Sie stattdessen auf den kleinen Pfeil rechts neben der Schaltfläche zum Hinzufügen, und wählen Sie „Add as Link“ (Als Verknüpfung hinzufügen) aus. Die Dateien werden im DragImage.Phone-Projekt mit kleinen Pfeilen auf den Symbolen angezeigt, die anzeigen, dass die Dateien in beiden Projekten verwendet werden.

Wenn Sie nun Änderungen an den DraggableImage-Dateien vornehmen, werden die geänderten Versionen in beiden Projekten verwendet.

Um dies zu testen, benötigen Sie eine Bitmap. Speichern Sie die Bitmap in einem Bildverzeichnis in jedem der Projekte. (Sie müssen keine Kopien der Bitmap erstellen; Sie können die Bitmap dem Bildverzeichnis mittels einer Verknüpfung hinzufügen.)

Es sollten zwei MainPage.xaml-Dateien vorhanden sein. Eine Datei stammt aus dem Silverlight-Projekt, und die andere aus dem Windows Phone 7-Projekt. Fügen Sie MainPage.xaml aus dem Silverlight-Projekt eine XML-Namespace-Bindung namens (traditionellerweise) „lokal“ hinzu:

xmlns:local="clr-namespace:DragImage"

Nun können Sie DraggableImage der Seite hinzufügen:

<Grid x:Name="LayoutRoot" Background="White">
  <local:DraggableImage 
    Source="Images/BuzzAldrinOnTheMoon.png" />
</Grid>

Die MainPage-Klasse für das Windows Phone 7-Projekt befindet sich in einem Namespace namens DragImage.Phone. Die gemeinsam verwendete DraggableImage-Klasse befindet sich jedoch im Namespace namens DragImage. Sie benötigen eine XML-Namespace-Bindung für den DragImage-Namespace, die Sie „gemeinsam“ nennen können:

xmlns:shared="clr-namespace:DragImage"

Nun können Sie DraggableImage dem Inhaltsbereich der Seite hinzufügen:

<Grid x:Name="ContentPanel" 
  Grid.Row="1" Margin="12,0,12,0">
  <shared:DraggableImage 
    Source="Images/BuzzAldrinOnTheMoon.png" />
</Grid>

Dies ist wahrscheinlich die einfachste Art, wie Sie ein Steuerelement für zwei Silverlight-Projekte gemeinsam verwenden können, für das Web und für Windows Phone 7. Da das Steuerelement den Thumb verwendet, funktionieren beide Programme mit der Maus oder per Berührung.

Der herunterladbare Code für die DragImage-Lösung enthält auch ein Projekt namens DragImage.Wpf, bei dem es sich um ein WPF-Programm handelt, das ebenfalls dieses Steuerelement verwendet. Im Allgemeinen ist jedoch die gemeinsame Verwendung von Steuerelementen zwischen Silverlight und WPF schwieriger als die gemeinsame Verwendung von Steuerelementen zwischen Silverlight und Windows Phone 7.

Farbe und Auflösung

Zusätzlich zu Maus- und Berührungseingaben müssen Sie sich um zwei weitere Probleme kümmern, wenn Sie Code für Silverlight und Windows Phone 7 gemeinsam verwenden: Farbe und Videoauflösung.

Auf dem Desktop wird Silverlight mit schwarzem Text auf weißem Hintergrund angezeigt. (Ein Silverlight-Programm kann jedoch die SystemColors-Klasse verwenden, um vom Benutzer ausgewählte Windows-Farben anzuzeigen.) Standardmäßig zeigt Windows Phone 7 weißen Text auf einem schwarzen Hintergrund an, außer wenn der Benutzer das Farbschema zu schwarzem Text auf weißem Hintergrund ändert. Windows Phone 7 stellt praktische, vorab definierte Ressourcenschlüssel bereit, wie „PhoneForegroundBrush“ und „PhoneBackgroundBrush“, die ein Programm bei der Verwendung des ausgewählten Farbschemas unterstützen.

Jeder Code und jedes Markup, der bzw. das von Silverlight und Windows Phone 7 gemeinsam verwendet wird und bestimmte Farben verwendet, muss feststellen können, auf welcher Plattform er bzw. es ausgeführt wird, um die korrekten Farben anzuzeigen.

Das Problem der Videoauflösung ist etwas komplexer. Alle Silverlight-Koordinaten stellen Einheiten von Pixeln dar, und dies gilt auch für das Telefon. Die durchschnittliche Desktopanzeige verfügt wahrscheinlich über eine Auflösung um die 100 Dots per Inch (DPI). (Nehmen Sie zum Beispiel an, eine 21-Zoll-Videoanzeige verfügt über 1600 x 1200 Pixel oder 2000 Pixel diagonal. Dies ist eine Auflösung von 105 DPI.) Standardmäßig geht Windows von einer Auflösung von 96 DPI aus. Die Benutzer können dies jedoch ändern, um den Bildschirm lesbarer zu machen.

Ein Windows Phone 7-Gerät verfügt über einen Bildschirm von 480 × 800 Pixeln mit einer Diagonale von 933 Pixeln. Der Bildschirm misst jedoch nur 3,5 Zoll diagonal. Dies bedeutet, dass die Auflösung ungefähr 264 DPI beträgt, ungefähr 2,75-Mal höher als die Auflösung der Desktopanzeige.

Dies bedeutet, dass gemeinsam verwendete Elemente mit einer Größe, die auf dem Desktop korrekt angezeigt wird, auf dem Telefon zu klein angezeigt werden. Die Entfernung des Betrachters zum Bildschirm ist im Fall des Telefons jedoch in der Regel kürzer als im Fall von Desktopanzeigen, sodass die Elemente nicht um das 2,75-Fache vergrößert werden müssen, um auf dem Telefon sichtbar zu sein.

Wie groß sollte das Thumb-Steuerelement sein, um Berührungen zu ermöglichen? Eine Angabe, die ich gesehen habe, besagt, dass Berührungsziele 9 Millimeter (oder 0,25 Zoll) breit und hoch sein sollten. Auf einer Desktopanzeige mit einer Auflösung von 96 Pixeln pro Zoll entspricht dies 34 Pixeln, auf dem Telefon sind dies jedoch 93 Pixel.

Andererseits ist die Standardschaltfläche auf einem Windows Phone 7-Gerät nur 72 Pixel hoch, und dies scheint eine angemessene Größe zu sein. Der beste Ansatz ist wahrscheinlich, solange zu experimentieren, bis Sie eine Größe finden, die benutzerfreundlich ist, aber gleichzeitig nicht zu grob erscheint.

Anpassungen

Traditionellerweise passen sich Programme mittels Präprozessoranweisungen für die konditionale Kompilierung den verschiedenen Plattformen von selbst an. Ein Silverlight-Programm definiert das konditionale Kompiliersymbol SILVERLIGHT, und ein Windows Phone 7-Programm definiert sowohl SILVERLIGHT als auch PHONE. (Sie können dies sehen, indem Sie die Registerkarte für die Kompilierung auf der Seite für die Projekteigenschaften auswählen.) Dies bedeutet, dass Ihr Code wie folgt aussehen kann:

#if PHONE
  // Code for Windows Phone 7
#else
  // Code for regular Silverlight
#endif

Oder Sie können zur Laufzeit differenzieren, indem ein Zugriff auf das Environment.OSVersion-Objekt erfolgt. Wenn die Plattformeigenschaft PlatformID.WinCE ist, und die Version.Major-Eigenschaft 7 oder höher ist, wird Ihr Code auf einem Windows Phone 7-Gerät ausgeführt (oder vielleicht Windows Phone 8 oder 9).

Theoretisch ist es möglich, die konditionalen Abschnitte von XAML-Dateien mittels der AlternateContent- und Choice-Tags zu definieren, die im Markup-Compatibility (MC)-Namespace definiert sind. Diese Tags werden jedoch in Silverlight anscheinend nicht unterstützt.

XAML kann jedoch Datenbindungen enthalten, und diese Bindungen können auf verschiedene Objekte verweisen, je nach Plattform. XAML kann außerdem über StaticResource-Verweise verfügen, die für verschiedene Plattformen verschiedene Objekte abrufen. Diesen Ansatz habe ich im TextTransform-Programm verwendet.

Ich habe die TextTransform-Lösung auf die gleiche Art wie die DragImage-Lösung erstellt. Die Lösung besteht aus drei Projekten: TextTransform (Silverlight-Programm), TextTransform.Web (Webprojekt zum Hosten des Silverlight-Programms) und TextTransform.Phone (Windows Phone 7).

Im Silverlight-Projekt habe ich ein TextTransformer-Steuerelement erstellt, das von UserControl abgeleitet ist. Dieses Steuerelement wird vom Silverlight- und Windows Phone 7-Projekt gemeinsam verwendet. Das TextTransformer-Steuerelement enthält eine fest kodierte Textzeichenfolge (das Wort „TEXT“), umgeben von einem Rahmen mit vier Thumb-Steuerelementen an den Ecken. Das Verschieben eines Thumb-Steuerelements führt dazu, dass für den Rahmen und den Textblock eine nicht affine Transformation durchgeführt wird. (Dies funktioniert nur dann korrekt, wenn das vom Rahmen gebildete Quadrat keine konkaven Ecken aufweist.)

Die Datei „TextTransformer.xaml“ erstellt keine neue Vorlage für das Thumb-Steuerelement, sondern definiert einen Stil, wie in Abbildung 4 gezeigt.

Abbildung 4 Der Thumb-Stil aus TextTransformer.xaml

<Style x:Key="thumbStyle" TargetType="Thumb">
  <Setter Property="HorizontalAlignment" 
          Value="Left" />
  <Setter Property="VerticalAlignment" 
          Value="Top" />
  <Setter Property="Width" 
          Value="{StaticResource ThumbSize}" />
  <Setter Property="Height" 
          Value="{StaticResource ThumbSize}" />
  <Setter Property="RenderTransform">
    <Setter.Value>
      <TranslateTransform 
        X="{StaticResource HalfThumbOffset}"
        Y="{StaticResource HalfThumbOffset}" />
    </Setter.Value>
  </Setter>
</Style>

Beachten Sie die Verweise auf „ThumbSize“ und „HalfThumbOffset“. Obwohl der Textblock, der den Text anzeigt, mittels Eigenschaftenvererbung die korrekte Foreground-Eigenschaft erhält, muss dem Rahmen ausdrücklich die gleiche Vordergrundfarbe zugewiesen werden:

<Border Name="border"
        BorderBrush="{StaticResource ForegroundBrush}"
        BorderThickness="1">

Wo sind diese Ressourcen definiert? Sie sind in App.xaml definiert. Das Silverlight-Projekt enthält in der App.xaml-Datei eine Ressourcensammlung, die Folgendes enthält:

<Application.Resources>
  <SolidColorBrush x:Key="BackgroundBrush" Color="White" />
  <SolidColorBrush x:Key="ForegroundBrush" Color="Black" />
  <system:Double x:Key="ThumbSize">36</system:Double>
  <system:Double x:Key="HalfThumbOffset">-18</system:Double>
</Application.Resources>

Die App.xaml-Datei für das Windows Phone 7-Programm verweist auf die vorab definierten Ressourcen für die beiden Pinsel und definiert größere ThumbSize- und HalfThumbOffset-Werte:

<Application.Resources>
  <SolidColorBrush x:Key="BackgroundBrush"
     Color="{StaticResource PhoneBackgroundColor}" />
  <SolidColorBrush x:Key="ForegroundBrush"
     Color="{StaticResource PhoneForegroundColor}" />
  <system:Double x:Key="ThumbSize">96</system:Double>
  <system:Double x:Key="HalfThumbOffset">-48</system:Double>
</Application.Resources>

Abbildung 5 zeigt das Programm, wie es im Browser ausgeführt wird, und Abbildung 6 zeigt das Programm, wie es im Windows Phone 7-Emulator ausgeführt wird. Der Emulator wird mit 50 Prozent der Gesamtgröße angezeigt, um die höhere Pixeldichte auf dem Telefon auszugleichen.

Abbildung 5 Das TextTransform-Programm im Browser

Abbildung 6 Das TextTransform-Programm im Telefonemulator

Diese Techniken zeigen, dass die gemeinsame Verwendung von Code auf dem Desktop und auf dem Telefon Realität geworden ist. Wenn Sie weitere Informationen zu diesem Thema erhalten möchten, finden Sie im Surface Toolkit for Windows Touch ein SurfaceThumb-Steuerelement für WPF-Entwickler. Dieses Steuerelement verhält sich wie das normale Thumb-Steuerelement, fügt jedoch Unterstützung für echtes Multi-Touch und Ereignisse für Fingereingabebewegungen hinzu. Weitere Informationen finden Sie auf der Seite für die Surface Toolkit for Windows Touch-Beta unter msdn.microsoft.com/library/ee957351.

Charles Petzoldist langjähriger beitragender Editor für das MSDN Magazin*. Sein neues Buch, „Programming in Windows Phone 7“ (Programmierung in Windows Phone 7) ist als kostenloser Download auf bit.ly/cpebookpdf verfügbar*

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Doug Kramer und Robert Levy