Presentation is loading. Please wait.

Presentation is loading. Please wait.

Getting Started Building Windows Runtime Apps

Similar presentations


Presentation on theme: "Getting Started Building Windows Runtime Apps"— Presentation transcript:

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.

52


Download ppt "Getting Started Building Windows Runtime Apps"

Similar presentations


Ads by Google