litesys.blogg.se - Custom live tiles

#Custom live tiles how to#
#Custom live tiles update#
#Custom live tiles code#
#Custom live tiles windows 8#

These lines of code allow us to access certain functions in Visualīasic that we otherwise couldn't access from within our page. Paste the following code at the very top of. Put this code in your page.īefore creating the methods that will encode our image and store it as a file, you need to include some namespaces in your page. PNG format, and the other saves this as a file. PNG format), and then stored in a file.įor this step we'll use two methods one converts the pixels that make up our user controls into a stream of data in. That stream of data is encoded (in this case in. Now that you have your user controls created and displayed on a page you can render them as bitmap images and save them in your app's storage folder.īitmapRender creates a 'stream' of data from the pixels that make up your user control. Step 2: Render the User Controls to Bitmaps and Save If you have all that you're ready to continue to Step 2. A MainPage.xaml which includes the two controls.A user control called MediumTileTemplate.xaml.A user control called WideTileTemplate.xaml.Now you should have a new project with the following in the root folder: This will add two controls to the page, and the designer will now look something like this: For wide tiles use 691 x 336 pixels, for medium/square tiles it's 336x336. NOTE: We need to make the control the correct size/proportion so it looks correct. Remember to rename it or change the code so that the correct filename is referenced or your image won't show. Right-click on your project name and choose: Add > Existing Item, thenīrowse to the. You can use any image you have on your computer or from the Internet. NOTE: To use the code below you'll need to add an image to your project's root folder called 'image.png'. You can copy and paste the code below or design your own. You databind the tile to you app in a way that displays a player's progress or some important app content dynamically.ġ) Right-click the project name in the Solution Explorer and select Add > New Itemģ) Type a name (use WideTileTemplate.xaml and MediumTileTemplate.xaml)Īdd content to your user controls exactly how you want it to appear on the live tiles. We will create 2 UI elements in this case (we'll be making a wide tile and a medium/square tile). For this tutorial we will 'hard code' some content into our tiles, though the real power comes when There is no limit to what you can render to your live tile. This technique does not work for Windows 8.0 apps unfortunately.Ĭreate a new project in Visual Studio 2013 ( Visual Basic > Windows Store > Blank App (XAML) ). You need any version of Visual Studio 2013 for Windows (including Visual Studio Express) running on Windows 8.1.

#Custom live tiles update#

Update your app's live tile using the image you rendered in Step 2.

Create a user control with your tile layout.

The Main StepsĬreating custom live tiles requires 3 steps: There's a downloadable project with all the code in at the bottom of this post, but read through the tutorial if you want to see every step explained. Any of the UI elements in the above image can be changed to reflect the state of your app. While that's perhaps not the most attractive tile you'll ever see, it's great because it's made up of a totally customisable user control rendered as an image.

#Custom live tiles windows 8#

Instead of the standard Windows 8 tile layouts you can have something as amazing as this:

#Custom live tiles how to#

This tutorial explains how to build your own live tiles with user controls, which you save as bitmaps, and then add to your live tile. The standard tile templates can limit your options in applying style to suit your app or game. Windows Store apps can show dynamic information to users via live tiles.