As you might have realised, the last few weeks, cineworld app has been my obsession. I started work on WP8 port and then back-ported some changes to WP7 version of the app (its the only one that’s live at the moment so makes sense). So what did I do so far on it (WP7 version) ?
1) Moved to using 50% space when displaying film posters, moved film little on top of the posters, removed the button style that caused me many xaml exceptions on WP8
2) Moved to using good quality images only for ImageTile control.
3) Added background task to download data files and to set Tile images
This is live as we speak and a few people emailed me saying it looks great. Now I am not going to create yet another background task for WP8 version (since I wanted to use Cycle Tile Template for WP8 version of the app.
Microsoft’s own tile related pages show how to support newer tiles for WP7.8 and WP8 even though the app itself is built on WP 7.1 (Mango) sdk
So far I stayed away from temptation of managing image repository on the device. you can see that it gets messy eventually and you have to clean up and what not.. however after implementing basic solution, it started throwing exceptions.. files used for tiles cannot be remote. Bugger.. more work
Step 1): Download image files locally. I have been using AsyncWebClient (Custom wrapper with TaskCompletionSource) exposing awaitable DownloadFile method. Plug that in and download all the files. Its background tasks, I am not really fussed about parallel execution.. just manageable execution (read sync like)
Step 2): For Uri array using relative path and ??? still nothing. More work, a quick search about the net found me a couple of posts for “live tile isolated storage image WP7″ File Path in Isolated File Storage is the one that I first opened and a quick scan reminded me of “isostore” based Uri
Step 3): Save all the images to Shell\SharedContent and switch all Uri to use isotore:/Shell/SharedContent/Filename.jpg
The code below will help you create live tiles with new tile templates from WP7.1 (Mango) sdk based project. I will be using the same code for WP8 in coming days since its the same background task
A word to the wise:
* You cannot determine if the template used by Tile is Standard or a new one.
* What I now do is Create a CycleTileData template when user wants to pin (if WP7.8 or WP8) else StandardTileData
* When iterating tiles, I try CycleTileData template and failing that try StandardTileData for update
Code snippets that might help:
Add AppExtra above App element in WMAppManifest.xml file (works for both WP7.8 and WP8)
<AppExtra xmlns="" AppPlatformVersion="8.0"> <Extra Name="Tiles"/> </AppExtra>
public async Task DownloadFileAsync(string url, string filename, string folder = null)
{
// create a web client for downloading the string
var wc = new WebClient();
try
{
IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();
string file = (folder == null ? filename : String.Format("{0}/{1}", folder, filename));
using (Stream s = await wc.OpenReadTaskAsync(url))
{
using (Stream slocal = isf.OpenFile(file, FileMode.Create))
{
s.CopyTo(slocal);
}
}
}
catch (Exception ex)
{
if (1 == 1) // just to check exceptions during debugging. do whatever pleases you
{
}
}
}
//works for both WP7.8 and WP8
private static Version TargetedVersion = new Version(7, 10, 8858);
public static bool IsTargetedVersion { get { return Environment.OSVersion.Version >= TargetedVersion; } }
private static void SetTileBackground(string[] filesToShow, string folder, Random random, ShellTile currentTile)
{
bool tryFlip = false;
if (Config.IsTargetedVersion)
{
try
{
Uri smallimage = new Uri("Images/CycleSmall.png", UriKind.Relative);
Uri mediumimage = new Uri("Images/CycleMedium.png", UriKind.Relative);
UpdateCycleTile(smallimage, mediumimage, folder, filesToShow, random, currentTile);
}
catch
{
tryFlip = true;
}
}
else
tryFlip = true;
if(tryFlip)
{
int rand = random.Next(0, filesToShow.Length);
StandardTileData NewTileData = new StandardTileData
{
BackBackgroundImage = new Uri(String.Format("isostore:{0}/{1}", folder, filesToShow[rand]), UriKind.Absolute)
};
currentTile.Update(NewTileData);
}
}
public static void UpdateCycleTile(
Uri smallBackgroundImage, Uri backgroundImage,
string folder, string[] filesToShow, Random random, ShellTile currentTile)
{
// Get the new cycleTileData type.
Type cycleTileDataType = Type.GetType("Microsoft.Phone.Shell.CycleTileData, Microsoft.Phone");
// Get the ShellTile type so we can call the new version of "Update" that takes the new Tile templates.
Type shellTileType = Type.GetType("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");
// Get the constructor for the new FlipTileData class and assign it to our variable to hold the Tile properties.
var UpdateTileData = cycleTileDataType.GetConstructor(new Type[] { }).Invoke(null);
// Set the properties.
SetProperty(UpdateTileData, "SmallBackgroundImage", smallBackgroundImage);
Uri[] mediumImages = new Uri[9];
mediumImages[0] = backgroundImage;
for (int i = 1; i < 9; i++)
{
int rand = random.Next(filesToShow.Length);
mediumImages[i] = new Uri(String.Format("isostore:{0}/{1}", folder, filesToShow[rand]), UriKind.Absolute);
}
SetProperty(UpdateTileData, "CycleImages", mediumImages);
SetProperty(UpdateTileData, "Title", "my cineworld");
// Invoke the new version of ShellTile.Update.
shellTileType.GetMethod("Update").Invoke(currentTile, new Object[] { UpdateTileData });
}
private static void SetProperty(object instance, string name, object value)
{
var setMethod = instance.GetType().GetProperty(name).GetSetMethod();
setMethod.Invoke(instance, new object[] { value });
}
This by no means is fine / perfect code. Please treat it as a PoC and do whatever you do normally
