Introduction to UI, UX and XAML

Prepared and Presented byAmira SherifAya ZakariaNehal Tarek

Wagdy Mohamed

Agenda

UI and UXWhat is XAML?

Element positioningContainer controls overviewMore in XAML

Different? Or the Same?

What is XAML?

A MX LExtensible Application Markup Language

Markup Language

A markup language is computer language that uses tags to define elements within a documents.

TAG < … />

Element positioning

Vertical alignmentHorizontal alignmentMarginPadding

Alignment & Margin

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

Padding

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

Container control overview

GridStack panelCanvas

Grid

Grid row definition< Grid.RowDefinitions>

< RowDefinition Height="100>/"< RowDefinition Height="100>/"< RowDefinition Height="100>/"

/< Grid.RowDefinitions>

Grid

Grid Column definition<Grid.ColumnDefinitions>

< ColumnDefinition Width="100>/"< ColumnDefinition Width="100>/"< ColumnDefinition Width="100>/"

/< Grid.ColumnDefinitions>

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>

Grid

Grid Background<Grid>

<Grid.Background><ImageBrush Stretch="Fill“

ImageSource="Assets/Logo1.png>/"/< Grid.Background>

/<Grid>

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>

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>

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>/"

More in XAML

Image <Image Height="200"

Source="Assets/Logo1.png" Stretch="Uniform"

Margin="629,24,358,544“ Opacity=“0.2>/”