1. Windows 8.1 developer training
Windows 8.1 for
developers
Dima AlOthaimeen
@Othaimeen
www.othaimeen.me

4. A new UI where touch is a first-class citizen along
with full mouse-and-keyboard support
Windows Store Apps

5. Rich, integrated search
driven by Bing
Personalized start
and lock screens
New live tile sizes,
including large
Live tile on install
Apps share the screen Deep OneDrive
integration

6. Windows 8.1: Free for all Windows 8 PCs

9. There are over 100,000 apps in the
Windows Store including top apps like
Hulu, Netflix, Twitter and Facebook.

10. New Windows Store
UX
Find apps on Start
screen with search or
new all apps view
Custom app
recommendations
based on user
behavior
Tight integration with
Bing search to aid
app discovery
Improved marketing
alignment and focus
on credit card attach

17. HTML/JS enables you to use your web
development knowledge and great
open source and commercial libraries
to create native Windows Store apps.

20. XAML with C#, VB and C++ makes
the best use of your wealth of desktop,
server, and phone development
knowledge to enable you to build
compelling Windows Store apps.

21. Many core Windows 8.1 experiences built on the same technology
New search, contact card, device companion apps, lock screen camera, and more

24. DirectX is the best platform for high-
performance, high-frame rate games
and visualizations

30. Programming skills
Development tools
Languages, frameworks
Components
Runtimes

32. Great device experiences …
… powered by services
in the cloud

65. Find a recipe I
want to make
Prepare a
recipe
Share recipes
with my friends

66. Find a recipe I
want to make
Prepare a
recipe
Share recipes
with my friends

72. Envisioning

90. FrameworkElement
TextBlock
RichTextBlock
Control
ContentControl
Border
ButtonBase
Button
ToggleButton
CheckBox
RadioButton
ProgressRing
RangeBase ProgressBar
TextBox,
PasswordBox
RichEditBox
Image
Shape Rectangle, Ellipse

93. TextBlock
TextBlock
FontSize="40" FontWeight="Bold" FontStyle="Italic"
FontFamily="Times New Roman"
TextBlock
TextTrimming="WordEllipsis"
TextBlock
Typography.Fraction="Slashed"
TextBlock
Typography.StylisticSet4="True"
TextBlock
Typography.StylisticSet5="True"
TextBlock
Typography.StylisticSet6="True"
TextBlock
Typography.StylisticSet7="True"

94. RichTextBlock OverflowContentTarget="{Binding ElementName=SecondColumnOverflow}"
Paragraph
Paragraph
Paragraph
Hyperlink
Hyperlink
Paragraph
Paragraph
InlineUIContainer
Button
InlineUIContainer
Run
Run
Paragraph
Paragraph
Run
Paragraph
RichTextBlock
RichTextBlockOverflow x:Name="SecondColumnOverflow"

96. TextBlock
ProgressRing IsActive="True"
TextBlock
ProgressBar Minimum="0" Maximum="250" Value="50"
TextBlock
ProgressBar
IsIndeterminate="True"
Important!
You must deactivate progress rings and progress bars when not visible.
There’s a performance penalty if you do not.

99. <TextBox Text="Hello world" />
<TextBox Text="Headers can be templated" Header="TextBox Header Text"/>
<TextBox Text="I am going to the store for moar bread."
Header="Spell-checking" IsSpellCheckEnabled="True"/>
<TextBox Header="Placeholder text"
PlaceholderText="please enter your first name"/>
<TextBox Header="Color Font Support" Text="I like tapioca. &#x1F600;"
IsColorFontEnabled="True" FontFamily="Segoe UI Emoji" />
<TextBox Text="For on-screen keyboards only"
Header="Text Prediction" IsTextPredictionEnabled="True"/>
<TextBox Text="pete@contoso.com"
Header="Input scope control" PlaceholderText="For touch keyboard"
InputScope="EmailSmtpAddress"/>
<TextBox Text="Peter piper picked a peck" Header="Selection highlight color control"
SelectionHighlightColor="Orange"/>
<PasswordBox Header="Please enter your password" FontSize="40" Margin="20"
IsPasswordRevealButtonEnabled="True" Password="Password1" />

100. <TextBox InputScope="EmailSmtpAddress"/>
<TextBox InputScope="Formula"/>
<TextBox InputScope="Number"/>

101. Button
Click="LoadFileButton_Click"
RichEditBox x:Name="RichTextEditor"
private async void LoadFileButton_Click(object
var new
var await
var await
RichTextEditor.Document.LoadFromStream(TextSetOptions.FormatRtf, stream);

102. DatePicker
CalendarIdentifier="GregorianCalendar"
DatePicker
CalendarIdentifier="KoreanCalendar"
DatePicker
CalendarIdentifier="JulianCalendar"
DatePicker
DayFormat="{}{dayofweek.solo.full}"
DatePicker
DayFormat="{}{day.integer} {dayofweek.abbreviated}"
TimePicker
ClockIdentifier="12HourClock"
TimePicker
ClockIdentifier="24HourClock"
DatePickerTimePicker

104. A short sidebar, before we continue with controls

105. LocalBinding
TextBlock Text="Set locally"
TextBlock Text="{Binding FirstName}"
TextBlock Text="{StaticResource AppName}"
person.FirstName
Most control properties in XAML are dependency properties and can
therefore be set in several different ways.
Not shown here: animation (storyboards) and style setters
CodeStatic
Resource

108. ExplicitImplicit
Page.Resources
Style TargetType="Control" x:Key="BaseControlStyle"
Setter
Setter
Style
Style TargetType="TextBox"
Setter
Style
Style
BasedOn="{StaticResource BaseControlStyle}"
Setter
Setter
Style
Page.Resources
Styles enable reuse of property values throughout the app
Styles may be inherited and may be implicit or explicit
Style
Inheritance

109. <ControlTemplate TargetType="Button">
<Grid>
…
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush} "
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" Margin="3">
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
... />
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False"
Opacity="0" StrokeDashOffset="1.5"
StrokeEndLineCap="Square"
Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False"
Opacity="0" StrokeDashOffset="0.5"
StrokeEndLineCap="Square"
Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>

111. ButtonContent
Button
Button
Button
Grid
Grid.ColumnDefinitions
ColumnDefinition
ColumnDefinition
Grid.ColumnDefinitions
Image
StackPanel
TextBlock
TextBlock
StackPanel
Grid
Button
HyperlinkButton
<Image Source="ms-appx:///Assets/Surface2.jpg"

112. XAMLCode-Behind
Button
Click="SimpleButton_Click"
private async void SimpleButton_Click
var new
await
The click event provides a simple way to handle button interaction
directly from the code-behind.
Double-click the button on the designer or use Intellisense in the XAML editor to generate the handler.
Handlers may also be wired up from code using the += syntax in C# and equivalent in VB.

113. XAMLViewModel
Button
Command="{Binding DoSomethingCommand}"
private RelayCommand _doSomethingCommand;
public RelayCommand DoSomethingCommand
{
get { ... } set { ... }
}
...
The button command provides the same functionality as the event,
but allows for MVVM and separation of UI from implementation.
Association may be set at runtime rather than compile-time. Example: the Locator pattern.

114. Button
<Button.Flyout>
<Flyout>
StackPanel
TextBlock
TextBlock
Button
StackPanel
</Flyout>
</Button.Flyout>
Button
Button
<Button.Flyout>
<MenuFlyout>
MenuFlyoutItem
MenuFlyoutItem
MenuFlyoutSeparator
ToggleMenuFlyoutItem
ToggleMenuFlyoutItem
</MenuFlyout>
</Button.Flyout>
Button

115. {x:Null}

118. Ellipse
Rectangle
Rectangle
Line
Path

119. Border
TextBlock
Border
Border is a ContentControl
Although sometimes used to create rectangles, it’s
very heavy for something which could be more
efficiently accomplished with a shape.
Use Border when you need a way to contain an
element with a visible border.

120. TextBlock
Image
TextBlock
Image
Image.Source
BitmapImage DecodePixelWidth="600"
Image.Source
Image
Scale at decode time
Providing a size when loading saves memory as only the bits to be
displayed are loaded in memory, reducing your app’s working set.
Often, this results in higher quality scaling as well.

124. http://msdn.microsoft.com/en-us/library/windows/apps/hh700354.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh700353.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh968442.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh965324.aspx

125. http://channel9.msdn.com/Events/Build/2013/2-164
http://channel9.msdn.com/Events/Build/2013/3-321
http://channel9.msdn.com/Events/Build/2013/2-082

128. FrameworkElement Control
SemanticZoom
ItemsControl Selector
ListBox
ComboBox
ListViewBase
ListView
GridView
FlipView

131. ItemsControls are complex and flexible
For example: a ListView
For example: on a ListView, this is a VirtualizingStackPanel by default
eg: ListViewItem eg: ListViewItem eg: ListViewItem
Item realized using
ItemTemplate
Item realized using
ItemTemplate
Item realized using
ItemTemplate…

132. Data
Data template

133. FlipView
FlipView.ItemTemplate
DataTemplate
Grid
Image
Border
TextBlock
Border
Grid
DataTemplate
FlipView.ItemTemplate
FlipView
DataTemplate

135. ListView

136. GridView

138. ItemsControl
Selector
ListViewBase
ListView GridView FlipView

142. Can virtualize
Can not virtualize

143. GridViewItemPresenter
+ =
Improve performance
Avoids unnecessary creation of adorner elements
Use presenters in customized item container templates to get start up improvements on Windows 8.1

151. SemanticZoom
SemanticZoom.ZoomedInView
<!-- Normal view goes here -->
SemanticZoom.ZoomedInView
SemanticZoom.ZoomedOutView
<!-- high-level view goes here -->
SemanticZoom.ZoomedOutView
SemanticZoom
What can be in the views?
The zoomed in and out views are typically GridView or Hub controls, but do not need to be. The
control just needs to implement ISemanticZoomInformation.

153. http://msdn.microsoft.com/en-us/library/windows/apps/hh780615.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh780657.aspx

154. http://channel9.msdn.com/Events/Build/2013/3-157
http://channel9.msdn.com/Events/Build/2013/3-158
http://channel9.msdn.com/Events/Build/2013/2-164
http://channel9.msdn.com/Events/Build/2013/2-082