Common XAML UI Framework: Notes BUILD 2014
We now have a common UI language which allows us to share views, but we can still have separate implementations for certain parts of the view to cater for device differences and usage.
The new Universal App\s let us share code and any assets such as scaling folders, resource files, XML files, Views and more. The updates for Visual Studio that includes the new Universal Apps is available in express edition as well.
This is how you do it:
To create a new project select the Universal Apps node and select one of the available items
If you have an existing app, WP8 or Win8, right click and select Add Windows Phone 8.1 (if the other project was Windows Store App), and then confirm. This updates the project.
This add not only the Windows Phone 8.1 project but also a Shared project, where everything shared between the projects will be added.
When you run the application to switch between the phone emulator or windows simulator (etc), just use the dropdown menu next to run.
What is shared in XAML?
These are considered primitive controls and are the same:
Layout controls such as StackPanel, Grid, Border and Panel
Buttons, ProgressBars, Slider, CheckBox etc
Shapes and Path
These have the same API but have different look and behavior
Noticeable change with AppBar. In WP8.1 you cannot use AppBar, you use the CommandBar
Flyouts on phone can go 100% fullscreen – which they do not on the desktop experience
Mediaplayer for WP is different
With Ads you need to reference the SDK in both projects
Can’t be used in shared markup language, but you can use #if #defs or abstractions to access the library in code-behind.
Hubcontrol on the phone gives a wrap around effect with paralaxing effect in the header, you can have the same effect on the background
Catering for different UIs
By creating the same UC in both projects (win8.1 and wp8.1) and referencing the control in the shared view the correct UC will be used and added to the package. This way we can create a composite UI where we cater for differences in the UI while being able to share most of the UI.
Amount of chrome differs from the two platforms (System Chrome), and Windows Phone has more chrome. You have the top row that displays battery, connectivity etc- the system tray. In 8.1 you can choose if you want to take up all of the window with DesiredBoundsMode(AppliacationViewBoundsMode.UseCoreWindow)
The command bar is also a part of System Chrome in WP, but not in Windows Store Apps
Navigation is the same
Animations- Theme animations and theme transitions
Text- New features made available to WP developers such as
Accessibility features IsTextScaleFactorEnabled exists for WP not Win8
65 different tile templatesor so
XamlRenderingBacgroundTasklets you create custom tiles
Accent color returns just one color on Windows / on the phone device the one you’ve selected. Text styles for phones are available for phone as before.
Focus visuals do not exists on mobile
Theme overrides and high contrast are now the same
Last modified on 2014-04-04