Until the windows phone app development begins(2)

Today, we are going to talk about some more stuff about app designing stuff like Styling. Just like CSS in web designing, styling is the concept of using single style on multiple objects or tool. With use of style, a code redundancy will decrease and there will be less line of codes as well.

First of all build an application and put stack panel in it. (Stack panel reading) for those who don’t know what stack panel is. you can add stack panel by dropping it from toolbox or by using following code snippet. and add three buttons.

<Button Background="red">Button1</Button></pre>
<pre><Button Background="red">Button2</Button></pre>
<pre><Button Background="red">Button3</Button></pre>

Now, what if i told you to add 300 more buttons and makes its color Red, you will do the same. If i ask you to change 300 buttons background into blue now, you will go through all the buttons and change its background property to blue, which is annoying and time consuming. So, we put styles and apply it to every button.

This is how you can put Styles in XAML

<Style x:Name="style1" TargetType="Button" >
<Setter property="Background" value='red'>

Now that we have created our style, its time to apply it on the button

use the same code as above of stackpanel and buttons and do this in button property

<Button Style="{staticresources Mystyle1}>Button1</Button></pre>
<pre><Button Style="{staticresources Mystyle1} >Button2</Button></pre>
<pre><Button Style="{staticresources Mystyle1}>Button3</Button></pre>

Now, what if you want to use same style into different pages so what you will do, you will open the APP.XAML file and place the whole code of styling into it. App.xaml gives reliability to handle your global resources at one place so that you can access it from any part of the application.


So, this is how you can create styles which will be helpful when it come to apply on multiple controls a same style. So, be safe from the code redundancy and save others as well by sharing them this post. Thanks.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s