Animate Your App

Hello once again.
Welcome to my third blog. This time I've arranged a video blog for you to learn creating animation in your app. Hope you'll enjoy it.

Thanks for your cooperation. Keep visiting, Keep coding!!!

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.



First Windows Store App for Beginners

Hi.

If you are passionate about technology & working under the great worldwide hood Microsoft, then you are at the right place to start with.

In this blog, you are going to get introduced to the Windows App Development. There are two types of App Development - one is Windows Store App Development & another is Windows Phone Store App Development. In this blog, Windows Store App Development will be our main concern.

Now first question will arise to your mind, what are the pre-requisites for developing & deploying store apps? You will need:

1. Windows 8 or Windows 8.1 operating system

2. Visual Studio 2012 or Visual Studio 2013

3. Microsoft Account

4. Windows Developer Account

Windows 8 users should use Visual Studio 2012 & Windows 8.1 users should use Visual Studio 2013. The vice-versa will not be working. But try to prefer Windows 8.1 operating system along with Visual Studio 2013. Now about the programming language required here. If you are accustomed with basic programming languages like C or C++ or Java or Visual Basic or HTML, JavaScript & CSS, etc., then it will be more helpful for you but even if you don't, there's nothing to worry. Visual Studio has been designed in such a way that anyone can start developing apps in a matter of time, even without basic knowledge. Here, we will work with Visual C#. There's nothing to be afraid about it. It's very simple, much similar to Java & C++.

Now let’s get to work.

At first, install the Visual Studio 2013 Professional Update 3 & run it. It will ask you for registering this product. Click the “Get Key Online”. Login to your Microsoft account & you will get your key. If you don’t have one, then sign up for new account. Paste the key & click OK. Now go to File->New->Project.

 

Now select Visual C# template from the left pane & select Windows Apps. Then click Blank App (Windows) & give name to the project in the Name field like MyFirstApp & click OK. It will ask you for the Developer’s License & click I Agree. Make sure you are connected to internet. Then login to your Microsoft account. Once you login, you will get your Developer’s License for some period (may be 30 days or more). When the Developer’s License expires, make sure you renew it.

Then you will see something like this:

 

The window you are seeing here contain many things. To understand it, first close the tab App.xaml.cs. Then double-click MainPage.xaml file in the right pane named as Solution Explorer.



 

You might be thinking what is going on here? Let me explain it to you slowly & clearly. The upper right pane Solution Explorer is the window which shows all your components contained in your solution. Now what is solution? Solution is a module which encapsulates your app at one place. Here, “Solution ‘MyFirstApp’ (1 project)” is your solution with file extension “.sln”. “MyFirstApp (Windows 8.1)” is your project. Your project contains all the files that your app requires to execute. Solution is the top most & biggest module. A solution can contain multiple projects but not vice versa. Now coming to the MainPage.xaml, it is the page where your app design goes. XAML is the file extension of the design page. It stands for Extensively Advanced Markup Language. It is similar to XML, only more advanced. MainPage.xaml contains all your controls used to design the app. MainPage.xaml.cs is the page where you write your C# codes. The left pane is the Toolbox where all the controls are present. Just drag the controls from there to Design view of MainPage.xaml & drop. The middle upper pane shows the Design view of the MainPage.xaml & the lower pane shows the XAML code view of MainPage.xaml. You can design the MainPage from either or both views. The bottom right pane is the Properties Windows where you can view & edit the properties of each control used in your MainPage. The changes made in this window will also reflect in the XAML code view of that control. There’s another window Document Outline on the very left side of Toolbox which is minimized by default that you will need frequently for use. Click it & then click the Pin symbol beside the close symbol. You will see it will be docked in the bottom left pane. This window shows the controls used in the Page. That’s enough for you right now.

Now let’s head towards the coding part. You must have noticed that there are already some codes written in the code view of MainPage.xaml. These are the namespaces included by the Visual Studio itself to ease your work. These are similar to header files or packages or anything like that. You can see the same thing in the MainPage.xaml.cs by double-clicking it from the Solution Explorer. You don’t need to take stress on these matter at this moment. Find TextBlock control from the Toolbox & drag n drop it in the design view of MainPage.xaml. Right after this, you will see that a rectangular box has been added to your page written TextBlock. TextBlock is a control that helps you to display some text. It can’t take any input at the runtime. It is used only for display purpose. You will also observe that a code inside the Grid tag has been added to your code view of MainPage.xaml. Grid is another control which organises your design view. Whatever control you insert in the page, it will insert inside the Grid tag as it is the main control where all your work will go. You’ll be able to see it in the Document Outline window. Now see the Properties window. Change the Text property in the Common header to “Enter Your Name”.

Now go to Text Header & set the text size to 36 px.

Now go to the Toolbox & again drag n drop TextBox control just below the TextBlock.

Now go to the Properties window again & type textBox1 in the Name field. This represents that you’re naming the control. In the Text property inside the Common header, click the small square box & select Reset.

Change the text size to 24 px. Now add a Button control & name it clickButton. Set the Content property to “Click” inside the Common header.

Now click the Thunder symbol in the Properties window of the clickButton control. This symbol signifies the event handlers. Event handlers are those events which are fired when accomplishing any specific activity. For example, here you want that whenever click the Click button, the app will show you a greeting message. This Click event of clickButton is an event handler which is fired when the button is clicked. So after clicking the Thunder symbol, double click in the blank field next to Click event.

Now it will open the MainPage.xaml.cs file. Here you will see that a method named clickButton_Click has been automatically created. It has private access specifier, void return type & some parameters are passed as argument. You don’t need to bother about those things right now.

Now, inside the method, type MessageDialog. MessageDialog is special class which helps to show a message. You will see, it is underlined in red colour along with a small blue coloured rectangle. What is happening here??

 MessageDialog is class which belongs to some other namespace that is not included in your current working file. So, how to include that namespace? Just put your cursor (not the mouse pointer) in the middle of MessageDialog & press “ Ctrl + . ”. It will show you two option to add the namespace. Just click Enter & you will observe that MessageDialog turns into Sky Blue colour.

 

 

Now type in the following code:

MessageDialog msg = new MessageDialog("Hello " + textBox1.Text);

await msg.ShowAsync();

And add “async” just after private access specifier.

Now click the double floppy button i.e. Save All button just below the Project Menu. Click the Green Play Button.

 

 

Congratulations!! You have successfully created your first Windows Store App.
Keep practicing more & become master of developing apps.
Till then enjoy coding. Stay Tuned for more!!