Understanding XAML: Windows Phone Apps Development Turorial – Part 15

Up till now, in this tutorial series, we were working in C# windows. In our last post we talked of Collection of Objects. From this tutorial on, we will spend more and more time in XAML window rather than C# window. Till now we have just seen XAML windows but haven’t actually interacted with apart from dragging and dropping controls to visual editor. Now we will start using XAML editor more aggressively as we build our application.

As we have seen earlier, when we open any project in Silverlight; there are two panes facing us. One pane is visual editor and another one having XAML coding on it. Let’s get started then by understanding its working. XAML is a programming language just like C# is another programming language. XAML is mainly used for designing the user interface.

When we drag any control on visual editor, you might’ve observed that when we do so, some code is added to the XAML window automatically. Similarly, when we make changes in any properties of controls that too changes the XAML code. This is done automatically by Visual Studio for our convenience and thus we get a very easy and simple to use “Drag-and-drop” interface.

Now look at the top of the XAML windows, you will see few lines starting with “xmlns”, what are these lines? These lines are namespaces. I hope you remember what namespaces are! These lines denote namespaces and assembly where those files are stored.

XMLNS_Ex

There are several layout controls, which help users to lay their controls as per their wish on-screen. Some of them are stack panel, grid and so on.

Let us create a button using XAML code. Create a new project with some meaningful name. Search for following code:


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

 

</Grid>

And in between those grid tags paste following code:

<Button Name="myButton" Height="100" Width="150" Content="Click me" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Once you paste this code, notice that a new button will be created on the designer surface. Congratulations, you have just created a button using nothing more than pure coding.

There is a lot to learn in XAML window, but keep studying it until we are back with next tutorial. In next, tutorial, we will learn about all the Silverlight layout controls.

Posted by on , in Category Phone with Tags
Gadget freak, Apple lover, Windows Phone lover; well that’s me! I have been in this wonderful field of freelance writing for quite some time and looking forward to developing more illuminating content related to gadgets and technology, as I go along.