INTRODUCTION TO XAML
Presented by:
Amira Gamal
WELCOME
Windows 8
Windows
Phone
AGENDA
• What is XAML ?
• How is it Declarative ?
• Markup Language.
• Hierarchical Relationships & Visual Tree.
• Core Co...
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 obj...
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 Proper...
TOOLKIT
Map Extensions Various
Effects/Transitions
Custom Message
Box
RatingControl
TOOLKIT
Grid Layout List Layout Expander View ListPicker
TOOLKIT
Time/date
Picker
Context Menu Toggle Switch
Control
Auto Complete
Box
GRID
Row Span = 3
Column Span = 2
Row = 0
Row = 1
Row = 2
Row = 3
Column = 0 Column = 1 Column = 2
GRID IN XAML (DEMO)
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...
MARGIN
• Space outside edges of an element .
PADDING
• Space inside edges of an element
WHAT IS BLEND?
BLEND (DEMO)
CONTACT ME:
Mail: Amera.gamal@Hotmail.com
Twitter: @Amira_gamalm
FB: /amiragamalsalem
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5
Upcoming SlideShare
Loading in …5
×

MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5

894 views

Published on

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
894
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
32
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5

  1. 1. INTRODUCTION TO XAML Presented by: Amira Gamal
  2. 2. WELCOME Windows 8 Windows Phone
  3. 3. 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?
  4. 4. WHAT IS XAML? •XAML stands for “extensible Application Markup Language” •XAML is: -used to create UI. -declarative .
  5. 5. DECLARATIVE • XAML Code • C# Code
  6. 6. DEMO
  7. 7. MARKUP EXTENSION Markup Extension
  8. 8. 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.
  9. 9. CORE CONTROLS
  10. 10. LAYOUTS & PANELS • Grid. • Stack. • Canvas. • Wrap Panel (*Windows Phone Toolkit*).
  11. 11. 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>
  12. 12. TOOLKIT Map Extensions Various Effects/Transitions Custom Message Box RatingControl
  13. 13. TOOLKIT Grid Layout List Layout Expander View ListPicker
  14. 14. TOOLKIT Time/date Picker Context Menu Toggle Switch Control Auto Complete Box
  15. 15. GRID Row Span = 3 Column Span = 2 Row = 0 Row = 1 Row = 2 Row = 3 Column = 0 Column = 1 Column = 2
  16. 16. GRID IN XAML (DEMO)
  17. 17. STACK PANEL • Stacks child elements together • Orientation: Vertical/Horizontal
  18. 18. STACK PANEL - STACK IN XAML
  19. 19. PROPERTIES AFFECTING LAYOUTS & PANELS • Width/Height. • Horizontal/Vertical Alignment. • Margin . • Padding . • Visibility .
  20. 20. ALIGNMENT • Determines position and stretch for an element • Horizontal Alignment -Left, Center, Right, Stretch • Vertical Alignment -Top, Center, Bottom, Stretch
  21. 21. MARGIN • Space outside edges of an element .
  22. 22. PADDING • Space inside edges of an element
  23. 23. WHAT IS BLEND?
  24. 24. BLEND (DEMO)
  25. 25. CONTACT ME: Mail: Amera.gamal@Hotmail.com Twitter: @Amira_gamalm FB: /amiragamalsalem

×