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.