XAML Deep Dive for Windows & Windows Phone Apps Jump Start

1. Jaime Rodriguez | Microsoft Principal Technical Evangelist Laurent Bugnion | IdentityMine Senior Director XAML Deep Dive for Windows & Windows Phone Apps Jump Start

2. Jaime Rodriguez | ‏@jaimerodriguez Principal Technical Evangelist • More than 15 years experience building Apps • Focused on Microsoft partners and customers with emerging technologies • Helping developers with web, iOS and Android backgrounds to bring their existing apps to the Windows Store. • .NET, Silverlight, Windows Phone leveraging both C#/XAML and HTML/CSS

3. Laurent Bugnion | ‏@Lbugnion Senior Director • Seventh year as a Microsoft Most Valuable Professional (MVP) and his first year as a Microsoft Regional Director • Most prominent experts worldwide for XAML, Expression Blend and the MVVM pattern • Based in Zurich Switzerland

4. Course Topics

5. Setting Expectations • New and seasoned developers • Developers with web, iOS and Android backgrounds • Bringing existing non Windows apps to the Windows Store

6. Join the MVA Community! • Microsoft Virtual Academy • Free online learning tailored for IT Pros and Developers • Over 1.2M registered users • Up-to-date, relevant training on variety of Microsoft products • “Earn while you learn!” • Get 50 MVA Points for this event! • Visit http://aka.ms/MVA-Voucher • Enter this code: XAMLJS (expires 8/12/2013)

7. Module 1 – intro to XAML

8. demos Apps built using XAML..

9. XAML Basics

10. eXtensibleApplication MarkupLanguage Serialization and Initialization format <Activityx:TypeArguments="x:Int32" x:Class="Add" xmlns="http://schemas.microsoft.com/netfx/2009/xaml/activities" > <x:Members> <x:PropertyName="Operand1" Type="InArgument(x:Int32)" /> < x:PropertyName="Operand2" Type="InArgument(x:Int32)" /> </x:Members> <Sequence><Assignx:TypeArguments="x:Int32" Value="[Operand1 + Operand2]"> <Assign.To> <OutArgumentx:TypeArguments="x:Int32"> <ArgumentReferencex:TypeArguments="x:Int32" ArgumentName="Result"/> </OutArgument> </Assign.To> </Assign> </Sequence> </Activity>

11. XAML - User Interface <Page x:Class="App12.MainPage"…> <Grid> <Grid.Resources> <Style x:Key="PinkButton"TargetType="Button"> <Setter Property="Background" Value="Pink" /> </Style> </Grid.Resources> <Button x:Name="myButton" Style="{StaticResourcePinkButton}" Content="{Bindingdata.buttonName}" Click="OnButtonClick" Width="300" Margin="250" VerticalAlignment="Stretch"> </Button> </Grid> </Page> Declarative Toolable Recommended

12. Declarative Button b = newButton(); b.Width= 100; b.Height= 50; b.Content= "Click Me!"; b.Background= newSolidColorBrush( Colors.Green); <Button Content="Click Me!" Width="100" Height="50" Background="Green“ />

13. XAML is XML Elements represent objects Attributes represent properties or events Property Element Syntax Content Property syntax* <Button Content="Click Me!" Width="100" Height="50"> <Button.Background> <SolidColorBrush Color="Green"/> </Button.Background> </Button> <Button Width="100" Height="50" Background="Green"> Click Me! </Button> *class must have a ContentPropertyAttribute

14. Collections IList, IDictionary, and Arrays <LinearGradientBrush> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop Offset="0.0" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> //powered by publicGradientStopCollectionGradientStops { get; set; } publicsealedclassGradientStopCollection : IList<GradientStop>, IEnumerable<GradientStop>

15. Collections + contentproperty <StackPanel> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> </StackPanel> //Powered by [ContentProperty(Name = "Children")] publicclassPanel{ publicUIElementCollection Children { get; } }

16. TypeConverters <Grid Background="Red" Margin="200,100" > <Border Padding="50" Background="Yellow" Margin="225,184,393,50" Visibility="Visible"> <Image Margin="11,42,14,50" Source="img8.jpg" Stretch="UniformToFill"/> </Border> </Grid> Color Thickness Enumerators Uri Point

17. Markup Extensions

18. XAML Namespaces Maps from CLR namespaces to XAML <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:UI="using:Microsoft.Advertising.WinRT.UI" x:Class="App1.NamespacesPage" mc:Ignorable="d">

19. For the alpha geeks.. • XAML Syntax In detail • http://msdn.microsoft.com/en-us/library/ms788723.aspx • XAML specification • http://www.microsoft.com/en-us/download/details.aspx?id=19600

20. Visual Studio Tour Editor, Properties Window, Toolbox, Simulator, x:Name, Events, Document Outline

21. Other XAML tools- later in the day Blend XAML SPY

22. UI frameworks in the “XAML” umbrella WPF Silverlight For desktop Windows Phone Windows Store (aka Jupiter)