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