This document provides an introduction to UI, UX and XAML. It discusses the differences between UI and UX, and what XAML is. XAML is an XML-based markup language used for defining user interfaces. The document covers element positioning using alignment, margin and padding. It also provides an overview of common XAML container controls like Grid, StackPanel and Canvas and how to use them to position elements.

1. Introduction to UI, UX and XAML
Prepared and Presented by
Amira Sherif
Aya Zakaria
Nehal Tarek
Wagdy Mohamed

2. Agenda
UI and UX
What is XAML ?
Element positioning
Container controls overview
More in XAML

3. Different? Or the Same?

9. What is XAML ?
Extensible Application Markup Language

10. Markup Language
A markup language is computer
language that uses tags to define
elements within a documents.
TAG
< … />

11. Element positioning
Vertical alignment
Horizontal alignment
Margin
Padding

12. Alignment & Margin
Vertical Alignment(Top, Center, Bottom, Stretch)
Horizontal Alignment(Left, Center, Right, Stretch)
Margin= “Left, Top, Right, Bottom”

13. Padding
<Border Width="300" Height="300"
Background="white" Padding="20"
BorderThickness="20" BorderBrush="Blue" >
<Rectangle Fill="Brown" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Border>

14. Container control overview
Grid
Stack panel
Canvas

15. Grid
Grid row definition
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>

16. Grid
Grid Column definition
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>

17. Grid
Access rows & columns
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Grid.Row="0" Grid.Column="1"/>
<Rectangle Fill="Orange" Grid.Row="1" />
<Rectangle Fill="White" Grid.Row="1" Grid.Column="1"/>
<Rectangle Fill="Aqua" Grid.Row="2"/>
</Grid>

18. Grid
Grid Background
<Grid>
<Grid.Background>
<ImageBrush Stretch="Fill“
ImageSource="Assets/Logo1.png"/>
</Grid.Background>
</Grid>

19. Stack Panel
<StackPanel Background="Black"
Orientation="Horizontal“ HorizontalAlignment="Left"
Height="300" Margin="555,362,0,0"
VerticalAlignment="Top" Width="300">
<Rectangle Fill="Blue" Height="100" Width="100"/>
<Rectangle Fill="White" Height="100" Width="100"/>
<Rectangle Fill="Yellow" Height="100" Width="100"/>
</StackPanel>

20. Canvas
<Canvas Background=“Black”
HorizontalAlignment="Left" Height="245"
Margin="1031,491,0,0" VerticalAlignment="Top"
Width="287">
<Rectangle Fill="blue" Width="80"
Height="80"/>
<Rectangle Fill="White" Width="80"
Height="80" Canvas.Left="80" Canvas.Top="80"/>
<Rectangle Fill="Red" Width="80"
Height="80" Canvas.Left="160"
Canvas.Top="160"/>
</Canvas>

21. More in XAML
Hyper Link
<HyperlinkButton Content="CairoTC"
NavigateUri=
"https://www.facebook.com/CairoTC"
Foreground="Black" FontSize="40"
Margin="882,1,0,693" Height="74"
Width="190"/>

22. More in XAML
Image
<Image Height="200"
Source="Assets/Logo1.png" Stretch="Uniform"
Margin="629,24,358,544“ Opacity=“0.2”/>