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.
Related
I am Developing a Windows Store application. There are seven resolutions in Windows. I want to set different image sizes for different resolutions. Can any one know what are the image sizes for Windows Simulator Resolutions.
These are the resolutions Simulator provide:
10.6" 1024*768,
10.6" 1366*768,
10.6" 1920*1080,
10.6" 2560*1440,
12" 1280*800,
23" 1920*1080,
27" 2560*1440,
My question is Image sizes for these resolutions regarding Background Image, Launch image(splash screen). I want to Select image based on Screen Size. Guide me the what are the image sizes regarding of Screen size.
I searched through out in internet. Help me regarding this.
Depending of the kind of application that you are dealing with, the best option may be to scale or to adjust the image size.
Take a look a this resource Guidelines for scaling to screens (Windows Store apps) it will provide a complete picture of this very important topic.
In the same reference guide you have Guidelines for scaling to pixel density (Windows Store apps)
I truly recommend to read the MSDN reference to Windows 8 apps. It's very well documented and has tons of examples.
It's worth mentioning that the system can automatically swap images for you when the screen resolution goes above 140% and 180% of 1366 x 768. To take advantage of this "auto swapping" simply include three versions of your image:
MyImage-100.jpg
MyImage-140.jpg
MyImage-180.jpg
Then, when you reference the image in your application just reference it as MyImage.jpg. The system will take care of the rest.
If you need to swap images out at resolution thresholds other than 140% and 180% you will need to write your own custom code.
In addition to the great resources that Agustin has provided, please note that the launch image/splash screen must always be 620 x 300 pixels, regardless of your screen size/resolution. You can find this in your Package.appxmanifest file under the "Application UI" tab, at the bottom.
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.
Is there any way or general size template created for windows 8 app using xaml so that we can create application of different screen size and DPI. As we are having in Android we put images and screen UI in different folders and application picks it up depending on different screen size and DPI? I am trying to design a general template for this but just asking if MS has already created something like this?
Besides the default templates that come with VS2012 I am not aware of any other templates. Working with the diff. requirements aren't that much of a hassle if you know how to get started. Here is some information that you might have already seen, but I'll add it here for those reading you questions looking for some information :)
There are different recommendations for scaling to screen size and resolution.
In regards to pixel density and images :
Guidelines for scaling to pixel density (Windows Store apps)
Basically you create folders like so:
Option #1 - File naming convention:
...\test.scale-100.jpg
\test.scale-140.jpg
\test.scale-180.jpg
Option #2 - Folder naming convention:
...\scale-100\test.jpg
\scale-140\test.jpg
\scale-180\test.jpg
in XAML
<Image Grid.Row="0" Grid.Column="1" x:Name="testImage" Source="test.jpg" Margin="2,2,2,2"/>
The resource loading is smart and will fetch the right image from the right folder
As for scaling to screens
Guidelines for scaling to screens (Windows Store apps)
You could:
a) Have a fixed layout that scales to fit the screen
Create a Viewbox control and add your controls to it, set the size to the minimum size you want to support.
Don't add appbars or other stuff that is by default adaptive!
Define letterboxing style and color, and don't forget to add different res. images as I showed above.OR use vector graphics or XAML.
b) Adaptive layout ,- check out the default templates that come with VS2012, they use adaptive layout.
c) I'm sure there are other options/variations
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.