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.

    New item

  • Choose User Control and Add.

    User control

  • After adding User control you will see the following two files (.xaml and xaml.cs),

    adding User control

  • Colour the background of your control.

    background

  • Drag and drop the Textblock and Image tag.

    Drag and drop the Textblock

    Text block

  • 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.

    PropDP

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.

    Image source

The following is the Property of Textblock.

  • Make changes to this property as in the following image.

    String

  • Now go to designer of user control and select image and bind source with the dependency property you made for the image.

    Design

    bind source

    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.

    binding type

  • 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).

    dependency

    bind Text

  • Add new folder to your project for storing Images.

    Add new folder

  • Drag and drop images once for all in the images folder.

    Drag and drop images

  • Drag and draw your user control (in my case it is CustomTile) to MainPage.xaml

    Drag and draw your user control

  • After drawing custom control to your main page.

  • Go to Properties, Miscellaneous (your Image property),  and then select your image.

    Properties

  • Repeat previous step and go to textblock property TileText and Name your tile.

    TileText