2. Windows 8 Unleashed
Sponsored by Component Arts and Magenic
Technologies
Hosted by Microsoft
Magenic presenting in 4 cities throughout the
Midwest
Lectures, demos and hands-on labs
4. Magenic Technologies
Custom application development since 1995
Microsoft Gold Partner
Local Delivery, Global Reach
• Onsite - Minneapolis, Chicago, Boston, San Francisco, Atlanta, Ann Arbor
• Onshore – Magenic Delivery Center (MDC)
• Offshore - Manila
Leading authors and speakers on Microsoft technology
• Rockford Lhotka (inventor of the CSLA .NET framework)
Looking for Software Superheroes !
www.magenic.com
5. Agenda
Session I – Windows 8 Overview
• Hands-on Lab I
Session II – Location and Data
• Hands-on Lab II
• Lunch
Session III – Lifecycle and More
• Hands-on Lab III
• Windows 8 App Contest
9. 8 Traits of a Great Windows 8 App
Embrace Core
Principals
Roam to the
Cloud
Feel Connected and
AliveInvest in a Great Tile
Use the Right
Contracts
Snap and Scale
BeautifullyFast and Fluid
Modern Design
Language
12. Design – Leverage the Edge
Left is for “Back”
Right is for “Charms
Top and Bottom is for the App’s “App Bars”
Top and Bottom edges do the same thing
13. Fast and Fluid
• Cornerstone of how Windows 8 Apps should feel
• Key Aspects
• Speed and Responsiveness
• Animations
• Touch Language
• Windows has an animation library built in to help!
Command-Line Interface (CLI)Graphical User Interface (GUI)Touch User Interface (TUI)
14. Press and Hold to
Learn Tap for Primary Action Slide to Drag Swipe to Select
Pinch to Zoom Swipe from Edge Rotate to Rotate
Fast and Fluid – Touch Language
16. Use the Right Contracts
• Support communication between Apps
• Even though apps don’t know each other
• Many exposed via the “Charms Bar”
• Contracts include:
• Search to allow users to search data from your app
• Share to provide information to another app
• Settings to store Application Settings
• File Picker provides App to App file services
• Play To to play Media to connected DNLA devices
17. Invest in a Great Tile
A front door A complete picture
Draw you in Remind youPersona
l
While you were away
Connected
Next upAn extension to the App
18. Feel Connected and Alive
• Live Tiles
• Keep user connected to your app
• Draw the user in
• Used for “ambient” info
• Notifications
• Users should be allowed to opt-in
• Notifications interrupt the user
• Could be missed if user isn’t online
• Missed notifications aren’t saved anywhere
• Better Together
• Use notifications when it is ok for the user to miss the info
• Update live tile with longer term info
19. Roam to the Cloud
Multiple
Devices
App Settings
App State
Users will likely have multiple devices
• Desktop, Laptop
• Tablet
• Phone
Save settings to the cloud so that applications that run on
multiple devices have consistent configuration. When user
changes a setting on one device, it should be reflected on their
other devices
Application state should be persisted to the cloud and
consumed by all devices:
• Current page in a document
• Current level in a game
• Etc.
20. Embrace Modern App Principals
Fast and Fluid Win as One
Authentically
Digital
Do More with
Less
Pride in
Craftsmanship
For more on Windows 8 App Design go to design.windows.com
21. Windows 8 Architecture
Windows Kernel Services
.NET
SL
Win32
Internet
Explorer
C#
VB
C / C++
HTML
JavaScript
Desktop Apps
(x86/x64 Devices
Only)
Windows Runtime APIs (WinRT)
Application Model
Communication
& Data
Graphics &
Media
Devices &
Printing
C /C++ C# / VB.NET JavaScript
XAML HTML5
Modern Windows 8 Apps
(ARM & x86/x64 Devices)
The New Way Works on ARM Devices as Well The Old Way Still
Works
22. Value of Windows 8 Apps
Windows Kernel Services
Windows Runtime APIs (WinRT)
Application Model
Communication
& Data
Graphics &
Media
Devices &
Printing
C /C++ C# / VB.NET JavaScript
XAML HTML5
Modern Windows 8 Apps
(ARM & x86/x64 Devices) • Runs on ARM Tablets
• Windows Store
• Contracts
• Search
• Share
• Printer
• File
• Play To….
• View States
• Full
• Fill
• Snap
• Application Lifecycle
• & much more!
23. Windows Store = Opportunity
Windows 7
690M
Android
345M
iOS
190M
Mac
32M
As of March, 2012 - IDC
25. Development Tools
• You must be running Windows 8!
• Go to dev.windows.com
• Visual Studio 2012 Express for Win 8
• Online documentation
• Windows, Live and Advertising SDKs
• Sample Apps
• Full Versions of Visual Studio can be
used
Visual Studio
2012
26. Design Tools
• design.windows.com
• UX Documentation
• UX Guidance
• Blend for Visual Studio
• Included with Visual Studio 2012
• Can open VS Solutions & Projects
• Provides a more designer oriented UI
• Visual Studio and Blend share features
• Has an interactive mode for HTML5/CSS
• Better tool than Visual Studio for
• View States,
• Animations
• Gradients & More
Blend for Visual
Studio 2012
27. Windows 8 Simulator
Windows 8
Simulator
• Still requires Windows 8
• It’s a Simulator NOT An Emulator
• Simulates
• GPS
• Touch & Gestures
• Screen Resolutions
• Portrait & Landscape Orientations
33. App.xaml & App.xaml.cs
• Partial files defining a subclass of the Windows.UI.Xaml.Application class
• Subclass name is “App”
• Entry point of the application
• Supports Lifecycle Events
• OnLaunched
• OnSuspending
• OnActivated
• Supports Contracts (Search, Share, FilePicker)
• Stores Application Wide Resources (in App.xaml)
• Starts initial page for the app in OnLaunched
// Create a Frame to act navigation context and navigate to the first page
var rootFrame = new Frame();
if (!rootFrame.Navigate(typeof(MainPage)))
{
throw new Exception("Failed to create initial page");
}
// Place the frame in the current Window and ensure that it is active
Window.Current.Content = rootFrame;
Window.Current.Activate();
34. MainPage.xaml & MainPage.xaml.cs
• Partial files defining a Subclass of Windows.UI.Xaml.Controls.Page
• Subclass name is “MainPage”
• Windows.UI.Xaml.Controls.Page supports Navigation
• Frame property references the Frame that contains the page
• OnNavigatedTo event handler
• OnNavigatingFrom event handler
• OnNavigatedFrom event handler
• Use the .xaml document for
• Storing page level resources
• Defining Control Instances declaratively
• Use the .xaml.cs file for
• Code behind
• Implementing Page navigation events
• Page logic
• Consider using MVVM rather than using code-behind
35. Project Folders
• Assets
• Logo images
• Splash Screen Image
• Common (Depends on project type)
• StandardStyles.xaml Resource Dictionary
• BindableBase class
• Boolean Converters
• LayoutWarePage class
• & more
• DataModel (Depends on project type)
• Arbitrary folder. You can create your own
• Contains classes for data model
37. Good By MessageBox, Hello MessageDialog
• Command bar that supports up to three custom UICommand
buttons
• If no commands are specified a default close button is shown
• Dims the screen & Blocks interaction with the rest of the app
• Should be used sparingly
• MessageDialog and UICommand from Windows.UI.Popups
namespace(new MessageDialog("Hello, Windows 8")).ShowAsync();
38. Windows Run Time Asynchronous Operations
• Applications based on WinRT are inherently asynchronous
• Calls to Network Services
• Working with the File System
• Anything that might cause event the perception of delay
• By convention, asynchronous method names end with “Async”
• MessageDialog messages are shown Asynchronously:
(new MessageDialog("Hello, Windows 8")).ShowAsync();
• Previous asynchronous programming models have been difficult
• WinRT supports a simpler async programming model
• The C#, VB.NET, JavaScript & C++ langauges use this functionality
39. Using await with Aysnc operations
• C# await keyword wraps async calls up
• Allows you to call async calls as if they were synchronous
• Still benefit from async nature. UI remains responsive
• Much simpler programming model
• Compiler does all the heavy lifting for you
• No event handlers, callbacks, passing async state, etc.
• To use await, the calling method must be marked as async
private async void ShowDialogButton_Click(object sender, RoutedEventArgs e)
{
MessageDialog dialog = new MessageDialog("Hello, Windows 8");
dialog.Commands.Add(new UICommand("First Command", null, 0));
dialog.Commands.Add(new UICommand("Second Command", null, 1));
var clickedCommand = await dialog.ShowAsync();
StatusText.Text =
string.Format("You clicked the "{0}" button!", clickedCommand.Label);
}
41. Splash Screens
• Basic Splash Screen defined in Package.appxmanifest
• Splash Screen Image (supports multiple scales: 100, 140, 180)
• Background Color
• You may want to extend the Splash Screen display time
• Your App needs to load additional resources before it is ready
• Provide loading progress to the user on the splash screen
• Better than an incomplete or unresponsive UI being displayed
• Splash Screen Guidance: bit.ly/w8ussgl
• How to extend the Splash Screen: bit.ly/w8ussext
42. Splash Screen Scale Factor Images
• Windows 8 can be run on numerous devices & resolutions
• Can automatically select appropriate image for device
• You need to provide image at multiple resolutions:
• Include the scale factor in the actual file name:
SplashScreen.scale-100.png
SplashScreen.scale-140.png
SplaceScreen.scale-180.png
• Refer to the image WITHOUT the Scale Factor:
SplashScreen.png
• And
• For more information, read: bit.ly/w8uscale and
bit.ly/w8ussgl
Scale Factor Target Screen
Resolution
Splash Screen Image
Size
Splash Screen Image Name
100% (Original Size – no
scaling)
1366 x 768 620 x 300 ImageName.scale-100.ext
140% for HD Tablets 1920 x 1080 868 x 420 ImageName.scale-140.ext
180% for quad-XGA Tablets 2560 x 1440 1116 x 540 ImageName.scale-180.ext
45. Controls Overview
• Controls are classes that provide a User Interface
(usually)
• They make building your App easier
• Layout controls help position other controls on the page
• Text controls to display text or allow the user to edit text
• Button controls to allow user to invoke actions
• Checkboxes and Radio Buttons to set options
• Etc.
• Where do you get Controls?
• Many are included with the Windows 8 SDKs
• Third Party toolkits are available from control vendors
• Create your own if you can’t find on that meets your needs
46. Types of Controls
• Layout Panels (Canvas, Grid, StackPanel)
• Buttons (Button, HyperlinkButton)
• Toggle Buttons (ToggleButton,CheckBox, RadioButton)
• Static Text (TextBlock, RichTextBlock)
• Text Editors (TextBox, PasswordBox, RichEditBox)
• Range Controls (Slider, ScrollBar)
• Media Controls (Image, MediaElement)
• Items Controls (ListView, GridView, FlipView)
• Progress Controls (ProgressBar, Progress Ring)
• Graphics Elements (Rectangle, Ellipse)
• Much More….
47. Adding controls to your page
• Using the Toolbox
• Type the XAML directly
• Create in Code-Behind
Object Instance Name Property Name & ValueNamespace & Class
<local:MyUserControl x:Name="MyControl" Content="XAML Rocks!" />
Button button = new Button { Content = "Button" };
rootGrid.Children.Add(button);
48. Assigning Properties using the Properties Window
• Object Name and Type
• View Properties or Events
• Search for properties by name
• Arrange properties by
• Category
• Name
• Source
• Brush Editors
• Advanced Properties
• “Property Mark” to set value source
• Default (Reset)
• Local
• Resources
• Data Binding
50. Assigning Properties in Code Behind
• Assume the following is declared in XAML:
• Get a reference the control
• By using its name (x:Name)
• Walking the control tree and finding it manually if it isn't named
• Use code to set the objects property values
<Page ...>
<Grid>
<Button x:Name="MyButton" Content="My Button" />
</Grid>
</Page>
MyButton
Grid grid = this.Content as Grid;
Button myButton = grid.Children[0] as Button;
myButton.Content = "Set in Code";
myButton.Width = 100;
myButton.Margin = new Thickness(10, 20, 10, 20);
myButton.Foreground = new SolidColorBrush(Colors.Orange);
51. • Parent Properties that are “attached” to a child element
• Property values are set by the child using the format:
ParentType.Property=“value”
Example:
<Canvas x:Name="LayoutRoot">
<Rectangle
Width="100" Height="100" Fill="Green"
Canvas.Left="10" Canvas.Top="10" />
<Rectangle
Width="100" Height="100" Fill="Yellow"
Canvas.Left="80" Canvas.Top="80" />
</Canvas>
Attached Properties
10
10
80
80
52. Assigning Event Handlers
• Events allow you to respond to the user interaction with
a control
• e.g. When the Click on Button, or change text in a
TextBox
• You can assign the method as an event hander
• In XAML
<Button x:Name="ShowDialogButton“
Content="Show Message Dialog“
Click="ShowDialogButton_Click"/>
• In Code Behind
ShowDialogButton.Click += ShowDialogButton_Click;
53. Applying Styles
• Windows 8 Projects ship with a ton of available styles
• Change the look and feel of controls
• Applying styles is easy:
• Right click control
• Select “Edit Template”
• Select “Apply Resource”
• Select a resource to apply
• Resource Dictionaries
• AssetsStandardStyles.xaml
• Default Styles:
C:Program Files (x86)
Windows Kits
8.0
Include
winrt
xaml
design
54. The MVVM Pattern
• MVVM Stands for
• Model – The data your application uses
• View – The user interface that the user sees and interacts with
• View Model – Manages the View / Model interactions
• Provides
• Separation of business logic from UI/UX Code
• Easier Testing of both Business Logic and UI Logic
• Easier way designers to implement UI with no code
• Easier migration between platforms (Windows Phone 8 / Windows
8)
• Relies on
• Models that use standard web services or data access APIs
• View Models that Implement
• INotifyProperty Changed on their public properties
• Expose actions as properties with an Icommand type
• Views that have
• Controls with DependecyProperties that bind to View Model properties
• Controls that inherit from ButtonBase that bind to View Mode
ICommands
57. Navigation Basics
• Most applications have more than one screen or “Page”
• If you have more than one Page, you need to
“Navigate”
• Windows.UI.Xaml.Controls.Frame Class
• Maintains navigation History
• Navigate method to navigate to a specific page
• CanGoBack and CanGoForward Properties
• GoBack and GoForward Methods
• Windows.UI.Xaml.Controls.Page Class
• Target of navigation. Individual pages inherit from this.
• Provides a reference to the Frame it is in
• Supports Navigation caching (keeping the same copy in
memory)
• OnNagivatedTo, OnNavigatingFrom & OnNavigatedFrom
events
58. How Navigation Starts
MainPage
Splash Screen
• App Starts and Windows automatically shows the Splash Screen
• App.OnLaunched creates a new Frame
• Navigates to MainPage
• Sets the Frame as the Window’s Content
• Activates the Window
• The Splash Screen is dismissed and the MainPage Shows
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Simplified code. Refer to App.xaml.cs for actual code
var rootFrame = new Frame();
rootFrame.Navigate(typeof(MainPage))
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
59. Navigating to a new Page
Page 2MainPage
• Code on a current page uses the Frame.Navigate method to navigate to a new
page
• Initial Page’s OnNavigatingFrom and OnNavigatedFrom events fire
• A new instance of the target page type is created, and the new page is navigated to
• Target Page’s OnNavigatedTo event fires
• The Initial Pages state is discarded unless its NavigationCacheMode is Enabled
Frame.Navigate(typeof(Page2))
60. Navigating back to a Previous Page
MainPageMainPage Page 2
• Code on the Current page checks Frame.CanGoBack
• If it Frame.CanGoBack is true, the current page calls Frame.GoBack
• A new instance of the previous page type is created unless it was Cached
• Target Page’s OnNavigatedTo event fires
• The Current Pages state is discarded unless its NavigationCacheMode is Enabled
if (Frame.CanGoBack)
Frame.GoBack();
61. Passing objects during Navigation
• Frame.Navigate(TypeName,Object) can pass objects
• Target page uses OnNavigatedTo’s NavigationEventArgs
• Target page needs to know the type of the object
• Cast NavigationEventArgs.Parameter property to that type
• Target page can then use the object as needed:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
string name = e.Parameter as string;
if (!string.IsNullOrWhiteSpace(name))
{
tb1.Text = "Hello, " + name;
}
else
{
tb1.Text = "Name is required. Go back and enter a name.";
}
}
62. LayoutAwarePage Navigation Functionality &
Issues
• LayoutAwarePage is a class provided by Visual Studio
• Included when certain project or item templates are used
• Grid App & Split App Project Template
• Basic Page, Grouped Items Page, Split Page, etc, Item Templates
• Implements
• OnNavigatedTo & OnNavigatedFrom overrides
• GoHome, GoBack and GoForward methods
• If your page overrides Navigation event handlers:
• Call base.OnNavigatedTo from your own OnNavigatedTo handler
• Call base.OnNavigatedFrom in your own OnNavigatedFrom handler
• Ensures that the LayoutWarePage class functions properly
Modern design language for a consistent UIFast and fluid as they respond to touch keyboard and mouseSnap and scale across multiple devicesUse the right contracts as they interact with other apps and windowsA great live tile that communicates with the userFeel connected and alive as the user interacts with themRoam to the cloud so that key data can be shared across devicesEmbrace core design principles for ease of use and consistency across apps
The design language has a consistent silhouetteExamples – Newsreader, Twitter, Stock, Social NetworkingPage through eachEach has a distinctive user interface but all are consistently laid outYou can lay yours out in the same consistent way by using the project templates that are available in Visual StudioTemplates enforce consistent positioning, spacing, typography ensuring you apps have a consistent look and feel while having a distinctive user interface
Another key aspect of Windows applications and the design language is that feature content before chromeContent is what should leap out at the user as opposed to elements only used for navigation (like folders, menus), separation (like content panes) and actions (like buttons and menus)Example: Windows 7 version of an RSS content readerTo feature content over chrome, how can we restructure the app to just thatTake away the content to see just the chrome Take away the chrome to see just the contentTake away linesFeature the content more by making the articles easier to read and using typography to indicate the headersRemove buttons by pushing them off into the windows 8 app bars or into the system wide Charms barAlign to the grid and give it more styling
Another key aspect is that they leverage the edge of the screenYou have to image a user holding a tablet using you applicationSwipe for left to see list of apps they have run previously and tap to resume themSwipe from the right to access the system charmsLeft and right predetermined by the systemYour application can leverage the top and bottom edgesSwipe from the top to see the top “App Bar”Swipe from the bottom to see the bottom App BarTop app bar generally used for quick navigation, Ex web browser favorites or historyBottom used to access application-specific commands
Great windows 8 apps are also fast and fluid.Focus on touch: as soon as a touch something on the screen the system/app should respond immediatelyWhereas with keyboard or mouse the response time is important but not as important has touch.
Touch first UI means we have to have a consistent touch languageIf the user knows how to interact with one application they know how to interact with the other. The experience should be consistent.
Great windows 8 app should snap and scale beautifullyThe user can run your application Full screenSnapped or Filled if the system is wide screenExampleTwitter app fullTwitter app filledTwitter app snappedSnapped, Filled side-by-side2 UisSnapped view less content but still allows the app to remain useful
Windows apps use the contract provided by the windows 8 runtimeContracts forSharing data with other appsPicking files from the systemAll a user to search data in your apps (even) though your app may not be runningPlaying media out to DNLA capable devices (Digital Living Network Alliance is a non-profit trade organization). The DLNA defines standards that enable devices to share stuff - photos, video, music These are Contracts your app can leverage and are typically exposed to you via the system charms bar but could also be invoked from your application if you wish. For example by adding a “Share” button to your app bar that invokes the Share charm as if you clicked from the Charms bar
Windows 8 application have a great live tileMore than just an iconAllow you to communicate with user and share updated informationThey can be a front door to your app but can also be constantly sharing new information and constantly updating the live title
Ambient – there when the user looks at it but doesn’t bug themNotifications – more interruptive way to communicate with the userCalled ToastsThey go awayNo history is maintainedNot critical
Helpful to the user to take the setting they save on one device and share them with another device by persisting that data up into the cloud
Great applications embrace modern application principalsPride -Fast and Fluid - responsiveDigital – Ex. content before chrome. Removing things that aren’t real and focusing on the contentMore with less – Great and doing a few things greatWin as one – Use contracts to consume from and provide data to other applications
Windows 8 ArchitectureWindows Kernel ServicesOn top of kernel we can run what are traditionally called Desktop Apps -Only run on x86/x64 devicesHistorically, developing these we useC/C++ on top of Win32Most recently most use C#/VB.NET .NET SLHTML apps using JavaScript running inside the browser. Ex. Office 365 appsThe old way still works. Will continue to run, you can create news ones, but only run on Intel-based devicesTo run Modern Win 8 apps (use the Win8 App model) on new army of consumer-based ARM devices, need to run on top of new Windows Runtime API, or WinRT API. Provides:Application Model (process lifecycle – suspend, resume)Communication and DataGraphics and MediaDevices and PrintingTo develop apps that use this new API you can still useXAML (WPF, Silverlight devs)C#/VB.NETC/C++Or now you can write 1st class windows apps usingHTML5 (markup) + JavaScript (code-behind) (Web devs) –, Not hosted in browser!Can run on x86/x64 intel-based devices or ARM devices
ValueRun on ARM tablets, not just Intel devicesPublish to Win8 store allowing users to download and install them. 100s of millions of devicesAccess to contractsView State flexibility (Full, Fill, Snap)Application Lifecycle and much more.
Windows Store = Opportunity for developersComparisonGo back and think about writing an application for:The Mac, according to IDC as of March 2012, 32M devices. Great market.Ios, better chance of making money, 190M devices – iPhones, iPadsAndroid, significantly larger opportunity, 345 MInstalled based on Windows 7 larger than all combined w/ projected 690 M devices with Win7 installed. Best opportunity assuming a large number will upgrade to Win8. Even better if you include XP or Vista. Largest money-making opportunit for you as developer with your app Windows store.Number according to the IDC - International Data Corporation (IDC) is a market research, analysis and advisory firm specializing in information technology, telecommunications and consumer technologyOptional: Animate number bubbles
How do you go about developing apps for windows 8?
You must be running on Windows 8 – New Windows Runtime API is only available on machines running Windows 8Go to dev.windows.comNeed Visual Studio 2012Free copy of Visual Studio 2012 Express for Win 8 – Create Win store apps. (Note: Different express versions for Desktop and Web)Online documentation– docs and guides to help you create great windows appsSDKsSamples AppsFull version of VS 2012 can be used(VS 2012 Professional and up - multi-tier applications across the web, cloud, and devices in same ide. Extensive tools for app debugging and profiling, Verify code quality with unit testing and an extensible testing framework)
Also a ton of great content around designWe talked about what makes a windows 8 app greatDocs and guidance can be downloaded from design.windows.comTool focused on design – Blend for Visual StudioIncluded with VS 2012
VS and Blend both include a Windows 8 simulatorStill requires you be running on Windows machineSimulator not and emulator. An Emulator - focus on exact reproduction of behavior of specific devices. However, simulates things your physical computer may not haveGPSTouch and Gestures if you don’t have a touch screenScreen Resolutions your computer may not support
First thing to do when creating a Windows 8 application is to 1st choose which kind of project you want to create:Under Installed Templates you’ll see this Windows Metro style option, selectBlank – Clean Windows 8 you can start with and build from the ground upGrid.SplitBoth you create an app that displays data from a data source, Class Library – Create classes that you can share across multiple .NET projects (C#, VB.NET, C/C++)Windows Runtime Component – Can be shared not only with other .NET language projects but with HTML/JavaScript projects as wellUnit Testing Library – you can use for testing your Windows 8 apps
Blank gives a blank project with a blank main page – no UI, no controls no code behindUse to start from scratch, excluding many things in the other templates that don’t meet your needs
If you know that you are going to be working with structured data, the Grid template is good place to start.Implements a Hub and spoke pattern for a 3-tiered hierarchy on top of your grouped data.HierarchyYou have a collection of items, lets say they are customers We retrieve those customers maybe grouped by countryThe hub allows us to see all the groups, navigate into a group to see all the customers for that group – in this country – and then navigate to a customer to see detailed content for that customer.Grid app template gives you pages for viewing data at these different levels in the hierarchyHub page – GroupedItemsPage – see groups themselves and items from the group, maybe most popular items. Swipe to the right to see all the groupsTap on a group to see the Group page – GroupDetailPage – see group info like title and description and all the items in the groupTap on an item to see Items page – Items – See item detailUse the navigation buttons to navigate back up to the group or to the Hub
If your data isn’t as structured or doesn’t to be shown in the 3-tier hierarchy you can started with the Split App project template.Gives you a 2-tier hierarchy for displaying that same set of grouped dataHierarchyItemsPage – just shows the groupsAs you navigate into the groups, there’s the SplitPage – that shows the items on the left side of the page and as you click an item, its detail is shown on the right side of the Page:If you don’t need the hierarchy of the Grid App, the Split app give you a slightly simpler structure
In all the projects you’ll notice there is a Package.Appxmanifest file.Key metadata file that is used by the windows store as you package up your app and deploy it to the store for sale.Metadata like DisplayName, Logo, Publisher (manufacturer), version information, etc.XML file that can be edited as XML, however, Visual Studio has visual editor for your app manifest that makes it easier to edit properties.To open the visual editor, double-click on the Package.Appxmanifest file in Solution Explorer
Another key pair of files in your application project template are the App.xaml and App.xaml.cs filesPartial class filesLifecycle EventsOnLaunched is called when your app is launched from a cold startOnSuspending is called when the user navigates away from your app and allows you to save application stateOnActivated is called when the app is activated and allows you to restore application stateWhere you write code to support contractsApp wide resources – ex. common styles, value converter that you want to use throughout your applicationin OnLaunched event is we set the initial UI that the user sees when your app is launchedCode snippet from Basic app project templateCreate new instance of a frame. A frame supports navigation across multiple pages of an applicationTell the frame to first navigate to a new instance of the MainPageTell the current window to use the root frame as it’s contentThen we activate the window which shows the MainPage.
MainPage.xaml and MainPage.xaml.csDefines a class called MainPage that is a subclass of the Page ClassBenefit of the Page base class is that it has built-in support for NavigationFrame propertyEvents handlers you can implement.xaml document is where you define your UI elementsPage level resourcesDefine Controls declarativelyMention MVVM here. Will talk a little bit about it later but won’t talk a whole lot about it in this course. Study on your own. Wanted to mention best practices where we can
You’ll notice that all the apps have some additional folders. All of them haveAssetsImages for live titles, logo, splash screenCommons (Depends on project type)All have StandardStyles Resource Dictionary – back button, page headerBindableBase – base class to you when you have an object that is source of data for binding to UI elementsBoolean Converters – Convert between boolean type properties in your bound data and UI element properties of different types, ex. VisibilityConverterLayoutAware page – Subclass of page that has additional properties and methods for pages above and beyond the Page class and that need to react to changes in layout such as the Full, Filled and Snapped viewsDataModel (also depends on project type)Contains basic sample data model class you can leave as is and use as a reference or your can modify as needed
So, lets look at creating a project from one of these project templates…Blank AppShow start screenNavigate to VS 2012 (optionally show how you can just start typing while on the start screen to initiate a search suggestions based on what your typeLaunch VS 2012 (Express?)New ProjectInstalled TemplatesWindows Metro StyleCreate Blank App demo in before folder of Blank App demo folderOpen Package.Appx.manifest talk about propertiesCapabilities – What capabilities the application uses. Needs to be set correctly in order to be accepted into the storeDeclarations – like the Contracts we supportPackaging – set properties to ready the app to be entered into the storeShow hoe you can open in XMLApp.xaml.csOnLaunched – called by the Windows runtime. Point out rootFrame snippet, set content, activateMainPage.xamlHas UI markupGrid – standard background defined in StandardStyles.xamleStandardStyles.xamlAssetsRun itTargetsRun on local machineShow different ways of closingMouse over top of screen. Drag down to bottom of screenAlt-F4Alt-Tab to return to VS and stop debuggingRunning it installed the app. Go back to start screen and find it. Default title imageYou can right-click app, click uninstall. Don’t have to, but after debugging a number of apps the screen can become clutteredGrid AppGridAppDemoDifferent – no MainPage.xaml. Which one runs first? Find OnLaunched in App.xaml.cs. GroupedItemsPagepPassed string with All groupsOpen GroupItemsPage – follows design guidance (design.microsoft.com) in terms of spacing, topography, etc.On Hib Page, can see groups and some itemsClicking group takes to GroupDetail pages where we can see.Clicking item takes to Item Details Page to see itemClicking back takes me backNotoce also other items in the Common folder – BinableBase, LayoutAware page inherits base page class. Inherentaddtl props and methoid, switch visula states, setting up default ViewMode, etc., conertersDataModelinplemebntdefauilt data model. Keep or dropChange to run on simulator and lauchSim opensEmulate tocuh, pinch toom, rotate, screen resolutions that my device can’t suppoer, set GPS coord, take sreen shotsScroll through groups on main pageClick Group Title to see group detail and list of itemClick item to see item detailsBack button to group, back button to HubClick on item on hub to item. Click back…Back to hubMain window, grab window from top, darg down, bring left, snap it…Display changes and shows items differentlyStart weather app to see snap and filled. Grab splitter to switch between which app is snapped and which one is filled.Drag all the way over to see full app. Weather app got supsendedMove mouse to left edge to see other appsSwitch to touch mode and swipe from left to switch to weather app.Touch on righrt side to show charmsTouch bottom to see app bar BUT default Grid app doesn;’t have one so you can’t see it hereSwipe form to or bottomGo to VS and stop debugging
Seen hello world before. Used message box in pastWe use MessageDialogEach custom command has it own delegate we can respond toIf No commands…Dim screen and block UI.Use sparingly because it block user flowSnippet…ShowAsync
Asycn ops are prevalent. WinRT apps are inherently asyncWinRt apps use network etc. Anything that is resource intensive in RT is called asyncBy convention name ends in async. Not required just conventionSimplereasyncprogramminmg model, languages C# and VB support it
C# await…wraps up async call, let it occur, and react as if synchronousOther UI actions remain responsiveSimpler…compilier doesn’t heavy liffting. We have to register even handlers, callback, pass async stateDialog.ShowAsync returns command object that user clicked and you can access that info in code
Show demo of the message dialog***OpenMessageDialogDemo in VS or already an instance running with it.MainPage has buttons in place.Scroll dowsn Bottom textblock used to show infor3 buttonsSimple message dialog. Code behindAdd code to create Message dialog…from XXX namespaceMessageDialog dialog = new MessageDialog(“”, “”)Dialog.ShowAsync()Run itClick buttomTalk about message dialog, with Close button for free, modal natureClose ro dismissCustom dialogCustomize commands – gets name, delegate and idCreate named delegate – copied code snippet:Private void NameDelegateCommandHandler(UICommand command){StatusText.Text = “You clicked the \Named Delegate\” button”}This is just the responseIn CustomDialogButton methods create a new MessageDialogMessageDialog dialog = new MessageDialog(“Pick one of the custom commands”, “Custom Commands Demo”)Create command objects (snippets)NamedUICommandnamedDelegateCommand = new UICommand(“Named Delgate”, NameDelegateCommandHandler)AnonymousUICommandanonymousDelegateCommand = new UICommand(“Anonymous Delegate”, delegate(UICommand command) {StatusText.Text = “You clicked the \”Anonymous Delegate\” button”)});LambdaUICommandlambdaDelegateCommand = new UICommand(“Lambda Delegate”, (c) => StatusText.Text = “You clicked the \”LambdaDelegate\” button”);Dialog.Commands.Add(namedDelagteCommand);Dialog.Commands.Add(anonymousDelagteCommand);Dialog.Commands.Add(lambdaDelagteCommand);Dialog.ShowAsync()Run it. Click Show with Custom commandsClick each to show resultsAwait the Message dialog – just want to tell the dialog to show, capture details and respondAsync void AwaitDialogButton_Click()MessageDialog dialog = new MessageDialog(“Click the command button”, “Await Dialog Demo”)Dialog.Commands.Add(new UICommand(“First”, null, 0)Not passing in delegate. Passing Command idDialog.Commands.Add(new UICommand(“Second”, null, 1)Dialog.Commands.Add(new UICommand(“Third”, null, 2)NOTE: 3 commands maxVarselectedCommand = await dialog.ShowAsync()StatusText.Text = string.Format(“You clicked the \”{0}\” button”, selectedCommand.Label)….….switch() on command Id and change StatusText.Foreground. ExStatusText.Foreground = new SolidColorBrush(Colors.Orange);RunShow label and color in status textShows message can be as simple as old message box or more complex like we showed with commands.
Common in all win8 appsGrid and Split – automatic images supplied to youBehavior is provided by runtime as instructed in Package.appxmanifest. Pulls splash screens for youCan pull based on screen resolutionCan specify backgroundRuns for as long as the window isn’t activatedExtending – sample see link. Better loading experienced…progress bar
Can be run on numerous devices …Links…about scaling and splash screen guidance
SpashScreenDemo project loadedSplashScreen.pngPackage.appxmanifestSplash ScreenDefault backgroundDemo in simulatorDisappears quicklyDelete exsiting imageAdd new versions from 03 Splash Screens demo folder…3 scalesContinue to refer to base named in appxmanifestTry Run with bad based name. FailedFixRun. See 120 scale factorChange res in simulator to 1920xRun from start screen. See 140Changed to higher resDemo again and see 180 image being usedLeave it to user to display extended splash screens
Ass you build your app, you are goin to work with otlots of controls
Type in XAMLNamespace. Declared in header of controlGive instance a name using x-colon attributeSet any number of properties and values
Properties window – adds xaml for youBrushes – solid, gradient, media ?Advanced – expand or collapseProperty mark - square
2 notationsSimple - Attribute notationComplex – Element notationEx. Rectatngle.Fill as child element
Name property so you can access in codeOr you walk visual tree dotproperty notation to set values
Difference in properties in XAML you may not be used toAttached properties are properties assigned to child UI elements based on the type of their parent element
Assign in XAML or in Code-behind
Another common thing to do in XAML is to restyle controls.You can restyle just about any controlYou can create your own styles
Designers can provide UI elements with styling and layout without having to write any code.For designers who aren’t developers, developers can provide ViewModels to bind to.Use simple data binding to provide data to UI elements, including binding to values and even commands for buttons.MMVM LightCaliburn Micro
He skipped
LayoutAwarePage – overloads page methods to allow saving of state or retrieving of stateFunctionality for snapped and filled view statesSave state as app is being suspendedIf you inherit, call base class
