Part 3: Introduction to XAML | Windows Store apps for Absolute Beginners with C# | Channel 9

Windows Store apps for Absolute Beginners with C#

Part 3: Introduction to XAML

Download this episode

Download Video


Now that we have a project, it's time to learn XAML for user interface layout and interaction.  Bob provides a fast but gentle introduction -- as he calls it, the "cheater's guide" -- to learning this declarative language.  He explains what XAML is at a high level and its justification.  He provides hands-on, practical examples of XAML layout controls, attached properties, navigating between the XAML and code-behind files / partial classes and how the XAML and C# is compiled into intermediate language. 


Download the entire series' source code



Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • vijaymca

      I regret to say this.. Channel videos have very poor quality.. I am not able to see exactly what they are showing.. Please maintain some quality in videos..

    • BobTabor

      @vijaymca:  Please DOWNLOAD the video and watch locally.  The videos are high def 1280x720.  Chances are Silverlight streaming is throttling the quality based on your bandwidth.

    • sqlserverma​nagementstu​dio

      I think your browser does not support downloading stuff otherwise you would have downloaded silverlight automatically once you see a dialog asking you to download serverlight in order to view this video - sorry @vijaymca there is nothing to do in maintaining quality of content.

      Enjoy the rest.


    • Dirtbagg

      @vijaymca Downloading the video helps with switching between the video and coding also.

    • Yakko Warner

      I don't have Windows Store templates available (VS 2012 on Win 7).  (Our system administrators install software on our machines; it's *possible* they excluded this from the installation, if it's an option; although I'm not sure they *would* exclude something that specific.)  Is there somewhere I can get them?  Or do I have to be running Windows 8?

    • BobTabor

      @Yakko Warner: Unfortunately, building Windows 8 Store apps *requires* Windows 8.  That may be why you don't see the templates.

    • EatDrinkCode

      TextBlock textBlock2 = new TextBlock();
      After writing the code above, haven't we already specified a name for our text block? I mean, is it necessary to write the code below?
      textBlock2.Name = "textBlock2";

    • BobTabor

      @EatDrinkCode: Yes, in this particular code block you've given it a name.  Referencing it elsewhere may need the name ... I would have to test that.  The bigger point that I'm making here with the XAML / C# comparison is the important one: that XAML is simply a declarative, short-hand way of creating an instance of a class and setting its properties when compared to the imperative approach of C#.  I just wanted this to be a fair 1-to-1 comparison ... nothing more was intended.  Hope that helps!

    • Ali

      Nyc tutorial for beginners . Thanksss

    • David

      Is there a way to download all videos at once?

    • BobTabor

      @David: Not that I'm aware of.  Sorry ... that's great feedback for the Channel9 team ... use the Feedback link in the footer so they can consider making that available in the future.  Thanks!

    • Yousif Hashisho

      When I run the program in this part (3), an error Named (global::System.Diagnostics.Debugger.IsAttached) it's value is "true" and type is "bool" appears.
      and a new page called App.g.i.cs opens
      any help about this issue ?

    • BobTabor

      @Yousif Hashisho: Did you try to open the project I created (sample code) or did you try to build this from scratch yourself?  I'm not sure why this would happen, but if you can give me some additional information, we can figure it out together.

    • V Rambo

      thanks for this video BOB (bob the builder),,,,i have one question that instead of doing this layout by coding in VS, coz it takes more time and coding can we do it using blend? bcoz in blend its easy and fast.

    • BobTabor

      @V Rambo: Have you seen this?

      It's what you're looking for (I think).  It's the CONTOSO COOKBOOK!!!  Smiley  I'm not a Blend guy, but the demo in the videos on that page are pretty compelling.  Good luck!

    • SirGamme

      The download works perfectly for me, great quality as well! Thanks for doing this, BobTabor.

    • SirGamme

      The download works perfectly for me, great quality as well! Thanks for doing this, BobTabor.

    • Marco

      Bob why do you create a textbox from the .cs file ?
      Why didn't use the form ?

    • BobTabor

      @Marco: If you're asking why I created a TextBox from C# instead of XAML ... it was to make a point.  I would highly recommend you re-watch the video ... the point is -- XAML creates instances of objects and populates properties just like C# can do, but is a more succinct syntax.  Both get compiled to IL.  Again, if that's not the message you got out of this video, please re-watch that part.

    • Rutul

      Hi Bob! You teach the topics in very easy and understandable manner and that's why I am able to make a really nice Informative (Grid) App using JavaScript. I also saw a video in which you used a 'Blank App' template. I was thinking how can I make use of it? I mean what are its advantages over a Grid App, actually I was looking to make an app like Cocktail Flow available on Store, which has really AWESOME graphics, ANIMATIONS and UI. Can you suggest anything about it? I find myself dumb about it, don't know where and how to start? I'd recommend to check out the Cocktail Flow app (free) for reference. Also can you suggest how can I add new animations as I find online articles a bit difficult. :)


    • BobTabor

      @Rutul: No, you rock.  Thanks for the nice email.  Smiley

      The Cocktail Flow app is a masterpiece.  Obviously, some very talented developers worked on this.  Picking it apart, however, and it's really just (1) a handful of XAML pages utilizing the Grid, the StackPanel, etc. (2) great graphics, (3) great animations.  Look beyond the glitter and look for the overall structure ... they have the same Grids and StackPanels you have ... you just need to combine them in interesting ways like they did.  Smiley

      I talk about animations a little bit, but that's not something I've spent a lot of time trying to master.  I prefer subtle animations (fade in, slide in, etc.) and some of the Cocktail Flow animations are very ... entertaining.  

      My most recent work in explaining animations can be found here:

      Yes, it's for Windows PHONE 8, however, XAML animations are the same.  But again, I'm sure there are much better resources out there to explain how to create artistic animations.  I would start with MSDN, then perhaps look for a book on the topic.  

      Good luck!

    • Rutul

      :) Forgot to add feedback! Thanks! I'll try to post the experience after completing the app.

    • LeiChat

      Thanks Bob.

      Is the old HTML web app aspiration of not using tables for layout irrelevant in Windows Store apps?

      With the variable snapped windows sizes coming in 8.1 and the anticipation of smaller tablets I'd like to design the UI in as flexible way as possible.

      The proportional grid column widths seem great.
      Can UI elements be specified in a similar way so they scale? 

      (Apologies if this is covered later in the series)


    • BobTabor

      @LeiChat: Well, the Grid control is not exactly the same as an HTML table.  Grids are perfectly acceptable ... actually, they are PREFERRED.  I mean, you only really have the Grid and the StackPanel, so that is both limiting and freeing at the same time.

      Keep in mind that the intent in the Microsoft Design Language (formerly "metro") is for the content to flow off the right side of the screen (you do not scroll down, you swipe right and left).

      I would say that yes, some of these ideas will become more apparent later in the series.  Great questions!  But instead of repeating myself, I think I do talk about layout AND provide good "starting points" in the documentation that should adequately address your concerns.  Also, take a look at some apps like Cocktail Flow, as well as the Contoso Cookbook (the finished product) and see how proportions are handled / managed. 

      Hope that helps!

    • LeiChat

      Awesome. Thanks again.

    • Antonie

      Hey Bob, First my English is not the best.
      I saw when you type a line like for example <Grid.RowDefinitions> you automatically get the end line, </Grid.RowDefinitions>. is this a shortcut or something? and how do you do this

    • antonie

      Sorry, stupid question. already found it out. I first typed the /> mark at the end of the line, and then deleted it. but that wont give me the next line so a stupid mistake:P

    • BobTabor

      @antonie: No worries ... glad you figured it out.  Good luck!

    • srinath

      There's a red line appears below layoutGrid.Children.Add(textblock2). it says "layoutGrid" doesn't exist in current context!

    • Clint

      @srinath: in your MainPage.xaml file, what did you name your first Grid element?  XAML / c# is case sensitive, FYI

    • venu238

      Couldn't launch the app after inserting a textblock.


      Getting this error..

      An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in App1.exe but was not handled in user code
      WinRT information: Failed to create a 'Windows.Foundation.Int32' from the text ' 1'. [Line: 22 Position: 49]
      Additional information: Unspecified error
      If there is a handler for this exception, the program may be safely continued.


      Can you explain my problem?

    • venu238

      Here is the code..


      <Grid x:Name="layoutGrid"   Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
                  <RowDefinition Height=" 140"/>
                  <RowDefinition Height=" Auto"/>
                  <RowDefinition Height=" *" />
                  <ColumnDefinition Width=" *"/>
                  <ColumnDefinition Width=" 2*"/>
                  <ColumnDefinition Width=" 3*"/>
              <TextBlock Text="Hello World"  Grid.Row=" 1" 
                         Grid.Column=" 1" 
                         Name=" textblock1" 
                         Height=" 23" 

    • Clint
      @venu238: StaticResource ApplicationPageBackgroundThemeBrush. Note the space
    • venu238


      sorry that was my fault while posting..actually the space was there.

      Edit: Thanks for the help, issue solved. Problem is with Resolution..worked after changing "Grid.Row Height to 120" Smiley

    • Clint

      @venu238: I think there was actually something else going on with your code cause that error.  I will admit I just saw xaml parse error and noticed the space without reading the rest.

      Something couldn't be case into an integer in the XAML, I would have to actually see the entire XAML file, preferred the real file Smiley

    • rahaamirche​rmahini

      Hello there 

      and really thanks for this tut

      but I use visual studio Ultimate 2012 and when I write for exaple  <textBlock text="Hello World" /> 

      and run the app it gives me erro and couldnt run the app 

      please help me why and how can continiu this usefull tut 

      should I have to try this app on visual studio express ?

      thanks again 

    • Clint
      @rahaamirchermahini: xaml is case sensitive. You want to write TextBlock and Text instead of textBlock and text. Note how both have upper case T for the first letter
    • ahmedoumezz​ine

      thanks again 


    • Irene Smith

      It would have been helpful if you had mentioned where the OnNavigatedTo event came from. It wasn't until I noticed that you were overriding a method from the parent that I figured out how to add it to my page.

      I noticed that your MainPage.xaml.cs file seemed to have the event override when you opened the file. Is this a difference between Windows 8 and Windows 8.1 or had you added the event handler before opening the file in the video?

    • filfat

      I love your series, @Bob keep the great work up Big Smile btw C# feels a bit like a drunk version of C++ XD

    • Rincewind

      Another great Tutorial! Thank you very much Channel9 & Bob Tabor!

      I think @Irene Smith asked a good question. Is this one of the differences between Win 8 and 8.1?






    • Clint

      @Irene Smith: OnNavigateTo is a virtual method.  For the ABS series, we tend to have to tread a fine line between too technical and not skipping things.

    • Clint

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.