build adaptive uis with universal windows apps - wordpress.com · build adaptive uis with universal...
Post on 14-Sep-2019
10 Views
Preview:
TRANSCRIPT
Build Adaptive UIs with Universal Windows AppsGreg LutzComponentOne, a division of GrapeCity
GOLD SPONSORS
Adaptive UIThe goal of adaptive UI is to adapt its layout to the needs of the user.
In our case Adaptive UI will mean adaption to different sized devices.
Universal Windows AppsUniversal Windows Apps are apps built for Windows PC/Tablet as well as Phone.
It combines the Windows Store project with Windows Phone project into a single solution with support for sharing nearly everything.
Universal Adaptive UIWith the Universal Windows App template we can now share UI easily across all devices.
This means our UI needs to be adaptive in order to get the most out of sharing.
Session OverviewOur goal is to build as close to a single UI as possible that is adaptive for all devices.
Introduction
Hands-on with Universal Windows apps in Visual Studio
Brief history of Windows Phone SDK
Adaptive UI Techniques (XAML/C# only)
What to share, when to share, why share
Windows Phone SDK Version History
Not compatible
Windows Phone 7.x (Silverlight)
Windows Phone 8.0 (Silverlight)
Windows Phone 8.1 (Silverlight)
Windows Phone 8.1 (WinRT)
Windows 8.0 (WinRT)
Windows 8.1 (WinRT)
Universal Windows Apps (WinRT)
Maintain existing apps
Universal Windows App TemplateThe Universal Windows App template in Visual Studio 2013 (update 2) lets you easily share code, XAML and resources to build apps that target all Windows devices.
Universal Template has 3 Projects:
1. Windows App project
2. Windows Phone App project
3. Shared project
1
2
3
DemoUniversal Windows App Template
What Can Be SharedCode
Business Logic
Converters
XAML
Pages & App Bars
User Controls*
Resources
Styles
Files
Shared
• Code
• XAML
• Resources
Windows AppWindows Phone
App
Why Share? Why Adaptive UI?For the user, sharing delivers a universal experience across all versions of your apps
For the developer, sharing is cleaner and results in less code to maintain
Sharing code can be beautiful and enjoyable (like an art form), but it can also make code more complex, so it’s not an end-all solution.
If we are sharing UI across multiple devices of unpredictable sizes we need to be adaptive aware
Adaptive UI Techniques for XAMLUse Primitive Layout Controls
Determine the number of views you need for each UI part
Know when to separate views or use the Visual State Manager
Share things like Controls, Styles, App Bars, Menus
Primitive Layout Controls (XAML)Grid
StackPanel
ListView
GridView
ViewBox
ScrollViewer
Grid vs StackPanel
GRID
Column and Row placement
STACKPANEL
Horizontal or Vertical stacking
Grid.Row=0
Grid.Row=1
Grid.Column=0 Grid.Column=2Grid.Column=1
Tip: Let children fill the space
ListView vs GridView
LISTVIEW
Vertical list
Similar to ListBox
GRIDVIEW
Horizontal and Vertical list (Tiles)
ListView can be customized to display as tiles, and GridView can display a flat list
ViewBox vs ScrollViewer
VIEWBOX
Stretches and scales child items to fit available space
Same output for all devices – not normally a good thing
SCROLLVIEWER
Adds scrolling to view content that doesn’t fit available space
*Most common approach
Abcdefghijklmnopqrst AbcdefghijklmnoAbcdefghijklmnopqrst Abcdefghijklmnopqrst
DemoViewBox vs ScrollViewer
Different Size ConsiderationsWindows Tablet Windows Phone
Landscape Portrait Split “Snapped” Portrait Landscape
Resolutions:1024 x 768 -2560 x 1600*
Resolutions:768 x 1024 -1600 x 2560*
¾ or ½ of Width Min Width: 320 Resolutions:480 x 800 –1080 x 1920
Resolutions:800 x 4801920 x 1080
*No maximum resolution
Adaptive UI – StrategyDo define at least 2 basic views for your UI
1. Landscape Tablet Landscape Tablet View
Portrait Tablet View (adjust margins)
Split Tablet View (adjust margins and headers)
2. Portrait Phone Portrait Phone View
Landscape Phone View
“Snapped” Tablet View (<500 px wide)
Maybe - Portrait Tablet View
DemoContoso Cookbook
Adaptive UI - StrategyDo simplify the Phone and Split UI (depending on complexity)
-Show less content
-Divide content
-Put content in a ScrollViewer
Don’t worry about resolutions - just follow good practice and your UI will naturally flow to fit
Use simulators to test different device sizes
You need only 1 or 2 real devices to test on as a minimum
Define different viewsYou can provide unique views for each scenario
Or use adaptive techniques to modify a single view
…with Primitive layout controls
…with VisualStateManager
…with shared styles, controls, app bars etc.
DemoAdaptive UI with Grid
Visual State ManagerThe Visual State Manager (VSM) allows you to easily manage UI states
The way it works:
You define your default UI in XAML
You define any number of states in the VSM that modifies the default UI to fit a certain UI scenario
A benefit is that it reduces the redundant UI markup for wanting multiple states for each view
DemoVisualStateManager
Percentage-based SizingWidth = 90%
In HTML this is a common styling behavior
In XAML we must use Behaviors SDK extension
Add a reference to Behaviors SDK (XAML)
DemoPercentage-based Sizing
StylesShare Resources – no problem
Share graphics – no problem
Share colors and Brushes – no problem
Share font styles – no problem
We can share Styles that have different values on each
Sharing Styles is extremely useful because it allows us to more easily share UI
Custom StylesWe can define a single shareable style with customized differences on each device. Here’s how:
Define custom ResourceDictionary with same filename in both projects
Merge custom ResourceDictionary in Shared/App.xaml
Windows Phone Windows Tablet
DemoCustom Styles
App BarsApp Bars provide users with easy access to navigation and common commands
App Bars are a feature of the Page (which can be shared in Universal projects)
Tips
-Top app bar is meant for app navigation
-Bottom app bar is meant for commands related to the current page or selected item
-Don’t put commands that are necessary to complete a workflow in the app bars
Adaptive App Bar TipsIf you have a small number of App Bar buttons they can be shared on all devices
Set the Page.BottomAppBar property to a CommandBar with shared commands
Only the first four buttons in the CommandBar will appear on the phone
Use the SecondaryCommands collections in the CommandBar and these will be translated to additional menu items on the phone
Windows tablet should have no more than 10 app bar buttons
You can even share menu flyouts
DemoUniversal App Bars
Device-specific CodeYou can write conditional code to handle differences between Windows Tablet and Windows Phone.
User pre-compiled #if/else directives:
#if Windows_Phone_App
// do something for Phone
#else
// do something for tablet
#endif
ControlsSome controls are exclusive to either platform and can’t be shared. Some have suitable alternatives
Hub Carousel
SearchBox AutoSuggestBox
??? Pivot
Some controls are the same but look different on each platform
ComboBoxes
Menus
DatePicker
Semantic ZoomSemanticZoom is a sharable control, but it behaves differently on a phone
In Windows Apps, it gives you a zoomed in and zoomed out view controller on pinch/stretch gestures
In Windows Phone Apps, it behaves like the LongListSelector and tapping grouped headers will zoom in and out.
DemoSemantic Zoom (Contoso Cookbook)
SummaryAdaptive UI’s can be created fairly easily while sharing much of the same XAML
Techniques for sizing on all devices-Primitive Layout controls that fill the given space-Percentage-based sizing of controls
Techniques for different UI for different devices-Visual State Manager-Custom, shared styles
This session has taken a look at sharing everything, but of course remember that not everything has to be shared
top related