More precisely, when I use certain display scales in Windows (those that don’t produce perfect 1:1 pixel layout. 150%, 175%, etc), the text doesn’t always redraw itself in the exact same position during every redraw. It is as if it dances a bit. However, if I scale the display perfectly (100% or 200%, for example) the effect is nonexistent.
Is there a fix for this? I spent so much time developing a custom text editor with Win2D’s CanvasControl being used draw the UI text, then discover this. I absolutely cannot continue development under these circumstances, as I am not aware of a better alternative to Win2D’s CanvasControl for presenting text for a custom text editor.
Any advice helps! Thanks!
UWP is optimized for high resolution. The unit used is effective pixels (epx). In different resolutions, the application will scale accordingly.
In order to apply consistent performance at various resolutions, there is a very important concept:
The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.
So you can check your app and resize text and controls to fit this principle.
See more in this document: Introduction to UWP app design
Related
I'm working on a tinny software (C# and WPF) that does some filtering to the screen output. Examples on the filtering I'm talking about:
Customizable blue light filtering.
Increase/Decrease screen brightness (via changing the colors, not actual brightness)
Inverting screen colors.
And some more, but the simple idea is to tweak the pixel values of the screen after everything else is done rendering, but before showing the result.
Q1: How can I actually access (and then edit) the screen image/frame?
I've heard of getting and editing the screen DC directly (Win32) but I don't know if it's a good way, nor how to do it exactly.
Q2: what is the best way of applying these filters?
I think that tweaking every single pixel individually is a really bad way of doing it. (My code runs on the CPU and this process needs to be done every frame!)
Q3: Is there an event or hook for when windows is refreshing/updating the screen?
If yes, how can I register this process to it?
Note: I want a really performant way so that I don't lose any frame rate if possible.
Note: My preferred language for this is C#, C++ is ok.
Thanks a ton.
I was given UI design for project. This design is made by Photoshop. In this design every UI element's (button, textbox, listbox, etc) height and width are given in pixels. I am following that design while making user interface in WPF.
But, even I do exactly what is given UI design, image and my UI are not same. It seems WPF pixel is not same as Photoshop pixel(I know it is nonsense). Window, Button, TextBox, etc, sizes are more bigger than they are in .png picture.
Is there something am I missing?
Thank You
WPF does not operate in pixels, it operates in device-independent units, which might or might not equal to 1 physical pixel, depending on your monitor and OS settings.
Without seeing your actual UI its hard to tell what do you mean by "image and my UI are not same". There are a couple things you could try though. First, if you experience blur when rendering shapes or images - try setting either UseLayoutRounding or SnapToDevicePixels to True. Second, if you feel that the distance between different elements is larger than it should be - make sure that you account for non-zero Margin-s and Padding-s (some controls have those by default), when building your layout.
If nothing helps, try using Snoop. It will allow you to inspect your UI while your application is running, and among other things it will tell you the exact size of any element and, more importantly, why it has that size.
I'm making a shape matching game for toddlers.
I drew the shapes using gimp on my mac.
The images all seemed stretched out on the android devices.
Is there some mathematical way i could figure out how much shorter I have to make the images on the mac computer so they look correctly on the android devices?
This is a tough question. I have made several Apps for iOS and have pretty much the same problem with graphics for buttons and backgrounds when going between iPhone and iPad, which have different aspect ratios (which I suspect is the problem you are having). Throw orientation into the mix as well.
I use Gimp, Inkscape, Spine, Cocos2d-x, and lots of other tools for reference (see here).
As far as I know, the general options for "different screen geometry" issues are (if there are others, let me know):
Different graphics for each geometry.
Scaling the graphics proportionally for the geometry (I suspect you have this).
Same graphics for all, scale proportionally based on one dimension and then place graphics on screen using percentages for fixed stuff.
Option 1 means extra work...not acceptable for a hobbyist or indie (like me) developer.
Option 2 usually looks like junk. Frustration and sadness usually ensue.
Option 3 is the option I use most often. I find that occasionally I have to add small changes (read: hacks) based on the device or geometry. In the case of iOS, it is not too bad, because there are only two geometries to deal with. In the case of Android, where there are lots of different tablet geometries, you could cut it down by working with ranges of geometries and picking a fixed orientation for your application.
At the end of the day, proportional scaling by a single dimension (height or width) has gotten me the most bang for the buck.
I usually make the graphics a little "bigger" than I will need so I only have to scale down. This consumes a bit more memory, but I re-use a lot, use sprite sheets, etc. There is a definite tradeoff with managing every bit of memory (which you have to do in a large AAA rated game) and what you can get away with in a small independent application. I am not encouraging sloppiness or memory mismanagement; I'm encouraging balancing the resources against the developmental needs of simplicity...making the same graphics for different situations burns a lot of daylight.
ONE MORE NOTE:
For applications where I use a framework for the graphics (i.e. games), I use a "viewport" to let me match up the physics with the graphics...that is to say, dynamically scale the size of the graphics based on how much of the total scene I want the user to see. This lets me put the graphic for the "body" on top of it and match up the size statically or dynamically as needed. The code is in C++ and is only loosely tied to the framework...and the concept is applicable to general situations for games (i.e. scaling the graphics as needed). You can find some description and code here, if you are interested.
Was this helpful?
You need to design your application so that it can function correctly regardless of device resolution as many mobile devices have many different aspect ratios and resolutions.
If your images are being stretched then you need to change the ui design so that they are enlarged and spaced out to make use of whatever space there is.
We have a bunch of forms with alot of PictureBoxes on them. They're basically a representation of an engineering system with pipes connected to pumps and whatever. Each element is it's own picturebox, so there's a few hundred.
The problem we have is that when we take the app to a large 40"+ TV, there's too much space everywhere and it doesn't look the way it does on the developer's screen. So we designed it for these large TV's but when we look at it on a normal computer screen it's all wrong.
So how do we design the form with pictureboxes for the actual images to resize and reposition the controls relative to the size of the resolution it's being viewed on? If we simply anchor everything then the image sizes themselves are not relative to the display it's seen on.
Much appreciated!
In a Winforms solution you will have to do at least some of the resize calculations if anchoring and docking do not provide you with the required results.
If it is really important to you to be able to design the UI in Visual Studio I recommend writing custom controls that expose the desired resize properties and resize behavior and perhaps even a custom designer to support the design time features.
It might not be feasible but you could consider having a look at WPF, it has a ViewBox control that might simply be the answer to your needs.
I am going to play around with making an XNA game.
The windows store has two base resolutions it reccommends you support: 1024x768 and 1366x768
But after that there are no restrictions.
The common advice is to use a ViewBox that will scale your content for you.
But an XNA game does not have a viewbox. It has a draw method where you render your content.
What is the common way for Games (XNA or DirectX) to adapt to different resolutions?
I would rather not have to make images for each and evey resolution out there. It would be a lot of work and I am bound to miss some.
Is there a better way?
GraphicsAdapter.DefaultAdapter.CurrentDisplayMode.Widthand.Height will give you the current desktop resolution.
Then you can update Game.GraphicsDevice.Viewport variables to use these settings.
The above code usually goes in Game1.cs constructor
The link provided then documents one technique that makes your sprites, backgrounds etc look correct independently of the resolution(the theory should be sound if the code is not 100% up to date)
http://msdn.microsoft.com/en-us/library/bb447674%28v=xnagamestudio.10%29.aspx
There are two different approachs I read in a tutorial:
Resize everything to the new viewport (even with changing aspect ratio)
Just draw more surroundings around
Of course you can mix both: Resize everything as long as it can still be in the same aspect ratio (e.g. 4:3 or 16:9) and then show more or less background / surroundings.
You can also decide to display black content instead of the more surroundings, if it is important for everyone to have exactly the same sight (e.g. due to fairness), but in such a case it might be a better idea to use fog of war to reduce sight.