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).
Related
I'm trying to develop a masonry layout in a custom-made image grid/gallery control in WinForm. Currently my control displays images in a square grid format with fast GDI rendering. Masonry layouts are usually common for web, and there's a lot of resources available on the internet for CSS and Javascript. But I noted that some Windows10 applications are also displaying masonry layout, such as Photos app. Another thing I noted is that the commonly used masonry layout on the web is developed in vertical orientation (variable heights) whereas the layout used by Win10 Photos app (and also other similar apps) are using a fixed row height horizontal masonry layout.
I'm trying to develop a similar code (as per screenshot of Photos app). The point I'm unable to figure out is how the layout configures that how many items to show in each row. There are rows that have 4 items, 3 items or sometimes 5 items. Its purely flexible depending upon the photo sizes/aspect. Overall the width of the layout control/panel is fixed.
Is this type of layout inherently supported by UWP apps? Does anyone know any links / guides that explain the logic behind this type of layout? Does the Photos app has public source code? Another UWP app I've seen implementing this type of layout is the "Perfect Flickr" app.
Does anyone know any links / guides that explain the logic behind this type of layout?
The UWP Community toolkit has a StaggeredPanel control which is similar to the one you mentioned. It's open source. You could check its source code to learn how to arrange its child elements.
I have migrated an application from Windows 8.1 to Windows 10 and now I wish to make the app adaptive to all windows devices.To do this I can either use Visual state triggers in XAML or my preferred choice, page size change function in C# to respond to the change in window size. But when using this code you have to specify the pixel width and height you want the code to respond to. As we all know there are different versions of laptops with different pixel heights and widths. So when I target one specific pixel width and height I have noticed when I run the app on another laptop with a different pixel width and height icons and buttons are out of place. So in essence my question is when making Universal apps does windows expect you to target each particular device not just the type but the width and height too when designing the screens? Or is there a way to target all pixels and widths of a device type when designing so that icons and buttons are not out of place?
There are 3 different options to make your UI adaptable. You can use an option exclusively or a combination of them.
Visual states and state triggers - one XAML file across all device families but the XAML can quickly become unwieldy for complex XAML
Separate XAML views per device family - Use XAML views to create different UI definitions that share the same code-behind. You can provide a unique UI definition for each device family.
Separate XAML pages per device family - To provide unique views and functionality, you can create separate Page files (XAML and code), and then navigate to the appropriate page when the page is needed.
You can read about these approaches in detail here Define page layouts with XAML
I am developing a windows runtime app for windows phone, i need to scale the text based on the screen dimension.
for handle the image scaling i have used the 3 folder(scale-100, scale-140 and scale-240)
In the app I have different style for different kind of text(title, subtitle...)
is there any way to apply different style based on the screen size?
Following solution is for Windows (Phone) RT, not for WP Silverlight.
The resource system of Windows RT is much more powerful than a lot of people know. You're not only able to use scaling for images, the same works for resource (.resw) files, even a combination of language/scaling is possible. Simply use the correct naming conventions: e.g. Resources.scale-140.resw.
And then you're able to put about every single attached/dependency property in your resource file, leveraging the resource system based on x:Uid.
<Grid x:Uid="MainGrid">
<TextBlock x:Uid="MyTextBlock" />
</Grid>
You can run a few of the different emulator sizes to test if everything works as desired.
I have two simple questions since I'm very new to Windows Phone programming:
1:
How do I cange the root frame, or show a different Page on startup, in a Windows Phone 8.1 Silverlight application? I have a LoginPage and then I want to check if the user is logged in show MainPage as root frame and if the user is not logged in show the LoginPage.
2:
Windows Phone Silverlight applications seems so different to me compared to the Windows Phone WinRT applications, or maybe I'm just not experienced enough. For example I can't put a placeholder/hint text in a textBox in Silverlight but it's super easy in WinRT, why is it like that? Isn't that something very basic that many IDE's implements? Or have I missed something mayor when I'm developing a Silverlight application for Windows Phone?
I know that Windows Phone WinRT is used to create universal apps and Silverlight is used to create only mobile apps for Windows Phone, but why is developing a mobile app in Silverlight so much different (at least to me) compared to build a Windows Phone app i WinRT?
For your first question, use the UriMapper.
The basic principle is that you check if the user is logged in or not and based on that, navigate to the correct view.
The code is not all that complicated, there is a very good tutorial up on Shawn Kendrot his blog here...
For question 2, how to add some sort of hint/watermark can be done in several different ways.
But a very simple version is presented on MSDN here... it uses events to set and clear the watermark.
Point 1
You have to go to Package.appxmanifest and under the tab called Application the second field contains the startup page name. Currently it should be MainPage.xaml, just change it to LoginPage.xaml.
Point 2
I don't quite understand your question. Silverlight and Windows Runtime are two different platforms, they have in fact many different libraries. The goal of Windows Runtime is to run the same application on several different devices, so different hardware requirements and different resolutions. It was a need to organize the environment differently and of course Microsoft added some minor changes such as the hint text (e.g.).
What is so different to you? I did the porting of an app from SL to WinRT but it's not difficult nor tricky at all.
I'm writing an app in C# WPF and I'm hoping to implement a similar kind of touch-based horizontal scrolling that's featured prominently in Windows 8.
At the moment I'm using ScrollViewer with content inside it. This works fine as far as the scrolling is concerned, but it creates problems when interacting with controls inside of it (for example, sliders).
With my limited programming knowledge (a month ago the most I'd done was create a mockup in Photoshop :P), I'd assume this was because the touch hits the ScrollViewer first? Is there some way of flipping this around? I would be happy even if you had to hit a white space to be able to scroll, I just need the user to be able to interact with the controls inside easily without accidentally scrolling all over the place ^_^
Unfortunately, I can't just code for Windows 8 as this is specifically for a bunch of touch-enabled Windows 7 machines.
Look for the Metro theme here you might find some usful style here that you can modify and use..
Also you can check this website for information and guidelines on Metro UI on WPF