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:[email protected]: @Amira_gamalmFB: /amiragamalsalem