Building A Custom Tile In Universal Windows Development

In this example, I have created a custom control in which I took image and a textblock to make a simple Tile.

• Create a Blank Universal Windows Project.
  
  
• Right click on your project, Add, then click New item.
  
  
  
  
• Choose User Control and Add.
  
  
  
  
• After adding User control you will see the following two files (.xaml and xaml.cs),
  
  
  
  
• Colour the background of your control.
  
  
  
  
• Drag and drop the Textblock and Image tag.
  
  
  
  
  
  
• Now choose the .xaml.cs file of your control and Add dependency properties. Dependency properties are those which depend on your controls.
  
  E.g. textblock.text
  
  In this example text property is dependent to textblock.
  
  
• Type "propdp" and press tab buttons two times from your keyboard. Visual Studio will automatically generate property code.
  
  

The following is the Property of image which I will draw in my custom control:

• Set return type to "ImageSource" and rename your property as you like.
  
  
• Change owner class name to name of your User control name and set metadata to Null.
  
  

The following is the Property of Textblock.

• Make changes to this property as in the following image.
  
  
  
  
• Now go to designer of user control and select image and bind source with the dependency property you made for the image.
  
  
  
  
  
  E.g, in this case MyImage is my dependency property of image. Choose it and click OK.
  
  Now the image is bind to myimage property which is user defined in file CustomTile.xaml.cs.
  
  
  
  
• Now go to designer of user control and select Textblock and bind Text with the dependency property you made for the Textblock. (In my case it is TileText).
  
  
  
  
  
  
• Add new folder to your project for storing Images.
  
  
  
  
• Drag and drop images once for all in the images folder.
  
  
  
  
• Drag and draw your user control (in my case it is CustomTile) to MainPage.xaml
  
  
  
  
• After drawing custom control to your main page.
  
  
• Go to Properties, Miscellaneous (your Image property),  and then select your image.
  
  
  
  
• Repeat previous step and go to textblock property TileText and Name your tile.