custom live tile update issue - xaml

Question

I'm working on a weather application for windows phone. One of the features that I want to take advantage of is live tiles. I have a background agent that runs when the user pins a city to the start page.
After it's been pinned, it makes a calls out to the internet to get some weather data. All of this works just fine.
Now for the problem.
Depending on the weather data that's returned, I want to update the tiles that are pinned to the start screen.
I have a number of different .xaml files (rain, snow, sun, etc) that represent each tile.
My first thought was that I would:
expose 2 properties on each tile (CityState and Temp)
set those 2 properties after the tile is created.
save the tile off into IsolatedStorage as an image that I can then use to update the tile on the start screen.
Here is the code that I have to do that:
var ctl = new Snow();
//just some dummy data to test
ctl.CityState = "Test, NY";
ctl.Temp = 25;
ctl.Measure(new Size(173, 173));
ctl.Arrange(new Rect(0, 0, 173, 173));
var bmp = new WriteableBitmap(173, 173);
bmp.Render(ctl, null);
bmp.Invalidate();
var iss =IsolatedStorageFile.GetUserStoreForApplication();
var filename = "/Shared/ShellContent/tileTest.jpg";
using (var stm = iss.CreateFile(filename))
{
bmp.SaveJpeg(stm, 173, 173, 0, 80);
}
tile.BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute);
var tileToUpdate = ShellTile.ActiveTiles.FirstOrDefault(r => r.NavigationUri == uri);
tileToUpdate.Update(tile);
So, when this runs, it creates a new tile from the XAML file and updates the start screen but the Temp and CityState properties
are not reflected on the new Tile. In the xaml I have 2 textblocks that are bound to the properties in the codebehind. I've also
implemented INotifyPropertyChanged.
Here is the XAML
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="Window"
x:Class="ezweather.services.tiles.Snow"
d:DesignWidth="480" d:DesignHeight="800" Width="173" Height="173" >
<Canvas x:Name="Layer_1" Width="173" Height="173" Canvas.Left="0" Canvas.Top="0" >
<Rectangle x:Name="Rectangle" Width="173" Height="173" Canvas.Left="0" Canvas.Top="-1.52588e-005" Stretch="Fill" Fill="#FF3F6A8D"/>
<TextBlock x:Name="cityState" TextAlignment="Left" FontFamily="Segoe UI Semibold" FontWeight="Bold" FontSize="15" Width="Auto" Height="Auto" Canvas.Left="0" Canvas.Top="0">
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,11,139.5"/>
</TransformGroup>
</TextBlock.RenderTransform>
<Run Text="{Binding ElementName=Window, Path=CityState}" Foreground="#FFFFFFFF"/>
</TextBlock>
<TextBlock x:Name="temp" TextAlignment="Right" FontFamily="Segoe UI Light" FontSize="44" Width="Auto" Height="Auto" Canvas.Left="0" Canvas.Top="0">
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,87.57,42.9333"/>
</TransformGroup>
</TextBlock.RenderTransform>
<Run Text="{Binding ElementName=Window, Path=Temp}" Foreground="#FFFFFFFF"/>
</TextBlock>
</Canvas>
</UserControl>
and here is the codebehind
public partial class Snow : UserControl, INotifyPropertyChanged
{
public Snow()
{
// Required to initialize variables
InitializeComponent();
}
private string _cityState;
private int _temp;
public string CityState
{
get { return _cityState; }
set
{
_cityState = value;
RaisePropertyChanged("CityState");
}
}
public int Temp
{
get { return _temp; }
set
{
_temp = value;
RaisePropertyChanged("Temp");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string property)
{
if(PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
When this code runs, it instantiates the correct xaml file and saves it to disk.
It then updates the tile on the start screen but the CityState and Temp data does not show up.
I don't know why the CityState and Temp data isn't being written out with the image.
What am I missing?

Answer 1

The primary issue I see here, is you're attempting to render the image, before the control is actually loaded.
Try handle the rendering in the Control.Loaded event.