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

8 Tage Windows Phone 8 | Tag #2: Live Tiles und Sperrbildschirm

Die­ser Arti­kel ist Tag #2 der Serie 8 Tage Win­dows Phone 8 von Geert van der Cruijsen.

Der Ori­gi­nal­ar­ti­kel befin­det sich hier: 8 days of Win­dows Phone 8 — Day 2: Live Tiles & Lock Screen.

8 Tage Windows Phone 8

Will­kom­men zurück zu mei­ner Serie 8 Tage Win­dows Phone 8. Heute, am zwei­ten Tag der Serie, tau­chen wir ein in die Mög­lich­kei­ten der Live Tiles und des Sperr­bild­schirms von Win­dows Phone 8.

8 Tage Windows Phone 8 | Tag 2: Live Tiles und Sperrbildschirm

Live Tiles

Wenn Sie mit der Anwen­dungs­ent­wick­lung für Win­dows Phone 7 ver­traut sind, ken­nen Sie Live Tiles bereits. Sie sind eins der her­aus­ra­gen­den Fea­tures von Win­dows Phone. Mit Win­dows Phone 8 bie­tet Micro­soft mehr Mög­lich­kei­ten, Live Tiles zu erstel­len und für die Nut­zer mehr Mög­lich­kei­ten, diese an die per­sön­li­chen Bedürf­nisse anzupassen.

Die größte Ände­rung ist, dass jeder Benut­zer die Kacheln nun auf drei unter­schied­li­che Grö­ßen ein­stel­len kann. Klein, mit­tel und breit. Wei­ter­hin gibt es 3 ver­schie­dene Vor­la­gen, um Live Tiles zu erstel­len. Die Vor­la­gen stel­len die Infor­ma­tio­nen auf einem Live Tile in unter­schied­li­cher Weise dar: der Flip Tem­plate, der Cycle Tem­plate und der Ico­nic Template.

Die ver­wen­de­ten Grö­ßen für diese Tem­pla­tes sind:

Flip Cycle Ico­nic
Klein 159 * 159px 159 * 159px 110 * 110px
Mit­tel 336 * 336px 336 * 336px 202 * 202px
Breit 691 * 336px 691 * 336px -

Man könnte mei­nen, dass es veschie­dene Grö­ßen für die Bil­der geben müsste wegen der unter­schied­li­chen Auf­lö­sun­gen in Win­dows Phone 8. Das ist aller­dings nicht der Fall. Das Betriebs­sys­tem ska­liert die Bil­der ent­spre­chend, Sie müs­sen diese also nur in einer Größe bereitstellen.

FLIP TEMPLATE

In Win­dows Phone 7 war es mög­lich, Kacheln zu erstel­len und gewisse Eigen­schaf­ten, wie Titel, Zäh­ler, Bild und Text auf der Rück­seite, anzu­ge­ben. Das ist auch in Win­dows Phone 8 wei­ter­hin mög­lich, aller­dings hat Micro­soft 2 neue Vor­la­gen für Live Tiles hin­zu­ge­fügt. Die aus Win­dows Phone 7 bekannte Vor­lage heißt jetzt Flip Tem­plate, da sie Daten auf der Rück­seite der Kachel anzeigt und in unre­gel­mä­ßi­gen Abstän­den zwi­schen der Vor­der– und der Rück­seite hin– und her­wech­selt. Die bei­den neuen Tem­pla­tes hei­ßen Ico­nic Tem­plate und Cycle Template.

Begin­nen wir mit etwas Code. Am Ende die­ses Arti­kels kön­nen Sie den Bei­spiel­code zur Erstel­lung der ver­schie­de­nen Arten von Kacheln in einem Pro­jekt her­un­ter­la­den. Fan­gen wir mit dem Flip Tile an.

Wir star­ten mit einem neuen Pro­jekt und fügen einen But­ton hinzu, um den Flip Tem­plate zu erstel­len. Wir fügen einen Click Event Hand­ler hinzu und schrei­ben der Ein­fach­heit hal­ber unse­ren Code zur Erstel­lung des Live Tile gleich dort hinein.

private void FlipButton_Click(object sender, RoutedEventArgs e)
{
   ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

   FlipTileData fliptile = new FlipTileData();
   fliptile.Title = "WP8";
   fliptile.Count = 9;
   fliptile.BackTitle = "day 2";
   fliptile.BackContent = "back medium";
   fliptile.WideBackContent = "back of the wide tile";

   fliptile.SmallBackgroundImage = new Uri("Assets/159.png",UriKind.Relative);
   fliptile.BackgroundImage = new Uri("Assets/336.png", UriKind.Relative);
   fliptile.WideBackgroundImage = new Uri("Assets/wide.png", UriKind.Relative);

   tile.Update(fliptile);
}

Als ers­tes holen wir uns die aktu­ell aktive Kachel, indem wir die Shell­Tile Klasse fra­gen. Als nächs­tes erstel­len wir ein neues Flip­Ti­le­Data Objekt. Auf die­sem kön­nen wir die Eigen­schaf­ten der neuen Kachel set­zen. Wir set­zen den Titel, den Zäh­ler und einige wei­tere Eigen­schaf­ten. Einige wer­den nur für die kleine Kachel, einige nur für die mitt­lere und breite Größe ver­wen­det und einige, wie der Zäh­ler, in allen drei Grö­ßen. Für geben 3 unter­schied­li­che Anwen­dungs­sym­bole an für die 3 ver­schie­de­nen Grö­ßen. Nach­dem wir alle Eigen­schaf­ten der Kachel gesetzt haben, kön­nen wir die Update Methode auf unse­rem Tile auf­ru­fen und das neue Flip­Ti­le­Data über­ge­ben, um die neue Kachel zu setzen.

Beim Flip Tile kön­nen Sie die fol­gen­den Eigen­schaf­ten setzen:

Title Der Titel wird unten links auf der Vor­der­seite der Kachel ange­zeigt. Er gilt für die mitt­lere und die breite Größe.
Count Der Zäh­ler ist die Zahl in dem klei­nen schwar­zen Kreis rechts oben auf der Kachel. Der Zäh­ler wird bei allen Grö­ßen angezeigt.
Back­groun­dI­mage Das Hin­ter­grund­bild ist das Bild, wel­ches auf der Vor­der­seite der mitt­le­ren Größe ange­zeigt wird.
Back­Back­groun­dI­mage Mit die­ser Eigen­schaft kön­nen Sie das Bild auf der Rück­seite der mitt­le­ren Kachel­größe setzen.
Back­Con­tent Back­Con­tent ist der Text auf der Rück­seite der Kachel bei mitt­le­rer Größe.
Back­Title Der Titel, wel­cher unten links auf der Rück­seite der Kachel bei mitt­le­rer und brei­ter Größe ange­zeigt wird.
Small­Back­groun­dI­mage Das Bild auf der Vor­der­seite bei klei­ner Größe.
Wide­Back­groun­dI­mage Das Bild auf der Vor­der­seite bei brei­ter Größe.
Wide­Back­Back­groun­dI­mage Das Bild auf der Rück­seite der Kachel bei brei­ter Größe.
Wide­Back­Con­tent Der Text, wel­cher auf der Rück­seite der brei­ten Kachel oben links ange­zeigt wird.

Das Ergeb­nis wird in etwa so aussehen:

Klein (die Kachel wird sich bei die­ser Größe nicht umdrehen):

small

Mit­tel:

medium

mediumexampleback

Breit:

wideexample

wideexampleback

Wie Sie sehen, gibt es gegen­über der Erstel­lung von Live Tiles in Win­dows Phone 7 kaum Ände­run­gen. Neu sind ledig­lich die kleine und die breite Größe der Kachel.

ICONIC TEMPLATE

Der Ico­nic Tem­plate ist eine neue Vor­lage in Win­dows Phone 8 und ich denke, dass es sich um eine wirk­lich gute Erwei­te­rung des SDK han­delt. Viele Apps ver­wen­den Kacheln mit wei­ßem Vor­der­grund und einem trans­pa­ren­ten Hin­ter­grund, so dass sie wie native Win­dows Phone Apps aus­se­hen. Viele Ent­wick­ler haben jedoch Pro­bleme, die Größe des Sym­bols rich­tig zu wäh­len und der Zäh­ler im schwar­zen Kreis sieht nicht so gut aus wie bei den ein­ge­bau­ten Apps, etwa der Mail oder Nach­rich­ten App. Um diese Sze­na­rien ein­fa­cher für Ent­wick­ler zu machen, hat Micro­soft den Ico­nic Tem­plate ein­ge­führt. Die­ser funk­tio­niert fast wie der Flip Tile, nur dass wir anstatt des Flip­Ti­le­Data Objekts ein Ico­nic­Tile­Data Objekt ver­wen­den. Ich denke, die Ico­nic Tiles wer­den in Win­dows Phone 8 sehr oft vewen­det werden.

private void IconicButton_Click(object sender, RoutedEventArgs e)
{
   ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

   IconicTileData icontile = new IconicTileData();
   icontile.Title = "WP8";
   icontile.Count = 12;
   icontile.IconImage = new Uri("Assets/202.png", UriKind.Relative);
   icontile.SmallIconImage = new Uri("Assets/110.png", UriKind.Relative);

   icontile.WideContent1 = "8 days of windows phone 8";
   icontile.WideContent2 = "day 2";
   icontile.WideContent3 = "Live tiles and lock screen";

   ShellTile.Create(new Uri("/MainPage.xaml",UriKind.Relative), icontile, true);
}

Wie Sie sehen, funk­tio­niert die Erstel­lung genau wie bei der ers­ten Kachel mit der Aus­nahme, dass wir jetzt Ico­nic­Tile­Data verwenden.

Die Eigen­schaf­ten von Ico­nic­Tile­Data sind natür­lich andere. Ein wesent­li­cher Aspekt sind die Bil­der, die Sie für den Ico­nic Tile ange­ben. Diese haben im Gegen­satz zu den ande­ren Vor­la­gen eine andere Größe, da sie nur einen Teil der Kachel aus­fül­len. In der aktu­el­len Beta­ver­sion des SDK, mit wel­cher ich die fol­gen­den Screen­shots für die­sen Arti­kel erstellt habe, schei­nen die Bil­der noch nicht recht zu funk­tio­nie­ren. Ich ver­mute, dass das mit der end­gül­ti­gen Ver­sion des SDK beho­ben sein wird.

Ein wei­te­rer Unter­schied ist die letzte Zeile zur Erstel­lung des Live Tile. Da die Haupt­ka­chel stan­dard­mä­ßig mit dem Flip Tile Tem­plate erstellt ist und man nicht eine exis­tie­rende Kachel mit einem ande­ren Tem­plate aktua­li­sie­ren kann, erstel­len wir für den Ico­nic Tile eine neue Kachel.

Klein (es scheint einen Bug in der Beta­ver­sion des 8.0 SDK zu geben, durch den der Zäh­ler vom Rand der Kachel gescho­ben wird. Ich weiß nicht, ob das nur im Emu­la­tor oder auch auf ech­ten Gerä­ten pas­siert. Ich habe es nicht auf einem ech­ten Gerät tes­ten kön­nen, da ich noch keins besitze):

iconsmall

Mit­tel:

iconmedium

Breit (auch hier scheint die Dar­stel­lung etwas dane­ben. Unter­halb des Sym­bols sollte es eigent­lich einen klei­nen Abstand bis zum Rand der Kachel geben):

iconwide

In der brei­ten Größe kön­nen drei Zei­len Text ange­ge­ben wer­den, die oben links auf der Kachel ange­zeigt wer­den. Damit ist diese Vor­lage sehr viel­sei­tig und wird bestimmt sehr oft ver­wen­det wer­den. Eine kom­plette Liste der Eigen­schaf­ten von Icon­Ti­le­Data ist:

Title Der Titel, wel­cher unten links auf der mitt­le­ren und brei­ten Größe der Kachel ange­zeigt wird.
Count Der Zäh­ler, wel­cher bei allen Grö­ßen rechts neben dem Sym­bol ange­zeigt wird.
Back­ground­Co­lor Die Hin­ter­grund­farbe der Kachel. Wenn diese nicht ange­ge­ben wird, wird die Akzent­farbe des Tele­fons verwendet.
Icon­I­mage Das Sym­bol, wel­ches bei der mitt­le­ren Größe ver­wen­det wird.
Smal­lI­con­I­mage Das Sym­bol, wel­ches bei der klei­nen und der brei­ten Größe (rechts unten) ver­wen­det wird.
WideContent1 Die erste Zeile des Tex­tes bei der brei­ten Größe in einer etwas grö­ße­ren Schriftart.
WideContent2 Die zweite Zeile des Tex­tes auf der brei­ten Größe der Kachel.
WideContent2 Die dritte Zeile auf der brei­ten Größe der Kachel.

CYCLE TEMPLATE

Der Ico­nic Tem­plate bringt viele neue Mög­lich­kei­ten für Live Tiles. Um einen ähnli­chen Effekt unter Win­dows Phone 7 zu erzie­len, muss­ten Ent­wick­ler ziem­lich trick­sen. Ein wei­te­res Bei­spiel für Kacheln, wel­che Ent­wick­ler gerne erstellt hät­ten, ist die Kachel der Fotos Anwen­dung, bei wel­cher eine Menge von Bil­dern auf der Kachel durch­ro­tie­ren. Bei Win­dows Phone 7 gab es keine Mög­lich­keit, die­ses Ver­hal­ten nach­zu­bauen. Mit Win­dows Phone 8 gibt es diese Mög­lich­keit in Form es Cycle Template.

Die Erstel­lung eines Cycle Tile erfolgt auf die selbe Weise wie bei den ande­ren bei­den Typen. Fan­gen wir also an, etwas Code für den drit­ten But­ton in unse­rer Bei­spiel­an­wen­dung hinzuzufügen.

private void CycleButton_Click(object sender, RoutedEventArgs e)
{
   CycleTileData cycleicon = new CycleTileData();
   cycleicon.Title = "WP8";
   cycleicon.Count = 5;

   cycleicon.SmallBackgroundImage = new Uri("Assets/159.png", UriKind.Relative);

   List<Uri> images = new List<Uri>();
   images.Add(new Uri("Assets/cycle1.png", UriKind.Relative));
   images.Add(new Uri("Assets/cycle2.png", UriKind.Relative));
   images.Add(new Uri("Assets/cycle3.png", UriKind.Relative));
   cycleicon.CycleImages = images;

   ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), cycleicon, true);
}

Der Cycle Tile ver­wen­det das Cycle­Ti­le­Data Objekt, um das Aus­se­hen fest­zu­le­gen. Im Ver­gleich zu den ande­ren bei­den Vor­la­gen hat diese Klasse weni­ger Eigen­schaf­ten. Der Titel und der Zäh­ler sind wie bei den ande­ren bei­den Vor­la­gen vor­han­den. Die beson­dere Eigen­schaft an die­ser Vor­lage ist CycleIm­ages. Diese ist vom Typ IEnu­me­ra­ble von Uri’s (wel­che auf Bil­der in einer ein­heit­li­chen Größe zei­gen). Diese Bil­der wer­den bei der mitt­le­ren und der brei­ten Größe der Kachel ange­zeigt. Wenn die Bil­der grö­ßer als die Kachel sind, wer­den diese auf der Kachel zen­triert, womit nur ein Teil des Bil­des ange­zeigt wird. Wenn die Kachel auf die kleine Größe gesetzt ist, wird nur ein klei­nes, sta­ti­sches Bild ange­zeigt, wel­ches mit der Eigen­schaft Small­Back­groun­dI­mage gesetzt wer­den kann.

Klein:

cyclesmall

Mit­tel:

cyclemedium

Breit:

cyclewide

Das IEnu­me­ra­ble von Bil­dern, wel­ches bei der mitt­le­ren und der brei­ten Größe ver­wen­det wird, kann bis zu 9 Bil­der beinhal­ten. Diese wer­den durch eine wei­che Ani­ma­tion durch­ro­tiert. Die voll­stän­dige Liste der Eigen­schaf­ten von Cycle­Ti­le­Data ist:

Title Der Titel, wel­cher bei der mitt­le­ren und der brei­ten Größe unten links ange­zeigt wird.
Count Der Zäh­ler, wel­cher bei allen Grö­ßen rechts oben ange­zeigt wird.
Small­Back­groun­dI­mage Das Bild, wel­ches bei der klei­nen Größe ange­zeigt wird.
CycleIm­ages Die Liste der bis zu 9 Bil­der, wel­che bei der mitt­le­ren und der brei­ten Größe durch­ro­tiert werden.

Mit den Live Tile Fea­tures, wel­che Micro­soft bei Win­dows Phone 8 hin­zu­ge­fügt hat, eröff­nen sich einige hüb­sche Mög­lich­kei­ten, die Anwen­dungs­ka­cheln zu gestal­ten. Ich kann es kaum erwar­ten, bis Ent­wick­ler diese Funk­tio­nen in ihren Apps verwenden.

Sperr­bild­schirm

Neu in Win­dows Phone 8 ist die Mög­lich­keit, eigene Apps auf dem Sperr­bild­schirm anzu­zei­gen. Als Ent­wick­ler kön­nen Sie nicht erzwin­gen, dass Ihre App auf dem Sperr­bild­schirm ange­zeigt wird. Sie kön­nen Ihre App aber wenigs­tens dazu befä­hi­gen, so dass der Benut­zer wäh­len kann, ob er Ihre App auf dem Sperr­bild­schirm sehen möchte. Wei­ter­hin kön­nen Sie aus einer App her­aus das Hin­ter­grund­bild des Sperr­bild­schirms verändern.

SPERRBILDSCHIRM APP SYMBOL, ZÄHLER UND TEXT

Das Sym­bol Ihrer App für den Sperr­bild­schirm ist ein spe­zi­el­les Bild, wel­ches Sie Ihrem Pro­jekt hin­zu­fü­gen müs­sen. Die­ses muss einen trans­pa­ren­ten Hin­ter­grund und wei­ßen Vor­der­grund haben.

Um das Sperr­bild­schirm Sym­bol zu set­zen, fügen Sie ein Bild mit 30 x 30 Pixel zu Ihrer Solu­tion hinzu und öffnen Sie die WMAppManifest.xml. Ändern Sie dort das Device­Lo­ck­I­mageURI Ele­ment auf die URI Ihres Sperr­bild­schirm Sym­bols. Set­zen Sie wei­ter­hin das IsRe­la­tive Attri­but auf true und das IsRe­source Attri­but auf false. Der Zäh­ler und der Text wer­den von den Eigen­schaf­ten der Haupt­ka­chel der App übernommen.

<DeviceLockImageURI IsRelative="true" IsResource="false">Assets\LockImage.png</DeviceLockImageURI>

Um das Sperr­bild­schirm Sym­bol und den Text zu akti­vie­ren, müs­sen Sie die fol­gen­den Zei­len im WPAppManifest.xml unter­halb des Tokens Ele­ments hinzufügen.

<Extensions>
   <Extension ExtensionName="LockScreen_Notification_IconCount" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
   <Extension ExtensionName="LockScreen_Notification_TextField" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
</Extensions>

Die Ein­stel­lun­gen zur Anzeige von Daten auf dem Sperr­bild­schirm sind nun voll­stän­dig. Wir kön­nen nun die Tele­fon­ein­stel­lun­gen ändern, um unsere App auf dem Sperr­bild­schirm anzu­zei­gen. Um dies zu tun, öffnen Sie die Ein­stel­lun­gen und gehen zu den Ein­stel­lun­gen des Sperr­bild­schirms. Auf die­ser Seite kön­nen Sie eine App wäh­len, wel­che Text auf dem Sperr­bild­schirm anzeigt (stan­dard­mä­ßig ist das die Kalen­der App) und 5 Apps, wel­che das Sym­bol und den Zäh­ler anzei­gen kön­nen. Wäh­len Sie Ihre App und Sie sind fertig.

settings

lockscreen

lockscreenappadded

lockscreenenabled

Wie Sie sehen, wird der Zäh­ler der Haupt­ka­chel ver­wen­det (des Flip Tile Bei­spiels). Auch der Text ist der selbe, den wir in der Back­Con­tent Eigen­schaft von Flip­Ti­le­Data der Haupt­ka­chel gesetzt haben.

HINTERGRUNDBILD DES SPERRBILDSCHIRMS

Als letz­tes möchte ich Ihnen zei­gen, wie man das Hin­ter­grund­bild des Sperr­bild­schirms aus einer App her­aus setzt. Wie schon beim Sym­bol für den Sperr­bild­schirm müs­sen Sie eine Erwei­te­rung im WMAppManifest.xml hin­zu­fü­gen, um diese Funk­tio­na­li­tät zu aktivieren.

<Extensions>
   <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
</Extensions>

Nach­dem Sie die Ein­stel­lung im Mani­fest ange­passt haben, ist es Zeit, eini­gen Code zu schrei­ben, wel­cher das Hin­ter­grund­bild des Sperr­bild­schirms ver­än­dert. Zunächst müs­sen Sie prü­fen, ob es Ihrer App zur Zeit erlaubt ist, das Hin­ter­grund­bild zu ver­än­dern. Wenn das nicht der Fall ist, müs­sen Sie den Benut­zer fra­gen, ob Ihre App das Hin­ter­grund­bild ver­än­dern darf.

Ich habe ein Bild mit den Abmes­sun­gen 768 x 1280 Pixel (zur Zeit die höchste Auf­lö­sung) hin­zu­ge­fügt, das Bild als ein­ge­bet­tete Res­source gesetzt und den fol­gen­den Code zum Click Event des vier­ten But­tons im Bei­spiel­pro­jekt hin­zu­ge­fügt. Damit ändern wir das Hin­ter­grund­bild des Sperr­bild­schirms, wenn wir auf die­sen But­ton drücken.

private void LockBackgroundButton_Click(object sender, RoutedEventArgs e)
{
   SetLockScreenImage();
}

private async void SetLockScreenImage()
{
   //check if current app provided the lock screen image
   if (!Windows.Phone.System.UserProfile.LockScreenManager.IsProvidedByCurrentApplication)
   {
      //current image not set by current app ask permission
      var permission = await Windows.Phone.System.UserProfile.LockScreenManager.RequestAccessAsync();

      if (permission == Windows.Phone.System.UserProfile.LockScreenRequestResult.Denied)
      {
         //no permission granted so return without setting the lock screen image
         return;
      }
   }

   Windows.Phone.System.UserProfile.LockScreen.SetImageUri(new Uri("ms-appx:///Assets/lockscreen.png", UriKind.Absolute));
}

Wie Sie sehen, ver­wen­det die Methode Set­Lock­Scree­n­Image das asnyc Schlüs­sel­wort, da die Frage an den Benut­zer um Erlaub­nis nur durch einen asyn­chro­nen Auf­ruf erfol­gen kann. Wir ver­wen­den des­halb das await Schlüs­sel­wort bei der Frage um Erlaub­nis, um die Ent­schei­dung des Benut­zers abzuwarten.

Wenn wir die App jetzt star­ten und den But­ton drü­cken, sehen wir, wie das alte Bild des Sperr­bild­schirms durch das neue Bild ersetzt wird.

lockscreenbefore

lockpermission

Nach­dem man bestä­tigt hat:

lockscreennew

Das war’s für Tag 2 mei­ner Serie „8 Tage Win­dows Phone 8″. Mor­gen wer­den wir einen Blick auf den Emu­la­tor und das Simu­la­tion Dash­board wer­fen. Diese bie­ten Ihnen viele Mög­lich­kei­ten, Ihre Apps zu testen.

Laden Sie das Bei­spiel­pro­jekt hier her­un­ter: http://sdrv.ms/QSJ2yx.

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>