I am creating a Windows Store app, using XAML and C#.
If for example I run my application on the Windows Simulator (tablet), the layout is perfect. When I run my application on my local machine, the layout does not at all look like what it looks on the simulator.
How do I design my application to fit both perfectly?
Should I have multiple designs, and with start up check screen resolution and choose the layout best suited for that resolution?
Basically, how do I make sure my app will always look its best, no matter on what screen size it my run out there in the real world?
I am currently making use of a Grid for the layout of the controls, 3 columns, and 3 rows, with the Width and Height set to "*". I understand that with larger screen sizes, the column width and row heights will increase, and the opposite for smaller screen sizes.
I am basically just looking for good design practices, as to always try best and avoid massive layout changes.
I attended a Microsoft seminar lastly for 2 days. I asked if ViewBox exist for Windows Store Apps. They said "I don't think so" :)
But it exist :D
I'm sure it will be easy with a ViewBox http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.viewbox
Put your design in a view box. That's all. We use it for silverlight.
Related
How do I make it so that a desktop UWP app will resize based on resolution? Mainly I need it to work between a surface pro and a Surface Studio. I've researched around google and I haven't seen anything that goes into detail. I know of things like RelativePanel and VisualStateManagers, but I have not clue how to use them. Any guidance would be much appreciated.
Use Grids to Place your elements. Specify the row height and column width as fractions (0.2*,0.2*,0.6*) so that it adds upto 1 (not necessarily, but for convenience). Then your UI will scale automatically based on resolution. You don't even have to use relative layouts. Just place them within these Grids. If you want complex actions, go with VisualStateManagers.
After doing more searching I came across this. I think I understand it now.
https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-037-Utilizing-the-VisualStateManager-to-Create-Adaptive-Triggers
I am new to windows phone development. I have an issue regarding screen size variation and I successfully handle the UI according to resolution but problem is that I don't have any idea how to change the size of text for different resolutions, use different images for different resolution etc.
As in Android we have different asset folders. We just put our data in folders and it will use best option automatically according to the screen size . I did a lot of Googling but did not find a suitable solution for it. Any idea how I can achieve this?
You shouldn't pay attention to screen sizes at all, everything is scaled up automatically and applications look good on smaller and larger screens.
If you want to customize the design for your screen depending on the screen size, DPI or something else, take a look at the proposed solution here: http://developer.nokia.com/community/wiki/Advanced_Techniques_for_Big_UI.
How can I make my Windows Store App look great on large resolutions? For example a Button - how can I change its font size based on the resolution? If I view my app on 13" the button looks OK, but if I view it on 27" display it looks very, very small. Isn't something to be used in the Windows store apps framework to adapt a button, textBlock, etc to the screen resolution?
Set StretchDirection="Both" & StretchProperty="Fill" in ViewBox
This is a consequence of screen scaling based on DPI... which makes your button the same physical size on both monitors, but totally ignores the fact that the user sits/stands much closer to one than the other. Maybe someday we'll have a not-stupid scaling scheme that works based on subtended angles.
Large format monitors already have larger pixels, I suggest you simply opt out of display scaling in your application. (But do respect the global system font size settings)
I'm not sure what the opt-out setting is in XAML (WPF), but in WinForms, I'd be changing the AutoScaleMode property.
http://i.imgur.com/OXfC7.png
I have a c# form application that has a fixed size (cannot be resized) and cannot be maximized. Users who have a different setting for their icon/text sizes breaks my GUI (the entire form is bigger, background images start tiling, etc.
Help?
Microsoft recommends that a user change their DPI (dots per inch) settings and keep their native resolution rather than change the resolution to enlarge the visible display. This article also links to guides for building DPI aware applications.
http://msdn.microsoft.com/en-us/library/dd371771(VS.85).aspx
You should allow your forms and controls to scale, the user would most probably have changed their DPI settings for a reason. This reason is most probably related to accessibility and, as developers, we should strive to adhere to user interface and accessibility standards.
This usually increases the amount of work to create assets for web sites and applications. Also, thought should be put into the positioning of controls to ensure that they will not overlap or fall off the edge of the form when scaled. The best way to ensure that your application is compliant is to test at both ends of the spectrum and the normal recommended settings for usage.
As for disabling maximising of the form, this should only be done if you can ensure that the form will fit on the smallest of displays without issue. I have used applications on a netbook with a 7" screen that cannot be maximised, and they just don't fit, there is limited space to move the form around to access certain controls. If these could be maximised, I would then expect all controls to be visible, or can be able to scroll to reach them.
It is a challenge to develop a solution for all, but your end users will appreciate the work you have put in, if your application works correctly. Accessibility is a sensitive area and we should be making the effort to provide interfaces to cater for all users.
Well, sounds like you should allow it to be resized...
Quite frankly, even MS has gotten the hint and started changing most of their forms and even dialogs to be resizable. It's the friendly thing to do.
UPDATE:
A couple things come to mind on how to fix this. First, set the background image to Stretch. For the button, instead of using an image to display the text, just use a background image that has some transparency and use a regular font.
You should be a little more description of what you want. Since I'm not sure what you want to actually happen, you can prevent the form elements from resizing by changing your forms property AutoScaleMode to None.
i'm developping an application in CF 3.5 for windows Mobile 6 Pro using C# and i have a little issue requiring the advice of someone that knows better.
Basically, i want my application to run and scale on multiple device sizes and resolutions. Eveything scales properly but the images.
Some images that are for example 16X16 will look very small on a high resolution screen, so I want to display a 32X32 image, but I don't know what's the best way to decide which image size to display.
I have the option to check the dpi and then manually choose which image to display, but it seems like dirty work.
Isn't there any way to do it otherwise or what's the best way to do it?
I recommend that you create a layer between your forms and the images. Create a new class that would be responsible for returning the correct sized image. The code in your forms will rely on that to get the image and would have to know nothing about the sizes. For example:
mypicturebox.Image = ImageFactory.Image01;
The good thing is that you can use any technique you want inside the ImageFactory without affecting the rest of the code. The easiest thing to do is to check the size of the screen (using Screen.PrimaryScreen.WorkingArea) and do a manual decision.