C# Containers -- Filling a Space Vertically on Resize - c#

I'm new to C# and I've been working on a small project to get the feel with Visual Studio 2008. I'm designing the GUI in C#, and I have a TabControl with three GroupBoxes. These three GroupBoxes are anchored to the left and right of the screen and work perfectly when resized horizontally.
I would like these three boxes to take up 33% of the height of the screen, and gracefully resize. I've tried messing around with anchoring, but I can't seem to find the answer. I've also been searching for something similar, but unfortunately, searching for positioning containers yields all CSS and HTML stuff.
This seems like a pretty common thing to do, but I can't seem to find an easy to way to do it. If someone could point me in the right direction, I'd greatly appreciate it.
Thanks!

Try out the TableLayoutPanel. I believe it does exactly what you want. It allows you to define columns and rows within its area, specifying their width (for columns) and height (for rows) in percentages or pixels. You can then drop a group box into each cell and set its Dock property to Fill, and it will nicely resize along with the cell when the TableLayoutPanel resizes (which can be easily achieved by using docking or anchoring).

This is really a shot in the dark but maybe you could try using split-panels ?
Edit: I've just checked in Visual Studio and I think the TableLayoutPanel might do what you want.
Edit2: dang, beaten to the punch :)

Handle the form's Resize event: Add code to compute the new size/position of the controls in there. Beware to interferences with the controls' Anchor property. You may have to Anchor to None and compute left and right position yourself as well.
Since you're learning, I guess you prefer not to receive a full solution but rather a direction. No code from me then ;-)

Related

Autosizing controls issues

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

Stretching controls to take full screen

I am making a video game. I need that it will be available at full screen mode, and with different resolutions.
I already know how to make application maximized and how to remove the built-in user interface, that is not the problem.
The problem is, that when I run it in full mode, all controls simply take the top-left corner, leaving the remaining space empty.
What I want, that controls would be spread evenly across the screen, with new coordinates and sizes, but same proportions.
I tried using anchoring. It works, but only when there is just one control. When there are more controls, and in my menu bar there are 12, and I try using anchoring, they are stretched, but put on top of each other.
Is there a way to get the right result? If so, can you please help me?
Thank you in advance,
Evgenie
Use TableLayoutPanel, anchor it to the left, right and bottom of the form, set ColumnCount=3, RowCount=1, edit column sizes in the Columns property, then drop buttons into corresponding cells and align them using their Dock, Anchor and Padding properties.
There is 'Dock' property for controls. You can add controls to a TabaleLayoutPanel and set the Dock property to DockStyle.Fill.
some ways i remember through which you can achieve it
Dock - MSDN link
Anchor - MSDN link
programitically setting the location according to the screen resolution ration

Resolution for full screen WPF application

Following the guide here, I have created a full-screen WPF application. But I met a problem: the various size & resolution of screens. For example, I want to put several sprites on the screen as buttons; but they are located at different positions in each screen, and even different to what shown in the XAML designer.
I have searched all over without a clue got. How can I fix this problem? (to make the buttons appears the exact place (in the center), and better, help the xaml designer reflect exactly what will happens when the program is running). Any help will be appreciated.
UPDATE: I'm defining my page as a Canvas inside the Window element. Actually I like Canvas more, cause I can easily put my sprites anywhere, not like a grid.
In general, you should not use pixel values in WPF.
Instead, you should layout your content in <Grid>s with rows and columns, and it will automatically expand to fill the screen (based on the alignments and row / column definitions).
Avoid using the canvas. Also, do not rely too much on the designer to build your layout. Using Grids, Stackpanels and/or Dockpanels will give much better results (and scale when resizing your window). For example, if you use only the designer and drag-and-dropp all your elements, the designer often puts huge margins a bit randomly and this will not always scale properly if you resize your window.

How do I get two panels to share a parent's width in Devexpress

This sounds simple to me but I'm not sure if there's a best/suggested way to do it.
I'd like my UI to have a panel docked along the top, split into two panels, left and right, that always share the width of the parent equally. There'll be a minimum overall width so nothing gets squashed, but on resizing I'd like the two panels' widths to always be equal.
I thought of using a split container control but it doesn't do what I want in this case as I can't disable manual resizing.
My current idea is just to override the onResize method (forgot the exact name), and just manually set the two widths to parent.width/2, but it seems a bit roundabout, and potentially slow if it's calling onResize for every pixel's worth of movement.
Is there a better way to do this, or a control/layout that handles this for me?
Disclaimer: I'm using an older version of DevExpress, 10.1.4. It's not my decision and I don't think I can get the team to upgrade at the moment. Using C# on .Net platform 3.5.
I would drop a couple of panels onto the form and set their Size within the form's ResizeEnd event handler. This looks to be the best solution from my point of view.
You can use the XtraLayoutControl to achieve this, but that might be overkill.
Otherwise, you'd have to do it manually.

Making selection of visual elements in Canvas easier

I have a Canvas based custom control that enables selection, dragging and resizing of visual children. I have so far Lines, Rectangles (without background) and images. Problem is, for selection, lines for example are hard to select obviously as they are 1 pixel high. Could you suggest a way to make them easily selectable? I'd like something along the lines of Visual Studio's selection, in which there are some pixels of "miss tolerance" when selecting something thin like a grid, you don't need to hit the exact pixel the line is at, few pixels around it are just as good, but I'm not sure how to implement that in WPF. Please help?
Thank you.
Perhaps what you are looking for can be easily achievable by using Adorner

Categories