» Windows Phone 8 în 10 zile

Windows Phone 8 în 10 zile – 6

Azi vom vorbi despre LiveTile-uri, de câte tipuri sunt și cum le pot implementa mai ușor.

În primul rând toate aplicațiile au cel puțin un tile, cel default, fără acesta aplicația nu poate să fie acceptată în store. În cazul nostru este imaginea pe care o avem ca featured în blog post.

Ceea ce este nou pe WP și nu vedem pe W8 este capabilitatea unei aplicații de a crea tile-uri noi care să ne ducă direct la o anumită parte a aplicației noastre.

3 dimensiuni

Windows 8 are 3 dimensiuni pentru live tile-uri:

Mici: 159 x 159 px;
Medii: 336 x 336 px;
Wide: 691 x 336 px.

wp_ss_20140319_00021
În ciuda faptului că Windows Phone 8 suportă 3 rezoluții (WXGA, WVGA și 720p) noi nu trebuie să încărcăm tile-urile decât pentru una din ele deoarece imaginile for fi rescalate astfel încât să se potrivească.

3 tipuri

Windows Phone 8 are de asemenea trei tipuri de tile-uri:

Flip: pe prima față au un logo/text și pe a doua o imagine;
Iconic: cu designul simplu cu logo și text;
Cycle: ciclează prin mai multe imagini pe care le afișează (maxim 9)

Toate cele trei tipuri de tile-uri merg pe toate dimensiunile, excepție făcând Cycle tile care nu o să funcționeze pe Small Tile.

Mai multă teorie poți să afli pe site-urile MSDN aici sau aici, o să trecem la partea practică.

Visual Studio time

În Sollution Explorer click pe Properties-> WMAppManifest.xml

liveTiles

Selectez ce fel de Tile vreau să am, dacă vreau să declar support și pt tile-urile mari și ce titlu să apară pe tile-urile mele. precum și să setez cele 3 tile-uri cu dimensiunile lor diferite. În general, eu aleg pur și simplu să le înlocuiesc pe cele vechi astfel încât să nu mai trebuiască să umblu eu să le caut.

Crearea de tile-uri din aplicație

public static void SetTile()
        {
            FlipTileData tileData = new FlipTileData()
            {

                Title = "Titlu Față",
                BackgroundImage = new Uri("ms-appx:///background1.png", UriKind.Relative),
                SmallBackgroundImage = new Uri("ms-appx:///smallbackground1.png", UriKind.Relative),

                BackTitle = "Titlu Spate",
                BackContent = "diferite lucruri de afișat",
                BackBackgroundImage = new Uri("ms-appx:///backbackground1.png", UriKind.Relative),

                WideBackgroundImage = new Uri("ms-appx:///widebackground1.png", UriKind.Relative),
                WideBackBackgroundImage = new Uri("ms-appx:///widebackbackground1.png", UriKind.Relative),
                WideBackContent = "alte lucruri de afișat"

            };

            ShellTile.Create(new Uri("/Views/learn.xaml?DefaultTitle=FromTile", UriKind.Relative), tileData, true);
        }

public static void SetTile()

{

FlipTileData tileData = new FlipTileData()

{

Title = "Titlu Față",

BackgroundImage = new Uri("ms-appx:///background1.png", UriKind.Relative),

SmallBackgroundImage = new Uri("ms-appx:///smallbackground1.png", UriKind.Relative),

BackTitle = "Titlu Spate",

BackContent = "diferite lucruri de afișat",

BackBackgroundImage = new Uri("ms-appx:///backbackground1.png", UriKind.Relative),

WideBackgroundImage = new Uri("ms-appx:///widebackground1.png", UriKind.Relative),

WideBackBackgroundImage = new Uri("ms-appx:///widebackbackground1.png", UriKind.Relative),

WideBackContent = "alte lucruri de afișat"

};

ShellTile.Create(new Uri("/Views/learn.xaml?DefaultTitle=FromTile", UriKind.Relative), tileData, true);

}

Linia 3

Creez tile-ul pe care-l voi pune pe start screen.

Liniile 6-8

Specific ce titlu să aibă tile-ul normal și de unde să ia cele două imagini (medium și small size)

Liniile 10-12

Specific că o să am un tile de tip Cycle și îi dau titlul și imaginile pe care vreau să le afișeze în spate.

Liniile 14-16

Specific imaginile și detaliile pe care le vreau afișate în cazul în care utilizatorul decide să îmi facă tile-ul Wide.

Linia 21

Lansez tile-ul și îl setez astfel încât după ce utilizatorul a dat click să îl ducă pe pagina specificată de mine.

Update la Tile

private void updateTile()
        {
            var mainTile = ShellTile.ActiveTiles.FirstOrDefault();

            IconicTileData tileData = new IconicTileData()
            {
                Count = Convert.ToInt32(scor.Text),
                BackgroundColor = Color.FromArgb(255,195,61,39),
                Title = "Știi sinonimul?",
                IconImage =
                new Uri("ms-appx:///Assets/highScore-medium.png", UriKind.RelativeOrAbsolute),
                SmallIconImage =
                new Uri("ms-appx:///Assets/highScore-small.png", UriKind.RelativeOrAbsolute),
                WideContent1 = "Ultimul meu scor:",
                WideContent2 = scor.Text,
                WideContent3 = "text suplimentar"
            };

            mainTile.Update(tileData);
        }

private void updateTile()

{

var mainTile = ShellTile.ActiveTiles.FirstOrDefault();

IconicTileData tileData = new IconicTileData()

{

Count = Convert.ToInt32(scor.Text),

BackgroundColor = Color.FromArgb(255,195,61,39),

Title = "Știi sinonimul?",

IconImage =

new Uri("ms-appx:///Assets/highScore-medium.png", UriKind.RelativeOrAbsolute),

SmallIconImage =

new Uri("ms-appx:///Assets/highScore-small.png", UriKind.RelativeOrAbsolute),

WideContent1 = "Ultimul meu scor:",

WideContent2 = scor.Text,

WideContent3 = "text suplimentar"

};

mainTile.Update(tileData);

}

Destul de self-explenatory și fără prea mare bătaie de cap. Creez tile-ul, îi dau titlu/culoare/imagine și îl imping peste cel vechi.

By: Adrian Coman