locked
Windows 10 Universal App ( UAP) Styles

    Question

  • Hi,

    How to build styles which works for both Windows Phone and Windows Store i.e Single Style for Universal application. I'm building Windows Universal Apps, will it be single resource dictionary which will work for both windows phone and windows store tablet version. Will be separate styles (XAML) for Windows Store and Windows phone Universal Apps

    Thursday, April 23, 2015 10:41 PM

All replies

  • Hi Mahendar,

    For the most part XAML is not sharable and this is true for UAP application as well. There are different strategies you may consider such as keeping three dictionaries (common, Phone and, store). Another you may like is to separate out your styles by device.

    Raiford

    Friday, April 24, 2015 12:35 PM
  • I also need to add that XAML in UAP application has been enhanced to include things like Adaptive triggers, RelativePanel.

    Here is a Channel 9 video for each 

    Adaptive triggers - http://channel9.msdn.com/Series/Developers-Guide-to-Windows-10-Preview/09

    RelativePanel - http://channel9.msdn.com/Series/Developers-Guide-to-Windows-10-Preview/08

    Friday, April 24, 2015 3:51 PM
  • As Raiford says, the Windows Universal Platform provides much more flexibility for responsive design than Universal Windows 8.1 does. Converged controls, API contracts, and new Xaml features such as adaptive triggers and RelativePanel make it much easier for a single Xaml file to target multiple device types in many cases. In others you'll still want to provide separate Xaml files for different devices.

    Depending on your app's specific needs you may use different styles for different device sizes and capabilities even within the same executable.

    For more details check out Build next week!

    Friday, April 24, 2015 5:05 PM
    Moderator
  • Thanks Raiford and Rob. But as per blogs, windows 10 has builtin capability to adjust based on screen size. But I don't see it happening. For example  : If there is text block of size 14 , it should be displayed as 14 in Windows tablet and same on phone. I see font become bigger in size in windows phone. How can I make use of adaptive triggers to set Phone style when application is running in phone. Do I need to change for each and every control in page using adaptive trigger. Is there any other way of resolving style. Like I wil have 2 style one for Windows and one for Phone. based on device, it should pickup style key from either Windows or windows phone. But I cant have 2 same keys in 2 Resource dictionary. is there simple way of setting style based on device and screen mode  sizes

    Adaptive UX: Windows 10 provides the ability to use a single UI that can adapt from small to large screens. For developers with an existing Windows 8.1 app, you can quickly try this one out by (a) removing one of your UI projects (and going from three Visual Studio projects to one!) and (b) add the improved ViewStateManager to control how your UI adapts at runtime.

    • User controls: A number of our Windows 10 UI controls will determine, at runtime, how the customer is interacting with your app and render the appropriate user experience (e.g. on a laptop with a touch-screen, an app fly-out control will provide larger touch-targets if tapped with touch, as opposed to clicked with a mouse).

    Friday, April 24, 2015 8:40 PM
  • Hi Mahender,

    Unless you're doing something funky a size 14 textblock should display as size 14 on both a tablet and a phone. This probably won't be exactly the same since the two will likely have different DPI, but it should be close assuming scaling is set appropriately for both. Adaptive triggers wouldn't generally be used for the TextBlock size scenario, although it's possible.

    There will be much more information on Adaptive UX at Build next week. Please check that out (sessions will be available remotely on channel9) and then come back with specific questions after you get the details there.

    --Rob

    Friday, April 24, 2015 9:44 PM
    Moderator