Improve the UI of Your App using Custom Templates



Hi again.

I hope, all of you got help from my first blog & liked it. Now I’m going to take it to a little higher level. In the coming blogs, I’m going to discuss more about designing i.e. giving your app an authentic look so that it attracts more & more users. Here I’m going to show you how to do it in simple ways.

To do so, we will use Blend for Visual Studio 2013. This is another useful developing software which helps developers to give some flares to the apps. It is mainly used for improving the UI (User Interface) & animating the UI elements. No more talks, let’s get into the show.

 

 

We’ll do it with our previously created project MyFirstApp. Open the Visual Studio 2013. If it is listed in the Recent list of the Start Page, just click over it. If not, then click “Open Project…”. Navigate to Documents->Visual Studio 2013->Projects->MyFirstApp->MyFirstApp.sln.

 

Now click on the MainPage.xaml tab. If this page is not open already, then you can open it by double-clicking over it from the Solution Explorer. Now select all the 3 controls by clicking & holding left button of mouse on the upper left side of the controls & dragging it to the lower right side.

 

Now right click over the selected area. Click “Group Into->Grid”. It’ll encapsulate all those controls in another Grid.

 

Change HorizontalAlignment & VerticalAlignment properties in the Layout header of the currently selected Grid to Center & Margin to Reset by clicking the small black square.

 

Now let’s start tweaking with the button. For that, right click on the project name from the Solution Explorer & click “Open in Blend…”.

 

This is Blend. Now click the clickButton. Right click over it & select “Edit Template->Create Empty…”. Templates are nothing but your own code snippets to save your time from rewriting the same codes again & again. They can be used as the base for any kind of function/behaviour you want to implement.

 

As you do this, a “Create ControlTemplate Resource” window will open. Just specify the “Name (Key)” by which this template will be identified. Click OK. Here you’ll observe the change in the Objects & Timeline window.

 

You’ll observe that the button will disappear. Why? Because here you’ll be creating your own button template. So the default template is removed & a blank space is created for you to do your work. Now type Rec in the Search Assets textbox under the Assets tab (upper left corner). It’ll show the Rectangle control. Click & draw it inside the selected grid.

 

Change the following properties of the drawn Rectangle:
1. Set Fill (any colour you want like I’ve taken Cobalt colour)

2. Set Stroke (any colour you want like I’ve taken White colour)

3. Set RadiusX – 30

4. Set RadiusY – 30

5. Set StrokeThickness – 3

6. Set Margin – Reset

 

Now you’ll see that the rectangle doesn’t fill the whole grid. To do that, click on the white square of Width & click “Template Binding->Width”. You’ll see that the square turns yellow. Yellow colour means, that property of the currently selected UI element has binding. Now what is binding? Binding means any change in the property of one UI element will be reflected in the property of the other UI element associated with it. Here the Width of the Rectangle is associated with the Width of the Button.

 

Similarly, do the same for the Height property of Rectangle. Now you’ll see that the rectangle fills the whole grid.

 

 

Again type TextBlock in the Search Assets textbox. Click & draw it inside the Rectangle. Change the following properties of the TextBlock:
1. Set Width & Height to Auto by clicking the small cross type symbol beside the white square.

2. Set HorizontalAlignment & VerticalAlignment to Center

3. Set Margin – Reset

 

 

Now for the Text property of TextBlock, set it to the Template Binding->Content. Here the Text property of the TextBlock is bonded to the Content property of the Button.

 

Now the button’s design part is done but not the behaviour part. If you Press F5, you’ll see the button as it is designed. But it’ll look like just an image rather than button. So to make it more like button we’ll have to do a little hard work. Click the States tab which is just beside the Assets tab.

 

The things which you’re seeing inside the States tab are known as the Visual States. Visual States are the states/conditions when you’re interacting with a UI element in the runtime. For example, if you draw a button, run the app & observe its behaviour. In the normal state, it’ll be as usual. When you hover your mouse over the button, you’ll find the button is highlighted with a light colour. When you press it, the colour combination alters like white border becomes black, the background becomes white & the text becomes black. A similar effect will be implemented here. Click the PointerOver state in the States tab. You’ll see that MainPage.xaml tab is outlined with red border & a small red dot is shown saying the recording is on. Here, whatever change you make in the properties of an UI element, will be recorded for future use. The recorded change will be indicated with a small red dot beside the UI element in the Objects & Timeline. So, click the Rectangle. Copy the hex code for the Fill colour as you’ll need it later. Change the Fill property to a little light colour.

 

Click the Pressed state. Change the Fill colour to white & the Stroke colour with the copied hex code.

 

Click the TextBlock & change the Foreground colour with the copied hex code.

 

Now click the red dot just below MainPage.xaml tab which will say the recording is off.

 

Press Shift + Ctrl + S to save all the changes & press F5 & feel the difference.

 

 

Now close the app. Let me show you one interesting thing. Click the Code view in the Blend.

 

You will observe so many codes inside the <Page.Resources> tag. Here you’ll see the ControlTemplate name “MyButtonTemplate” which targeted the Button type UI element. All the changes you made, recorded the visual states, etc. will be shown here. Now imagine, without Blend you would have to write so many codes & without knowing these codes, it would have been impossible to do so. But with Blend, you did it with just few clicks!!!

 

Now draw another button. Right click over it & select “Edit Template->Apply Resource->MyButtonTemplate”. You will find the new button is also converted to the new look thereby saving your time to rewrite the codes for each & every button you create.

 

Congratulations, you created a new button design. That’s the end of this blog. I hope of all you liked it. Keep Coding & keep exploring.