xaml deep dive for windows & windows phone apps jump start

Jaime Rodriguez | Microsoft Principal Technical EvangelistLaurent Bugnion | IdentityMine Senior Director

XAML Deep Dive for Windows & Windows Phone Apps Jump Start

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

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

Course TopicsXAML Deep Dive for Windows & Windows Phone Apps Jump Start01 | Intro to XAML02 | XAML UI Elements03 | Controls04 | Panels & Layout05 | Data Binding06 | MVVM07 | Windows Personality Controls

Setting Expectations New and seasoned developers Developers with web, iOS and Android backgrounds

Bringing existing non Windows apps to the Windows Store

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)

Join the MVA Community!

Module 1 – intro to XAML

Apps built using XAML..demos

XAML Basics

eXtensible Application Markup Language

Serialization and Initialization format <Activity x:TypeArguments="x:Int32" x:Class="Add" xmlns="http://schemas.microsoft.com/netfx/2009/xaml/activities" > <x:Members> <x:Property Name="Operand1" Type="InArgument(x:Int32)" /> < x:Property Name="Operand2" Type="InArgument(x:Int32)" /> </x:Members> <Sequence> <Assign x:TypeArguments="x:Int32" Value="[Operand1 + Operand2]"> <Assign.To> <OutArgument x:TypeArguments="x:Int32"> <ArgumentReference x:TypeArguments="x:Int32" ArgumentName="Result"/> </OutArgument> </Assign.To> </Assign> </Sequence> </Activity>

XAML - User Interface Declarative

Toolable

Recommended

<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="{StaticResource PinkButton}" Content="{Binding data.buttonName}" Click="OnButtonClick" Width="300" Margin="250" VerticalAlignment="Stretch"> </Button> </Grid>

</Page>

Declarative

Button b = new Button();b.Width = 100;b.Height = 50;b.Content = "Click Me!"; b.Background = new SolidColorBrush( Colors.Green);

<Button Content="Click Me!" Width="100" Height="50" Background="Green“ />

XAML is XMLElements represent objectsAttributes 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

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 public GradientStopCollection GradientStops { get; set; }public sealed class GradientStopCollection : IList<GradientStop>, IEnumerable<GradientStop>

Collections + contentproperty <StackPanel> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button></StackPanel>

//Powered by [ContentProperty(Name = "Children")]public class Panel { public UIElementCollection Children { get; }}

TypeConverters ColorThicknessEnumeratorsUri Point

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

Markup Extensions

XAML Namespaces Maps from CLR namespaces to XAML

<Pagexmlns="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">

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

Editor, Properties Window, Toolbox, Simulator, x:Name, Events, Document Outline

Visual Studio Tour

Other XAML tools- later in the day Blend

XAML SPY

WPF

Silverlight For desktop Windows Phone Windows Store (aka Jupiter)

UI frameworks in the “XAML” umbrella

©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.