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.
Related
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
I am trying to make my winforms application made with C#.Net, resolution friendly. I tried to do so in programming way by just adjusting a size of all control according to ratio of screen resolution. But it doesn't give perfect resolution in every forms.
I tried to do so in programming way by just adjusting a size of all control according to ratio of screen resolution.
I think you mix two things.
To adjust your form to the Windows DPI settings (making your controls smaller or larger), you don't need to do anything, this is performed automatically. Just change the DPI settings and check the effect.
To adapt your forms to the actual resolution just make it sure that your forms are either resizable (and the controls are docked) or the non-resizable dialogs will show at least some scrollbars if the resolution is too small. Anchors can be a pain especially if you have derived forms or user controls but you can always use docking.
You could also use certain resolution breakpoints where the size of the anchors change. For example at 1024x768 1600x900 1920x1080 the controls all change to a set size, inbetween they just take the closest resolution breakpoint to them (1200x900 would take 1024x768).
Often I've had problems trying to make them completely dynamic and I've been handling it like this. Upon resize just call a function that checks the current size and if needed resizes all the anchors.
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.
So here's the situation: I need to take a (user-specified) graphic, and allow the user to define and label regions within that graphic. For example, if you uploaded a picture of a face, you might want to define "right eye", "left eye", "nose" etc. Also, having defined the regions, if I select a previously defined region, it should be highlighted on the image somehow. These regions are (obviously) not necessarily rectangular, and they cannot overlap. And if you click within a defined region in the graphic, I would be able to identify which region was clicked on.
There are a couple ways I can think of for doing this, none of which are quite satisfactory. Another developer before me tried doing it with a transparent grid overlaid on the original graphic, fiddling with the background alpha/color for highlighting regions, but I think they rather kludged it. I could either get my hands really dirty trying to clean up their code, or try a completely new approach.
What would you suggest for maximum speed and user-friendliness?
Bounty added: for the best solution that will get me up and running in the minimum time.
The GraphicsPath class is made to do this. Keep a list of them along with the image. Draw the image first, then Graphics.DrawPath() to draw the regions on top of the image.
Hit testing is simple with GraphicsPath.IsVisible(). Iterate the list in reverse order so overlaps work.
Assuming you haven't decided yet on the technology you'll use, I'd suggest WPF; I find most graphics-related tasks easier with WPF (at least in version 4) and it's specifically geared for interactivity, so creating non-rectangular regions using mouse clicks and hit-testing clicks to select shapes would be pretty easy. Loading images is also easy.
However, if you haven't used WPF or Silverlight until now, there is some overhead in learning the basic concepts and APIs; so I'm afraid there's no real way I can recommend it as a maximum speed solution without knowing your (or whoever's will be working on it) competencies. That said, using MVVM and WPF would be definitely the maximum speed solution for me. Also the maximum user-friendliness since WPF enables quite interesting interaction models out-of-the-box, like multi-touch support (that's the trendy one that should be mentioned, right?) and easy non-standard layout and placement of controls.
You need polygons, saved as list of points. And you need hit testing for them. See the link:
http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/40ebadc1-6154-4c7c-9cb1-d608a426b29c
I've got a list of 3 resolutions I need to target with a WPF application. However, I've never used WPF before and was wondering what the best way of targetting these would be.
1024x600, 1600,768 and 1024x576 are the main resolutions.
The application does not run full screen, so should I simply target the lowest one (1024 x 576) or is there a better way of handling this in WPF?
Thanks
One of the advantages of WPF/Silverlight layout controls is that you don't need to know the target resolution.
It's possible to design your interface to be fully dynamic. You should be able to design it in a way that it looks good on any resolution.
I just wouldn't set any constraints such as MinWidth or MinHeight that would cause it to not fit in the smallest resolution you want to target.
It depends.
If your program is a simple collection of non-resizable controls, you should design your form for the smallest resolution and be non-resizable.
If your program has resizable controls (eg, a grid or multi-line textbox), you should make a resizable form that can fit the smallest resolution, but can be resized to take advantage of larger screens.