Search code examples
c#windows-phone-8.1windows-phonetiles

How to set text in the middle of secondary tile WP 8.1


I am trying to create a secondary tile that will display a string in it. I am building the app for windows phone 8.1. I have the following code for the tile but I would like the text in the center of the app:

SecondaryTile("TestTile",
               numDays + " days",
               tileActivationArguments,
               blankPic,
               TileSize.Square150x150);

Is there a way to accomplish this or to build an image from the text to display?

Solution: XAML

<Grid x:Name="TextGrid" Width="150" Height="150" Background="Red">
    <TextBlock x:Name="numDay" FontSize="36" />
</Grid>

C#

NumDay.Text = numDays + " days"
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(TextGrid);

I used this code to create my image and then set it as background picture in SecondaryTile.


Solution

  • Creating custom tile with image is rougly done in these steps:

    1) Render your image. WriteableBitmap class can render UIElement you pass to it:

                WriteableBitmap wb = new WriteableBitmap(300, 300);
    
                wb.Render(myGrid);
    
                wb.Invalidate();
    

    So you need to construct your tile from UI elements like container + controls. In your case it would be for example Grid (with max width) and aligned TextBlocks

    2) Once you have this image, save it as PNG (for better quality) into folder

    "isostore:/Shared/ShellContent/"

    otherwise your tile cannot access it.

    3) Now all you need to do is create StandardTileData and set BackgroundImage to your newly created image.

    You can also download and use IsoStoreSpy while debugging. It can show you your phone's internal storage. So you can see whether and how the image been rendered.