1. Getting Started Building Windows Runtime Apps
WinRT App
Building Apps for Windows Phone 8.1 Jump Start
Building Windows Runtime Apps using C# and XAML
Getting Started Building Windows Runtime Apps
Andy Wigley @andy_wigley Matthias Shapiro @matthiasshap
29 April 2014

2. In this module… Getting started building Windows Runtime XAML apps…
9/11/2018
In this module… Getting started building Windows Runtime XAML apps…
Creating projects in Visual Studio
Introduction to XAML and Page Layout
Overview of the XAML controls
Common controls
Container controls
Optimized controls
Signature controls
Using Styles and Themes
Programming the AppBar
Programming the Status Bar
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. Creating Projects in Visual Studio 2013
9/11/2018
Creating Projects in Visual Studio 2013
Create Windows Runtime apps using XAML or HTML/JavaScript targeting:
Universal Windows and Windows Phone
Windows
Windows Phone
Can also create Windows Phone Silverlight apps targeting Windows Phone 8.0 or 8.1
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Anatomy of a Windows Runtime App project
9/11/2018
Anatomy of a Windows Runtime App project
Solution name
Project name
Library references
App logos and other artwork
App class
Page class
App manifest
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. XAML and Pages Each of the items on the page can be defined in XAML
Every XAML element is a declaration of an object
XAML stands for Extensible Application Markup Language
XAML is a way of describing a UI using XML
This is a declarative way of expressing your UI
XAML elements are objects in the Windows.UI.XAML namespace
XAML attributes map to setting properties on those objects

6. XAML Display Elements TextBlock Image Grid (Page Container)
StackPanel (stacks controls vertically)
TextBlock Image
Grid (lays out content in rows and/or columns) – in this case three rows
StackPanel (stacks controls horizontally)

7. Display Element Properties
Each of the elements has properties that define how it appears on the screen
Position on the screen
Height and width
Font color and size etc..
These values are used by XAML when the elements are drawn

8. Creating a simple app demo 9/11/2018
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Container controls
Layout controls

10. Panel Controls: Canvas, StackPanel, Grid…
9/11/2018
Panel Controls: Canvas, StackPanel, Grid…
Containers for other elements
Elements inside the panel are called “Children”
You can nest panels
The panel controls how the children are positioned
More on that when we discuss the layout process
Several panels included
Border, Canvas, StackPanel and Grid cover most common uses
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. StackPanel Margins and appropriate alignment are respected
9/11/2018
StackPanel
<StackPanel Width="400" Background="MidnightBlue">
<TextBlock Text="Item 1" FontSize="40" Margin="10"/>
<Rectangle Width="200" Height="50"
HorizontalAlignment="Center" Fill="Red"/>
<Rectangle Width="200" Height="50" HorizontalAlignment="Center"
Margin="-20,-10,0,0" Opacity="0.5" Fill="Orange"/>
<TextBlock Text="The above Rectangle has negative margins"
TextWrapping="Wrap" Margin="10" FontSize="40" />
<TextBox Header="First name" FontSize="20" Margin="10"
PlaceholderText="Please enter your first name" />
<Button Content="I am a button" Margin="50,100,0,20" />
<StackPanel Orientation="Horizontal" Margin="20">
<Button Content="Fee" />
<Button Content="Fi" />
<Button Content="Fo" />
<Button Content="Fum" />
</StackPanel>
Margins and appropriate alignment are respected
Margins and Alignment
Nested StackPanel
A StackPanel may have horizontal or vertical orientation
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Row and Column Definitions
9/11/2018
Grid
1.0*
2.0*
0.5*
<Grid Width="400" Background="DarkBlue" Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Rectangle Stroke="White" Margin="1" Grid.Row="0" Grid.Column="0" />
<Rectangle Stroke="White" Margin="1" Grid.Row="0" Grid.Column="1" />
<Rectangle Stroke="White" Margin="1" Grid.Row="0" Grid.Column="2" />
...
<TextBlock Text="Row 0, Col 0" Margin="5" />
<TextBlock Text="Row 0, Col 1" Grid.Column="1" Margin="5" />
<TextBlock Text="Row 0, Col 2" Grid.Column="2"
HorizontalAlignment="Right" Margin="5" />
</Grid>
Row and Column Definitions
Rectangles
Labels
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. Grid <Rectangle Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
9/11/2018
Grid
<Rectangle Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
Fill="CornflowerBlue" />
<Rectangle Grid.Row="2" Margin="-20" Opacity="0.5" Fill="Purple" />
<TextBox Grid.Row="2" Grid.Column="2" Header="This is a TextBox"
Margin="5,25,5,5" TextWrapping="Wrap"
Text="Notice how I expand to fill all... "/>
<StackPanel Grid.Row="3" Grid.Column="2" Margin="5,25,5,5">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="14" />
<Setter Property="Foreground" Value="Orange" />
</Style>
</StackPanel.Resources>
<TextBlock Text="StackPanel Line 1" />
<TextBlock Text="StackPanel Line 2" />
<TextBlock Text="StackPanel Line 3" />
<TextBlock Text="StackPanel Line 4" />
<TextBlock Text="StackPanel Line 5" />
</StackPanel>
Nested StackPanel
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14. Laying out controls demo 9/11/2018
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15. Overview of Windows XAML controls

16. Converged controls What’s it really mean? 80% exact same XAML
9/11/2018
Converged controls
What’s it really mean?
80% exact same XAML
20% custom
Common
Optimized
DatePicker
TimePicker
CommandBar
Signature
Button
ToggleSwitch
Hub
Pivot
ListView
GridView
SysTray
CheckBox
Slider
RadioButton
ProgressBar
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. Common controls
“A button is a button is a button…”

18. Text Handling Controls
9/11/2018
Text Handling Controls
TextBlock
Displays text
Supports line breaks and word wrapping
RichTextBlock
Paragraphs, spans, and runs allow for formatting sections of the rich text
TextBox
Fully templatable Header property
Supports spell-checking, placeholder text, text-prediction and input scope for on-screen keyboards, multi-line support
PasswordBox
Obscures text entry
Supports placeholder text and templateable Header
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

19. Input scope Sets layout of on-screen keyboard
9/11/2018
Input scope
<TextBox InputScope= " SmtpAddress"/>
Sets layout of on-screen keyboard
Many different types available – see documentation for full list
Does not provide any data validation
Implement to provide the most efficient experience to your users.
<TextBox InputScope= "CurrencyAmountAndSymbol"/>
<TextBox InputScope="Number"/>
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

20. Button and HyperlinkButton
9/11/2018
Button and HyperlinkButton
<Button Content="Simple Button" Style="{StaticResource ButtonStyle}"/>
<Button Background="LightBlue" Foreground="Black" Content="Colored Button“
BorderBrush="Orange" Style="{StaticResource ButtonStyle}"/>
<Button Background="White" Foreground="Black" BorderBrush="CornflowerBlue"
Style="{StaticResource ButtonStyle}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="ms-appx:///Assets/Surface2.jpg"
Width="150" Stretch="Uniform" Grid.Column="0" />
<StackPanel Grid.Column="1" Margin="5">
<TextBlock Text="Microsoft Surface 2" Foreground="CornflowerBlue"
FontFamily="Segoe UI" FontWeight="Light"/>
<TextBlock FontSize="12" Text="This is a button with complex content. ..."
Foreground="Gray" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
</Button>
<HyperlinkButton FontSize="30"
Content="Visit MicrosoftStore.com"
NavigateUri=" />
Button Content
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

21. 9/11/2018
Click event
XAML
<Button x:Name="SimpleButton" Content="Simple Button"
Click="SimpleButton_Click"/>
private async void SimpleButton_Click(object sender, RoutedEventArgs e) {
var dialog = new MessageDialog("The button was clicked.");
dialog.Title = "Button click handler";
await dialog.ShowAsync(); }
Code-Behind
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 or C++.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

22. Other types of button controls
ToggleButton
Behaves like a CheckBox, looks like a button.
CheckBox and RadioButton
Inherited from ToggleButton to provide the expected functionality
Supports tri-state through null or, in XAML, {x:Null}
AppBarButton, AppBarToggleButton
Provides buttons for use in standard app bars, and also on the main canvas. We’ll cover this when we discuss app bars.

23. ProgressRing and ProgressBar
9/11/2018
ProgressRing and ProgressBar
<TextBlock Text="Progress Ring"
FontSize="20" Margin="10,10,10,0"/>
<ProgressRing IsActive="True"
Width="80" Height="80" Margin="10,10,10,100"/>
<TextBlock Text="Progress Bar"
FontSize="20" Margin="10,30,10,0"/>
<ProgressBar Minimum="0" Maximum="250" Value="50"
Height="50" Margin="10"/>
<TextBlock Text="Indeterminate" FontSize="20" Margin="10,30,10,0"/>
<ProgressBar Height="50"
IsIndeterminate="True"
Margin="10"/>
Important!
You must deactivate progress rings and progress bars when not visible. There’s a performance penalty if you do not.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. Optimized controls
Same great API, different UX

25. DatePicker / TimePicker
9/11/2018
DatePicker / TimePicker
Same API on Windows and Windows Phone Appropriate UI for platform
Allows restricting to individual segments (show only month/year for example)
Windows Phone
Windows
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26. Flyouts All are “light-dismiss”: Converged with Windows 8.1
9/11/2018
Flyouts
Converged with Windows 8.1
MenuFlyout used to create context menu
New Phone-only flyouts
List Picker Flyouts
Date/TimePicker Flyouts
Generic Picker Flyouts
All are “light-dismiss”:
Dismiss by Back button, or for non full-screen flyouts such as MenuFlyout, dismiss by tapping outside of the control
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27. 9/11/2018
Flyouts
<Button Content="Show Normal Flyout" Margin="100, 20, 100, 20">
<Button.Flyout>
<Flyout>
<StackPanel Width="250">
<TextBlock Text="Some header text" FontSize="24" Margin="0,0,0,20"
FontWeight="Light" Foreground="CornflowerBlue"/>
<TextBlock Text="This type of flyout is a ..." FontSize="16"
TextWrapping="Wrap" />
<Button Content="Do Something" HorizontalAlignment="Right"
Margin="0,20,0,0"/>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<Button Content="Show Menu Flyout" Margin="20, 20, 100, 20">
<MenuFlyout>
<MenuFlyoutItem Text="Option 1" />
<MenuFlyoutItem Text="Option 2" />
<MenuFlyoutSeparator />
<ToggleMenuFlyoutItem Text="Toggle Option 1" IsChecked="True" />
<ToggleMenuFlyoutItem Text="Toggle Option 2" />
</MenuFlyout>
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28. ContentDialog (Phone only)
A custom message box to place arbitrary content
Supports both full and partial screen

29. Programming ContentDialog
private async void ShowContentDialog() {
ContentDialog dialog = new ContentDialog()
Title = "Download updates?",
Content = "This update will clean the slate for Iron Man",
PrimaryButtonText = "Yes, clean it",
SecondaryButtonText = "No, Dont!" };
dialog.SecondaryButtonClick += dialog_SecondaryButtonClick;
ContentDialogResult result = await dialog.ShowAsync();
if (result == ContentDialogResult.Primary) { /* do some more Primary logic */ }
else if (result == ContentDialogResult.Secondary) { /* else do Secondary logic */ } }
void dialog_SecondaryButtonClick(ContentDialog sender, object args)
{ /* you can also hook up to a button event handler */  }

30. ContentDialog in XAML
Project -> ‘Add New Item’ -> select ContentDialog
Design your ContentDialog in the same way as a User Control
In code, show your dialog like this:
AboutMessage myDialog = new AboutMessage();
ContentDialogResult result = await myDialog.ShowAsync();

31. AutoSuggestBox (Phone only)
App code provides suggestions
Automatic positioning to maximize space for suggestions
Fully re-templatable

32. Windows Phone System UI: AppBar, StatusBar, Soft Buttons
9/11/2018
Windows Phone System UI: AppBar, StatusBar, Soft Buttons
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

33. Windows Phone System UI
Status Bar
App Bar
Navigation Bar (Soft buttons) Available on some devices
Also: In-call UI (not shown)

34. CommandBar control <CommandBar x:Name="commandBar">
9/11/2018
CommandBar control
    <Page.BottomAppBar>
        <CommandBar x:Name="commandBar">
            <CommandBar.PrimaryCommands>
                <AppBarButton Label="edit" Icon="Edit" />
            <AppBarButton Label="favorite" Icon="Favorite" />
            <AppBarSeparator />
            <AppBarToggleButton Label="play" Icon="Play" />
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="help" Icon="Question" />
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

35. CommandBar Windows Phone Windows 9/11/2018
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

36. Differences from Windows
Top AppBar not supported
AppBar not shown by a gesture
Can still set Visibility = "Collapsed" to hide, but when visible, AppBar is not transient on Phone
Equivalent to IsOpen="true" at all times
On Windows, Top and Bottom AppBar is transient and considered user UI
Can display AppBar minimized on Windows Phone
Use <CommandBar ClosedDisplayMode="Minimal" … />
Not supported on big Windows
Converged XAML but certain properties/events ignored on Phone
IsSticky property, used on Windows to disable the light-dismiss behaviour and keep AppBar visible
Opened and Closed events, which on Windows fires when the AppBar displays/disappears
AppBarSeparator not rendered on Windows Phone
Used on Windows to render a separator bar onto the AppBar

37. AppBarButton.Icon Icon Class Icon contents SymbolIcon
9/11/2018
AppBarButton.Icon
<CommandBar.SecondaryCommands>
<AppBarButton Label="Add Item">
<AppBarButton.Icon>
<SymbolIcon Symbol="Add" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Block">
<BitmapIcon UriSource="assets/foo.png"/>
</CommandBar.SecondaryCommands>
Icon Class
Icon contents
SymbolIcon
Named Segoe UI Symbol symbol
BitmapIcon
A bitmap (PNG, etc.) image
FontIcon
A custom font
PathIcon
A XAML path
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

38. AppBarButton MenuFlyouts
9/11/2018
AppBarButton MenuFlyouts
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="btnBrag" Icon="Camera" Label="brag">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="menuPhoto" Text="Photo" Click="menuPhoto_Click"/>
<MenuFlyoutItem x:Name="menuVideo" Text="Video"
Click="menuVideo_Click"/>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton x:Name="btnPinToStart" Icon="Pin" Click="btnPinToStart_Click" Label="Like"/>
</CommandBar>
</Page.BottomAppBar>
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

39. Programming Status Bar
9/11/2018
Programming Status Bar
By default, Status Bar is visible and displays with a transparent background
The background color that displays is that of the containing Page
Can program the BackgroundColor and BackgroundOpacity
There is no way to control the Status Bar in XAML – code only
Show Status Bar
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ShowAsync();
Hide Status Bar
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().HideAsync();
Set Status Bar Background Color
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = Colors.Red;
Status Bar Opacity
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 0.4;
Get size of Status Bar
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().OccludedRect;
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

40. Progress Indicator in Status Bar
9/11/2018
Progress Indicator in Status Bar
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ShowAsync();
var progInd = Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ProgressIndicator;
progInd.Text = "Fetching...";
progInd.ShowAsync();
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

41. Application Content Area and System UI
9/11/2018
Application Content Area and System UI
Content area automatically resizes as Status Bar and/or AppBar are shown or hidden
(0,0) is top left below the Status Bar
Hide the Status Bar and (0,0) moves to top left of screen
Similarly, bottom of the application content area adjusts according to presence of AppBar
If Status Bar is transparent (the default) and AppBar is transparent, what shines through is the Page Background
Different from Windows where Page Background property is ignored
Developer can override this behaviour and disable automatic content area resizing:
ApplicationView.GetForCurrentView().SetLayoutBounds( ApplicationViewLayoutBounds.CoreWindowBounds);
Beware, must handle all resizing yourself when transient System UI displays
(0,0)
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

42. Soft Buttons Some devices have soft buttons instead of hardware
9/11/2018
Soft Buttons
Some devices have soft buttons instead of hardware
In Phone Settings, user can choose to display always dark, match background or match accent color
Buttons always visible when running apps or games
When playing video in Windows XAML Media element in a full window mode
Soft buttons are hidden
Any touch on the screen brings up the soft buttons and transport controls
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

43. System UI: AppBar and Status Bar
9/11/2018
System UI: AppBar and Status Bar
demo
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

44. Styles, Themes and ThemeResources

45. Style Resources for TextBlock
9/11/2018
Style Resources for TextBlock
A limited set of Style resources are supplied in the SDK
Suitable for common text display scenarios
Use F12 to examine style definition
In file C:\Program Files (x86)\Windows Phone Kits\8.1\Include\abi\Xaml\Design\generic.xaml
You can create your own styles
Use BasedOn to base on a supplied style
Set your own Property Values
Define in App.xaml or in the Page resources
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

46. User theme and contrast preferences
9/11/2018
User theme and contrast preferences
On Windows Phone, users can select light or dark background, and an accent color
Apps must work in both dark and light theme, unless they override it
Can also select text size and/or High Contrast
Apps should respect these settings
Note: Users’ selected accent color is exposed via Color="{ThemeResource SystemColorControlAccentColor}" Can use "{StaticResource PhoneAccentBrush}" when a Brush is needed
SystemColorControlAccentColor
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

47. Text Enlargement Support
9/11/2018
Text Enlargement Support
Making eyes happy starting with Windows Phone 8.1
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

48. Theming support in controls
High contrast, text enlargement and theme support built in to all standard controls
Themed & high contrast resources will update on app resume
Light/dark resources update on app resume

49. Testing for different themes
9/11/2018
Testing for different themes
Use the Device tab in Visual Studio to test your layout
Light theme
Dark theme
High Contrast
Different Accent colors
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

50. Overriding system theme
9/11/2018
Overriding system theme
If you do not override the theme, your app uses the Light or Dark theme selected by the user
Override the theme for your app in app.xaml:
You can also apply the RequestedTheme attribute to any control:
<StackPanel RequestedTheme="Light"> … </StackPanel>
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

51. Styles and Themes demo 9/11/2018
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.