Part 3: Introduction to XAML

Description

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.

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.

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?

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";

@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!

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 opensany help about this issue ?

@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.

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.

@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.

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. :)

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.

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.

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.

@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.

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

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.

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?