Windows 8.1 developer training
Windows 8.1 for
developers
Dima AlOthaimeen
@Othaimeen
www.othaimeen.me
A new UI where touch is a first-class citizen along
with full mouse-and-keyboard support
Windows Store Apps
Rich, integrated search
driven by Bing
Personalized start
and lock screens
New live tile sizes,
including large
Live tile ...
Windows 8.1: Free for all Windows 8 PCs
There are over 100,000 apps in the
Windows Store including top apps like
Hulu, Netflix, Twitter and Facebook.
New Windows Store
UX
Find apps on Start
screen with search or
new all apps view
Custom app
recommendations
based on user
b...
HTML/JS enables you to use your web
development knowledge and great
open source and commercial libraries
to create native ...
XAML with C#, VB and C++ makes
the best use of your wealth of desktop,
server, and phone development
knowledge to enable y...
Many core Windows 8.1 experiences built on the same technology
New search, contact card, device companion apps, lock scree...
DirectX is the best platform for high-
performance, high-frame rate games
and visualizations
Programming skills
Development tools
Languages, frameworks
Components
Runtimes
Great device experiences …
… powered by services
in the cloud
Find a recipe I
want to make
Prepare a
recipe
Share recipes
with my friends
Find a recipe I
want to make
Prepare a
recipe
Share recipes
with my friends
Envisioning
FrameworkElement
TextBlock
RichTextBlock
Control
ContentControl
Border
ButtonBase
Button
ToggleButton
CheckBox
RadioButton...
TextBlock
TextBlock
FontSize="40" FontWeight="Bold" FontStyle="Italic"
FontFamily="Times New Roman"
TextBlock
TextTrimming...
RichTextBlock OverflowContentTarget="{Binding ElementName=SecondColumnOverflow}"
Paragraph
Paragraph
Paragraph
Hyperlink
H...
TextBlock
ProgressRing IsActive="True"
TextBlock
ProgressBar Minimum="0" Maximum="250" Value="50"
TextBlock
ProgressBar
Is...
<TextBox Text="Hello world" />
<TextBox Text="Headers can be templated" Header="TextBox Header Text"/>
<TextBox Text="I am...
<TextBox InputScope="EmailSmtpAddress"/>
<TextBox InputScope="Formula"/>
<TextBox InputScope="Number"/>
Button
Click="LoadFileButton_Click"
RichEditBox x:Name="RichTextEditor"
private async void LoadFileButton_Click(object
var...
DatePicker
CalendarIdentifier="GregorianCalendar"
DatePicker
CalendarIdentifier="KoreanCalendar"
DatePicker
CalendarIdenti...
A short sidebar, before we continue with controls
LocalBinding
TextBlock Text="Set locally"
TextBlock Text="{Binding FirstName}"
TextBlock Text="{StaticResource AppName}"
p...
ExplicitImplicit
Page.Resources
Style TargetType="Control" x:Key="BaseControlStyle"
Setter
Setter
Style
Style TargetType="...
<ControlTemplate TargetType="Button">
<Grid>
…
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush} "
Border...
ButtonContent
Button
Button
Button
Grid
Grid.ColumnDefinitions
ColumnDefinition
ColumnDefinition
Grid.ColumnDefinitions
Im...
XAMLCode-Behind
Button
Click="SimpleButton_Click"
private async void SimpleButton_Click
var new
await
The click event prov...
XAMLViewModel
Button
Command="{Binding DoSomethingCommand}"
private RelayCommand _doSomethingCommand;
public RelayCommand ...
Button
<Button.Flyout>
<Flyout>
StackPanel
TextBlock
TextBlock
Button
StackPanel
</Flyout>
</Button.Flyout>
Button
Button
...
{x:Null}
Ellipse
Rectangle
Rectangle
Line
Path
Border
TextBlock
Border
Border is a ContentControl
Although sometimes used to create rectangles, it’s
very heavy for somet...
TextBlock
Image
TextBlock
Image
Image.Source
BitmapImage DecodePixelWidth="600"
Image.Source
Image
Scale at decode time
Pr...
http://msdn.microsoft.com/en-us/library/windows/apps/hh700354.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh...
http://channel9.msdn.com/Events/Build/2013/2-164
http://channel9.msdn.com/Events/Build/2013/3-321
http://channel9.msdn.com...
FrameworkElement Control
SemanticZoom
ItemsControl Selector
ListBox
ComboBox
ListViewBase
ListView
GridView
FlipView
ItemsControls are complex and flexible
For example: a ListView
For example: on a ListView, this is a VirtualizingStackPane...
Data
Data template
FlipView
FlipView.ItemTemplate
DataTemplate
Grid
Image
Border
TextBlock
Border
Grid
DataTemplate
FlipView.ItemTemplate
Fli...
ListView
GridView
ItemsControl
Selector
ListViewBase
ListView GridView FlipView
Can virtualize
Can not virtualize
GridViewItemPresenter
+ =
Improve performance
Avoids unnecessary creation of adorner elements
Use presenters in customized...
SemanticZoom
SemanticZoom.ZoomedInView
<!-- Normal view goes here -->
SemanticZoom.ZoomedInView
SemanticZoom.ZoomedOutView...
http://msdn.microsoft.com/en-us/library/windows/apps/hh780615.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh...
http://channel9.msdn.com/Events/Build/2013/3-157
http://channel9.msdn.com/Events/Build/2013/3-158
http://channel9.msdn.com...
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Students Stars
Upcoming SlideShare
Loading in …5
×

Students Stars

757 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
757
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Students Stars

  1. 1. Windows 8.1 developer training Windows 8.1 for developers Dima AlOthaimeen @Othaimeen www.othaimeen.me
  2. 2. A new UI where touch is a first-class citizen along with full mouse-and-keyboard support Windows Store Apps
  3. 3. 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
  4. 4. Windows 8.1: Free for all Windows 8 PCs
  5. 5. There are over 100,000 apps in the Windows Store including top apps like Hulu, Netflix, Twitter and Facebook.
  6. 6. 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
  7. 7. HTML/JS enables you to use your web development knowledge and great open source and commercial libraries to create native Windows Store apps.
  8. 8. 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.
  9. 9. Many core Windows 8.1 experiences built on the same technology New search, contact card, device companion apps, lock screen camera, and more
  10. 10. DirectX is the best platform for high- performance, high-frame rate games and visualizations
  11. 11. Programming skills Development tools Languages, frameworks Components Runtimes
  12. 12. Great device experiences … … powered by services in the cloud
  13. 13. Find a recipe I want to make Prepare a recipe Share recipes with my friends
  14. 14. Find a recipe I want to make Prepare a recipe Share recipes with my friends
  15. 15. Envisioning
  16. 16. FrameworkElement TextBlock RichTextBlock Control ContentControl Border ButtonBase Button ToggleButton CheckBox RadioButton ProgressRing RangeBase ProgressBar TextBox, PasswordBox RichEditBox Image Shape Rectangle, Ellipse
  17. 17. 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"
  18. 18. 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"
  19. 19. 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.
  20. 20. <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. 😀" 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" />
  21. 21. <TextBox InputScope="EmailSmtpAddress"/> <TextBox InputScope="Formula"/> <TextBox InputScope="Number"/>
  22. 22. 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);
  23. 23. 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
  24. 24. A short sidebar, before we continue with controls
  25. 25. 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
  26. 26. 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
  27. 27. <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>
  28. 28. 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"
  29. 29. 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.
  30. 30. 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.
  31. 31. 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
  32. 32. {x:Null}
  33. 33. Ellipse Rectangle Rectangle Line Path
  34. 34. 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.
  35. 35. 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.
  36. 36. 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
  37. 37. 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
  38. 38. FrameworkElement Control SemanticZoom ItemsControl Selector ListBox ComboBox ListViewBase ListView GridView FlipView
  39. 39. 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…
  40. 40. Data Data template
  41. 41. FlipView FlipView.ItemTemplate DataTemplate Grid Image Border TextBlock Border Grid DataTemplate FlipView.ItemTemplate FlipView DataTemplate
  42. 42. ListView
  43. 43. GridView
  44. 44. ItemsControl Selector ListViewBase ListView GridView FlipView
  45. 45. Can virtualize Can not virtualize
  46. 46. 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
  47. 47. 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.
  48. 48. http://msdn.microsoft.com/en-us/library/windows/apps/hh780615.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh780657.aspx
  49. 49. 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

×