INTRODUCTION TO XAML

Presented by:

Amira Gamal

WELCOME

Windows 8WindowsPhone

AGENDA

• What is XAML ?

• How is it Declarative ?

• Markup Language.

• Hierarchical Relationships & Visual Tree.

• Core Controls.

• Layouts & Panels.

• Properties affecting Layouts & Panels.

• What is Blend?

WHAT IS XAML?

•XAML stands for “extensible Application Markup Language”•XAML is:

-used to create UI.

-declarative .

DECLARATIVE

• XAML Code

• C# Code

DEMO

MARKUP EXTENSION

Markup Extension

HIERARCHICAL RELATIONSHIPS & VISUAL TREE

• XAML language structure shows a hierarchical relationships between multiple objects.

• The visual tree represents all of the elements in your UI which render to an output device.

CORE CONTROLS

LAYOUTS & PANELS

• Grid.

• Stack.

• Canvas.

• Wrap Panel (*Windows Phone Toolkit*).

WRAP PANEL (TOOLKIT)

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="WrapPanel Properties Sample"> <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2"> <WrapPanel Orientation="Horizontal" Background="Azure" ItemWidth="25" ItemHeight="25" Height="200" Width="200"> <Button Width="200">Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> </WrapPanel> </Border>

</Page>

TOOLKIT

Map Extensions Various Effects/Transitions

Custom Message Box

RatingControl

TOOLKIT

Grid Layout List Layout Expander View ListPicker

TOOLKIT

Time/datePicker

Context Menu Toggle Switch Control

Auto CompleteBox

GRID

Row Span = 3

Column Span = 2

Row = 0

Row = 1

Row = 2

Row = 3

Column = 0 Column = 1 Column = 2

GRID IN XAML

STACK PANEL

• Stacks child elements together• Orientation: Vertical/Horizontal

STACK PANEL

- STACK IN XAML

PROPERTIES AFFECTING LAYOUTS & PANELS

• Width/Height.

• Horizontal/Vertical Alignment.

• Margin .

• Padding .

• Visibility .

ALIGNMENT

• Determines position and stretch for an element • Horizontal Alignment -Left, Center, Right, Stretch • Vertical Alignment -Top, Center, Bottom, Stretch

MARGIN

• Space outside edges of an element .

PADDING• Space inside edges of an element

Any Questions

???

Thank You

CONTACT ME:Mail:Amera.gamal@Hotmail.comTwitter: @Amira_gamalmFB: /amiragamalsalem