Creating the To-Do Item Shell Tile
To create a shell tile, you must pass a StandardTileData
instance to the static ShellTile.Create
method. Because this is performed in several places in the sample, the code for creating the StandardTileData
has been placed into a class called TodoTileDataCreator
(see Listing 6).
This class uses the to-do item’s due date to determine the numeric icon
shown on the tile. If it exceeds 99 days, it is not shown. The tile has
a foreground and a background image, and shows the description and due
date of the to-do item.
LISTING 6. TodoTileDataCreator
Class
public static class TodoTileDataCreator
{
public static StandardTileData CreateTile(
string todoItemDescription, DateTime dueDate)
{
/* The Count property of the tile data is set
* to the number of days remaining.
* It must be between 0 and 99 inclusively. */
int daysUntilDue = 0;
bool overdue = DateTime.Now > dueDate;
if (!overdue)
{
int temp = (int)(DateTime.Now - dueDate).TotalDays;
if (temp < 100)
{
daysUntilDue = temp;
}
}
const string tilesDirectory = "/TodoList/Images/Tiles/";
string backgroundUrl = overdue
? tilesDirectory + "Overdue.jpg"
: tilesDirectory + "Ok.jpg";
StandardTileData tileData = new StandardTileData
{
Title = todoItemDescription,
BackgroundImage = new Uri(backgroundUrl, UriKind.Relative),
Count = overdue ? 0 : daysUntilDue,
BackTitle = dueDate.ToShortDateString(),
BackContent = todoItemDescription,
BackBackgroundImage = new Uri(
tilesDirectory + "Background.jpg", UriKind.Relative)
};
return tileData;
}
}
Saving a To-Do Item
Saving an item involves instantiating a new item and sending it to the ITodoService
to be stored in the database (see Listing 7).
If a shell tile is created for the to-do item, the NavigationUri
of the tile is set to the TodoItemView
page, and the Id
of the TodoItem
is placed in the query string of the URI, so that by tapping the tile, the user is brought back to the TodoItemView
page, which allows editing or deletion of the to-do item.
Note
Calling ShellTile.Create
immediately deactivates your app.
The final task of the SaveItem
method is to navigate the user back to the TodoItemList
page.
LISTING 7. TodoItemViewModel SaveItem
Method
void SaveItem(bool createTile)
{
if (string.IsNullOrWhiteSpace(todoDescription))
{
MessageService.ShowError("Please enter a description.",
"Required Field Missing");
return;
}
if (todoItem == null)
{
todoItem = new TodoItem();
}
todoItem.Description = todoDescription;
todoItem.DueDate = todoDueDate;
todoService.AddOrUpdateItem(todoItem);
StandardTileData tileData = TodoTileDataCreator.CreateTile(
todoItem.Description, todoItem.DueDate);
string url = string.Format("/TodoList/TodoItemView.xaml?{0}={1}",
TaskScheduler.TodoItemIdQueryKey,
todoItem.Id);
if (createTile)
{
/* Creating a shell tile takes the user to the start experience. */
ShellTile.Create(new Uri(url, UriKind.Relative), tileData);
}
else
{
ShellTile shellTile = ShellTile.ActiveTiles.Where(
tile => tile.NavigationUri.ToString()
.Contains(url)).FirstOrDefault();
if (shellTile != null)
{
shellTile.Update(tileData);
}
Navigate(todoListUrl);
}
}