Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers"...
-
Upload
wagdy-mohamed -
Category
Mobile
-
view
362 -
download
0
Transcript of Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers"...
![Page 1: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/1.jpg)
Introduction to UI, UX and XAML
Prepared and Presented byAmira SherifAya ZakariaNehal Tarek
Wagdy Mohamed
![Page 2: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/2.jpg)
Agenda
UI and UXWhat is XAML?
Element positioningContainer controls overviewMore in XAML
![Page 3: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/3.jpg)
Different? Or the Same?
![Page 4: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/4.jpg)
![Page 5: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/5.jpg)
![Page 6: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/6.jpg)
![Page 7: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/7.jpg)
![Page 8: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/8.jpg)
![Page 9: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/9.jpg)
What is XAML?
A MX LExtensible Application Markup Language
![Page 10: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/10.jpg)
Markup Language
A markup language is computer language that uses tags to define elements within a documents.
TAG < … />
![Page 11: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/11.jpg)
Element positioning
Vertical alignmentHorizontal alignmentMarginPadding
![Page 12: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/12.jpg)
Alignment & Margin
Vertical Alignment(Top, Center, Bottom, Stretch)Horizontal Alignment(Left, Center, Right, Stretch)Margin= “Left, Top, Right, Bottom”
![Page 13: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/13.jpg)
Padding
<Border Width="300" Height="300" Background="white" Padding="20" BorderThickness="20" BorderBrush="Blue" > <Rectangle Fill="Brown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </Border>
![Page 14: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/14.jpg)
Container control overview
GridStack panelCanvas
![Page 15: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/15.jpg)
Grid
Grid row definition< Grid.RowDefinitions>
< RowDefinition Height="100>/"< RowDefinition Height="100>/"< RowDefinition Height="100>/"
/< Grid.RowDefinitions>
![Page 16: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/16.jpg)
Grid
Grid Column definition<Grid.ColumnDefinitions>
< ColumnDefinition Width="100>/"< ColumnDefinition Width="100>/"< ColumnDefinition Width="100>/"
/< Grid.ColumnDefinitions>
![Page 17: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/17.jpg)
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>
![Page 18: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/18.jpg)
Grid
Grid Background<Grid>
<Grid.Background><ImageBrush Stretch="Fill“
ImageSource="Assets/Logo1.png>/"/< Grid.Background>
/<Grid>
![Page 19: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/19.jpg)
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>
![Page 20: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/20.jpg)
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>
![Page 21: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/21.jpg)
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>/"
![Page 22: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/22.jpg)
More in XAML
Image <Image Height="200"
Source="Assets/Logo1.png" Stretch="Uniform"
Margin="629,24,358,544“ Opacity=“0.2>/”
![Page 23: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/23.jpg)
![Page 24: Microsoft Tech Club Cairo University "MSTC'16 Builders and Developers and Interaction Designers" Fourth Session](https://reader036.fdocuments.net/reader036/viewer/2022070513/588614c21a28abe63e8b5fbb/html5/thumbnails/24.jpg)