I have just started to develop in universal app. I have developed app in Windows 8 store apps and also developing Windows Phone 8 and Windows Phone 8.1 (SilverLight) Apps. Question is related to universal app in Windows and Single UI which is created in App. Share folder.
1 For web there is word like responsive UI. to create there is media query to write css.
I know css is same as we can create resource with for xaml . I can get resolution form c# and I can create different UI for different resolution and I can visible collapsed according to resolution but is there any single way which automatically adjust according to design.? ( this question is related to data binding controls specially...)
There are several techniques to adjust the page's design to the size, shape, and resolution of the window. These are usually used together.
The first is to use dynamic layout controls instead of hard-coding positions. For example, use a Grid control with * columns to split the screen by percentages, or a StackPanel to stack controls so they as they fit. GridViews can scale to fill the screen (and beyond). This will let the app flow to use the available space.
MSDN discusses this technique in Quickstart: Defining layouts
For larger scale changes where the app should make bigger changes to adjust to larger changes such as portrait vs. landscape vs. snapped modes you can use Visual States. Visual States allow the app to set a specific state (e.g. "Landscape") which automatically changes properties of the page's controls. For dynamic layout the visual states will typically hide and show different controls, for example to switch from a horizontally oriented GridView in Landscape mode to a vertically oriented ListView in Portrait mode. By data-binding both controls to the same data the code-behind doesn't need to know any details about which controls are used at any specific time.
MSDN discusses this technique in Quickstart: Designing apps for different window sizes
Blend has a very good Visual States editor that you can use to define and set up different visual states visually.
The same techniques and code apply to Windows Store apps and for Windows Phone Store apps, but the exact layouts are likely to be different to cater to the different device sizes. Windows Store apps run on a wide range of display sizes and users can resize Windows Store apps freely, so Windows Store apps need to support much more flexible layouts than Windows Phone Store apps. Windows Phone Store apps need to take display resolution into account, but run on fairly consistent aspect ratios which change only for portrait or landscape.
For very simple apps you may be able get away with sharing a single Xaml page in the Shared project of a Universal app, but in most cases you'll be better off with separate page designs for Windows Store and Windows Phone apps. In addition to the screen size differences, there are a few control differences that will require separate Xaml. Xaml doesn't support conditional compilation, so a Shared Xaml file would need to be exactly the same in both.
For Windows Store you can use 'visual states'. You can set rules that determine which visual state is to be used, e.g. when the width is 320 switch to snap mode and modify the layout to suit.
Be careful when looking up information on this because the paradigm changed a lot between Windows 8 and 8.1.
Jerry Nixon has a great tutorial on visual states:
http://blog.jerrynixon.com/2013/11/windows-81-how-to-use-visual-states-in.html
This post from my blog covers a simple scenario using code behind only (VB, but should be easy to change to C#) - not advisable when you have a complex layout:
http://grogansoft.com/blog/?p=116
And there is a sample somewhere amongst these on the Windows Dev Center:
https://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples/view/SamplePack#content
For the phone version(s) you should probably not bother with visual states as a phone app always has the full screen, and it's a better user experience to lock the display to either portrait or landscape.
Your phone/Store apps can share controls, but they have their own pages. I usually create full sized and smaller versions of any data-bound controls and use the smaller size on the phone and when the Store version is in a small state (e.g. 1/2 the screen).
