Basically, I want everything (Controls etc) to scale with the WindowsForm when resizing it by dragging, so that the user can determine the size of the UI himself.
The picture is not perfect, but I hope it explains it:
The easiest way to do this would be to use a (Flow/Table)LayoutPanel and the appropriate Anchor/Drop properties, but I feel like that restricts my design, which currently looks like this:
My idea was to scale all the components when Resize() is called:
foreach(Control c in Controls){
c.Scale(scaleFactor);
}
My problems are: Locations aren't set properly and the rounding needed to determine the 'scaleFactor' leads to inconsistencies.
Is there a clean way to do all this? Do I have to use LayoutPanels to get a clean way?
Are you sure that you want to zoom those text boxes and labels, too? Text boxes have a fairly standard height, for example. What do you expect if the window is so small that the text is too large for the buttons/text boxes, etc.?
The typical resizing logic of the contents of a resizable window is a little bit different. I would rather create a borderless panel for the groupboxes and stack/dock everything like this:
If I resize this window, that will look like this:
Btw, I do not like if buttons are resized like this. I would use only Anchor = Left, Right for them so they would preserve their height. And do not forget to set a proper MinimumSize for the form.
Simplest and cleanest way is use layout panles.
It's hard to code location of controls which depends of previous control's location and size (expect case when you know order of controls).
In WPF everything are on ContentControl which is layout panel. Location of control is calculated automatically.
Another problem might be scaling font or glyph icon in combobox. In WPF this simplest and supported.
Related
I'm having a problem with auto sizing all of the controls on my WPF. I'm able to get them too stay on the side of the screen where I want them, the only problem is that, when I have the window the same size as the editor, it looks perfect, however, when I change too full screen (Has too be full screen), it centers everything rather then stretching too fit across the entire window.
Any idea how I could go about fixing this? I have provided a few photos.
After doing a lot of research, I found putting it in a panel, and then making the panel Anchor too none and then setting the Alignment too none, it fixed the windowed version but not full screen version. Any help would be great.
I'm setting the window too full screen with this.WindowState = FormWindowState.Maximized; if that makes any difference at all?
The grid should help you with that, just define columnas and rows. Then put the controls inside the rows and change the alignment (vertical and horizontal) to stretch and you are done.
You will have a problem with the text size, that need tl be managed in code behind or in your viewmodel
If you want a control to span on múltiple rows or multiple columns use the grid.rowspan and grid. Columnspan properties.
Sorry for the bad formatting, im on the phone
Alright, so I'm trying to figure out the best way to accomplish this for my rather unique case. I have a fullscreen WPF application where controls are added to a Grid dynamically and the user is given the option to freely move/resize them. The controls can be individually moved or resized anywhere on the parent Grid but I have prevented them from overlapping via their MouseMove events. They also cannot be moved outside of their container. Since the app will be running on machines with different monitor sizes, I need to take that into consideration when making the original layout. I have an initial layout that I would like to use, but it would seem that I'm out of options:
I first tried using rows and columns just to (initially) place the controls that are added. This method places them correctly but becomes a problem when I need to move or resize the elements because the control is already assigned to a particular row and column. I could try to use this method and then remove any rows/columns after placing the controls, but I don't think that would work well.
I've also considered a Viewbox, but that's not practical in my case for fairly obvious reasons (as it merely resizes the controls to fit the screen). I'd prefer not to use this because I would only need it to standardize my initial layout. That's it. I also don't want to mess up any text that will be displayed on the window.
So yeah, this is more of a "best practice" question because any solution I can think of would not look very professional or elegant. Feel free to ask any questions if you need clarification.
Edit: As an additional note, I'd prefer to stick with a Grid as opposed to a Canvas as my container.
Edit 2: Just to be clear, I would not need the specific (inital) layout after the first launch. When the program exits, the layout (Margins, Width & Heights, etc. for each element) is saved to a file to use for the next launch.
I've developed a number of kiosk/interactive applications using WPF. If you are trying to show the element transitions (while moving), then it might be best to use a parent Canvas and bind the Canvas.Left and Canvas.Top properties. You can mimic the grid alignment, using a Canvas, if you put in place mechanisms (e.g. Manipulation/Mouse events, converters) to make sure that the Canvas attached properties adjust to the row/column offsets.
It is not uncommon at all to use the Viewbox to mitigate display differences (and your use case is not "rather unique"). You set the Viewbox to a target resolution (e.g. 1920x1080) and allow the control to fill the available space. The other alternative would be to dynamically apply a content template based on the application window size/ratio.
After looking at multiple options, I've decided to just use a calculation to (sort of) simulate the behavior of rows/columns. Because my application is fullscreen, I can take my SystemParameters.PrimaryScreenWidth and SystemParameters.PrimaryScreenHeight to orient my layout. Using a combination of universal padding (static values) and ratio-based calculations (dynamic values), I can smoothly set my initial layout.
For instance, I'm dividing the width of my monitor by 6 (rounded up to avoid decimals) and using that (minus half the control's width) as the control's Margin.Left property, centering it on a 'column' of sorts.
Honestly, my initial layout is fairly simple right now, so we'll see if this will suffice going forward. Thanks to everyone who contributed to the question, and sorry if I was unclear on what I was asking.
Suppose that I have the following form in Designer:
I want to give users the ability to stretch this form as they want and all controls should be located like in the picture, no matter how user changed the size of this form, so they should take the same amount of space and stick to the same controls and borders.
How can I do it in WinForms? I know that there are such things like Docks etc, but I didn't find the correct way to use them in this situation.
You want the Anchor property in this case, not Dock. Anchoring means that a control will always keep the same distance to certain sides (top, left, right, and/or bottom) even if it means that the size must be changed; docking OTOH does not care about margins, it just fills up all available space on one or all sides.
Here's what you might want to do:
Anchor the two image buttons to the top and right.
Anchor the OK button to the right and bottom (I guess).
Anchor the large ListBox to all sides.
Just To Add some notes on good answer of stakx
For Controls Like ListBox that have a limit to their height, setting anchor is not enough and you should set IntegralHeight of them to false.
I reccomend to set MinimumSize of Form to prevent a user from sizing a window to an undesirable size.In your case Set it to a minimum acceptable size to prevent ugly small form with an unusable ListBox.
What would be the best way to make a WinForms application fully scalable, for example when the Form resizes?
In WPF i would use something like a Viewbox and/or a UniformGrid, but something like this doesn't exists in WinForms.
Is there an easier (and maybe faster) way to rescale controls on a from after resizing it, instead of resizing them all by calculating their new Size/Location etc.?
Thanks in advance
In Windows Forms, you use the Anchor and Dock properties for each control.
Here's an article about using them: http://www.techrepublic.com/article/manage-winform-controls-using-the-anchor-and-dock-properties/
You should also look at FlowLayoutPanel and TableLayoutPanel
you can use anchor and dock, depending on your need:
Anchor - the edges of the container to which a control is bound and determines how a control is resized with its parent.
Dock - which control borders are docked to its parent control and determines how a control is resized with its parent.
for further read: Dock and Anchor
Have a look at the Anchor property found on pretty much any control. This allows you to lock a control to any (or all) of the four borders of a window.
Once one distance is anchored (e.g. Top or Right), the control will always try to keep that distance, no matter how you resize your window.
For example, you'd set Anchor to Bottom and Right for a button that is supposed to always stay in the bottom right corner of a window. A text box, that should always fill the window from left to right would use Left and Right.
Similar things can be achieved utilizing Dock, but a docked control will always try to fill as much space as possible (there are different strategies available, like "fill everything from here and upwards) based on its container. Depending on your use case, this can however be a lot harder to control (and I usually only use it if I want a single control to fill a full window, e.g. a TextBox).
If you need more complex alignment, like widths scaled on some kind of ratio (e.g. 30%), then there are several different containers available.
I use windows form with GlassForm(using Microsoft.WindowsAPICodePack.Shell;). my problem when I change form to GlassForm my textbox texts doesnt
Place a panel on the form set the dock style to fill, set the panel's BackColor to color X and then set the form's TransparencyKey to the same color X.
Yes, that's how it works. With the Aero Glass effect applied, anything drawn in the color black will be rendered as transparent. That includes text in a textbox control. This general theme has been the subject of many other questions here. When well-written, they gather lots of upvotes, but few answers.
There just aren't a lot of good solutions here. All of them that I've come across qualify as both "ugly" and "hackish". Owner-drawing is a reasonable approach when you're using something like a label control, but I wouldn't recommend trying to draw your own textbox—it's just too hard to get right. Someone tried to do that here; like I said, the result is both ugly and hackish. I wasn't satisfied with it for my own use, but it may work for you, depending on how high your standards are.
The goal with owner-drawing, of course, is either to do all of the drawing using GDI+ (which natively supports transparency) instead of GDI (which all of the built-in controls use by default), or calling functions like DrawThemeTextEx, which is specifically designed for rendering text with a shadow that is [somewhat] readable over glass.
As well, the usual tricks like enabling compatible text rendering (which causes the built-in controls to draw using GDI+ routines, as they did in the early versions of .NET) don't work for a textbox.
Honestly, your best bet is to place the textbox over a region of your form that is not rendered as glass. Use the DwmEnableBlurBehindWindow function to selectively enable the glass effect behind certain areas of your form, rather than the entire thing. I provide a complete, ready-to-use .NET implementation in my answer here.
Check this sample out:
http://www.danielmoth.com/Blog/Glass-In-C-An-Alternative-Approach.aspx
I was not studying it any further but putting a TextBox or Button or other components over this Aero glass area worked - the rendered component didn't have the transparency problem. The labels aren't perfect but these can be easily drawn with GDI+
The direct link to the sample project is here: http://www.danielmoth.com/Blog/MothGlass.zip
It looks like he puts a panel behind the control and setting the TransparencyKey for the panel.