Tutorials

Tutorials about HTML, CSS, PHP, Javascript, and Photoshop

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Archives
    Archives Contains a list of blog posts that were created previously.
  • Login

Windows Phone 8 An Introduction to XAML

by in Photoshop
  • Font size: Larger Smaller
  • Hits: 2979
  • 0 Comments
  • Subscribe to this entry
  • Print
2979

Developing software is usually a two step process that involves developing the user interface and the business logic of the application.  Windows Phone is no exception to this paradigm. When developing for Windows Phone,  XAMLIs used for the implementation of the user interface of Windows Phone applications

1. What is XAML?

XAMLOrExtensible Application Markup Language is a declarative language developed by Microsoft and used in Windows Phone to create graphical user interface objects. If you're familiar withXMLThen a code snippet of XAML will look very familiar.  XAML is to aC#Developer whatHTMLIs to a web developer. It is the basis of user interface design for Windows Phone

Such as Buttons, Text Blocks, etc, The Windows Phone platform has a lot of building blocks at its disposal, Text Boxes. It is impractical and cumbersome, Even though it's possible to develop a Windows Phone 8 application using only C#

XAML makes creating user interfaces much easier. You are presented with two views, After creating a new Windows Phone 8 project or page in Visual Studio. One view displays the XAML code while the other view shows the developer its visual design representation

Let's revisit the project we created in the, To better understand thisprevious tutorialIn which we created our first Windows Phone 8 application

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid. RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid. RowDefinitions>

        <. --TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <. --ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        </Grid>
    </Grid>

You immediately notice the same hierarchical structure you find in XML and HTML. Which we will be discussing later on in this series, Each element in the XAML code represents a Windows Phone control. You'll notice that each element has an opening and closing tag, just like in XML or HTML. Taking the following structure:, You can also see that some elements have additional attributes

<ElementName Property1="Value" Property2="Value". >
  <ChildElementName Property="Value">
  </ChildElementName>
</ElementName>

I will refer to each element in the XAML file as a control as they represent Windows Phone controls, which are objects that are a part of the framework. Each of these controls can have properties attached to them. Such as the , Some of these controlsGrid and StackPanel controls, can even contain other controls within them. For example, look how the StackPanel control with the Name property of TitlePanel contains two TextBlock controls

This hierarchical arrangement of elements enables developers to design the user interface of Windows Phone applications with much more ease and also provides structure between controls that make up the user interface of a Windows Phone application

2. XAML versus Code

It is possible to create the entire user interface of a Windows Phone application in C#, without using XAML, As I said earlier in this article. However, this is not very practical, In reality. This isn't recommended, because it makes designing the application's user interface untidy and a bit all over the place

Strictly using C# to create the application's user interface will significantly limit the possibility of using the , In additionMVVMDesign pattern that is baked into Windows Phone development. This means advanced techniques, such asData bindingWill be more difficult to implement

Let's take a close look at the two techniques, to building an application's user interface, XAML and C#. For this comparison, I'll first show how aTextBlockAnd a ButtonControl are declared within aStackPanel control using XAML. I will then show you the equivalent in C#

XAML

<StackPanel>
    <TextBlock Margin="20">A Simple TextBlock</TextBlock>
    <Button Margin="10" HorizontalAlignment="Right" Content="Simple Button">
    </Button>
</StackPanel>

You can see how declarative the above XAML snippet is. It's easy to understand the hierarchy of the controls. There's another benefit when using XAML. We can directly see the result of our changes in Visual Studio through the design preview pane, which is usually positioned on the left in Visual Studio

C#

Let's see how we can implement the same user interface using C# instead of XAML

//Create Our StackPanel
StackPanel stackPanel = new StackPanel();
this. Content = stackPanel;

//Create Our TextBlock
TextBlock textBlock = new TextBlock();
textBlock. Margin = new Thickness(10);
textBlock. Text = "A Simple TextBlock";
stackPanel. Children. Add(textBlock);

//Create Our Button
Button button = new Button();
button. Margin= new Thickness(20);
button. Content = "Simple Button";
stackPanel. Children. Add(button);

As you can see, it's a bit clunkier in comparison to XAML and we're unable to see the result of our changes on the fly. You may also have noticed that the code block in C# is almost double the lines of code and it isn't as readable as the XAML snippet we saw earlier

For Windows Phone development, XAML is the recommended way to create user interfaces. For example, when the control needs to be dynamic to some extent, there may be times that we need to implement more complicated controls that are difficult to create using XAML, However. Even though these situations are less common, it's good to know that we can fall back on C#

Conclusion

XAML is an integral part of Windows Phone development and a firm understanding is therefore essential. I encourage you to take a look at theofficial XAML documentationFrom Microsoft on the Windows Phone Dev Center. It contains in-depth information about the use of XAML for Windows Phone development

We've taken a look at the role of XAML in Windows Phone development and how it compares to C# to create user interfaces, In this tutorial. And how to implement them in a Windows Phone 8 application, we'll continue to work with XAML and come to grips with some of the more common Windows Phone controls, their use,  In the next tutorial

Read more: Windows Phone 8 An Introduction to XAML

Webdesign from 3D WebDesign.
0
Trackback URL for this blog entry.

Comments

  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest Saturday, 21 October 2017

Testimonial

Thank you so much! We are very happy with our new website. It is easy to use and all of our customers tell us, they love it.

Contact Us

  • 13245 Atlantic Blvd. #4352
    Jacksonville, FL 32225
  • 904-240-5823