I have a dialog with column down the right side filled with buttons. The dialog is built with Windows Forms. I have a mockup at the following link:original dialog
(I would have included it but apparently i'm not allowed to use image tags)
I would like for the buttons in the right column to resize themselves to fill the remaining vertical space when the dialog resizes. It doesn't particularly matter to me whether or not buttons simply increase in size or whether the buttons remain the same size while the gaps between them increase. I'm simply want the buttons to go from the top to the bottom. (I have a mockup for this as well but apparenlty i can only include one link)
I've tried hosting the buttons in a FlowLayoutPanel but they do not increase as the dialog stretches, I only get whitespace at the bottom after I run out of buttons. I also tried a TableLayoutPanel and had the same result but I may have misused it. Does anyone have any ideas how I could accomplish this?
Thanks in advance,
Jeremy
To get you started. Use the TableLayoutPanel, set its Anchor property to top, bottom, left, and right. Set the rows and columns to percentages as needed. I suggest each control have it own cell. Note that each control in a "cell" can have its Dock and Anchor property set as needed.
You can do this with a TableLayoutPanel. Create a column for the buttons, with each button having it's own row / cell in the column. Set each row to be an even percentage for height (if there are 10 buttons, each row would be 10%), and dock the TableLayoutPanel to the right side of the screen. Then, put the buttons into their rows and set them to full docking. Then, when the dialog expands, the TableLayoutPanel will expand to fill the entire right side of the screen, each row will adjust proportionally, and each button would expand to fit the new row size.
You may have to adjust this a bit to fit your needs, especially in how it relates to the other content in the window.
Related
Beginner in Visual Studio here.
I'm trying to create an C# Windows Form application that simply displays a form to show some information about the local system.
I have created this form with the help of the VS designer:
As you can see, it consists of a simple panel with a PictureBox at the top, a label below it (both centered), three table layouts next to each other, and a button at the bottom. Never mind the label texts.
The rows of all the table layouts are set to absolute, this is because I want to programatically add rows to the end middle and right table layout if there are more than one local IP address in the computer and setting the rows to auto size or percentage would make alignment difficult if more rows are added.
Now, my problem is that I can't figure out how to make the form resize and move the controls (specifically move the 'OK' button down) when more rows are added.
I have tried anchoring the button to the bottom edge of the form as well as the bottom of the middle table, both produce the same result: the button stays where it is and the new rows overlap it, like this
I would also like to know how to have the form resize to fit the contents of the labels. For example, if the text in one of the labels inside the layout is bigger than the column width, I'd like to have the form grow to accommodate it. Likewise, I'd like the form to shrink to fit the largest text.
I realize that this may not be the most efficient or easiest way to create this particular form, but it is what I've come up with, I of course welcome any suggestions in that regard. It is important to maintain alignment between the rows of all table layouts.
Thanks in advance.
Use a data grid and add controls to it if an add button is pressed. You can scroll through the rows so you won't need to adjust the height of the form
In the WinForm I am working on, I have two TextBox widgets and one button between the text boxes. When the form starts, and the winform is at its minimum size, the TextBoxes look as expected. No gaps between the items where they come close to the button there in the center. This is as seen in the top graphic.
However, when the user maximizes the winform, the TextBoxes move to the correct position but do not expand to keep close to the button in the center. Textbox A is anchored to the left and Textbox B is anchored to the right. So the alignment is correct. This is as seen in the bottom graphic.
Now, the question is how to make text box A grow to the right so that it comes close to the button in the middle and text box B grow to the left so that it also comes close to the button?
Thanks! Eric
Use TablelayoutPanel control. From MSDN
Create TableLayoutPanel with one row and three columns
First column: SizeType: percent, 50%
Second column: SizeType: absolute, 75(button width)
Third column: SizeType: percent, 50%
Then put textboxes and button in the columns.
Set for textboxes and button property .Dock = Fill
Size of the textboxes will be automatically changed with size of the columns in the TableLayoutPanel
Set Dock property of the TableLayouPanel to Fill or Bottom or Top. Then TableLayoutPanel will change width when width of the form is changed.
With simple anchors you cannot achieve this.
But you can use a TableLayoutPanel:
Place a TableLayoutPanel on the form and set Dock to Fill (or Top/Bottom)
Make 3 columns.
Column 1: Percent, 50%
Column 2: Absolute, set the desired size of the Button (eg. 100px)
Column 3: Percent, 50%
Drop TextBoxA into Column1, and set Anchor Left and Right
Drop the Button into Column2, and clear the Anchors
Drop TextBoxB into Column3, and set Anchor Left and Right
Without a TableLayoutPanel, you can make the following:
TextBoxA: Anchored Left and Right
Button and TextBoxB: Anchored Right
So only TextBoxA will grow.
you can use the Anchor Property for Button and textbox -
Button A - Anchor - left and Right
Button B - Anchor - left and Right
you can also, set textbox anchor property as per your needs and control the location of all these three controls.
I'm a newbie. Designing a form that can be resized, and I want my textboxes, labels and buttons to resize with the form, can someone tell me how to do this?
It depends on the type of layout you need. The "basic tools" you have to do that are following properties: Anchor and Dock.
Anchor
With the Anchor property you "attach" a side of an element to a side of its container. For example if you place a button in the bottom-right corner of a window and you set "Bottom, Right" as Anchor then when you'll resize the form the button will keep its relative position to that corner.
Now imagine you place a multiline text-box in the form, resize as needed (for example 4 px from top, left and right border and 128 px height) and set the Anchor property to "Left, Top, Right". When you'll resize the form that control will keep its height but it'll resize to keep its margins (so if you'll make the form wider its width will be increased).
Dock
Dock is different. With docking you "say" to the Layout Manager to use all available space in one direction. For example if you set to Left then your control will keep its width but it'll use all the available height and its location will be most left as possible.
You may have more than one control docked in a container, imagine you have 5 textbox with Top docking inside a form. They'll be stacked to the top of the form using all the width (and resizing). Another example: a Top docked control (as a banner) and a "Fill" docked control (as main content). Remember that with docking the order of controls matters (if you first place the "Fill" control it'll use ALL the available space and the "Top" dock control will overlap).
Even more
Moreover you have some layout controls too (tables and stacks). They're really easy to use and a 30 minutes of "experiments" will clarify much better than a long text.
I want to anchor below datagridviews to top, left, right & down in a way that they don't over lap when the size of form is increased or decreased. Dock and Anchor both don't seem to provide any solution for this.
You probably need to have a TableLayoutPanel handle that. Three columns, middle column is fixed (Absolute), the outside columns would be based on percentage (50% each).
The DataGridView controls would then be dock-filled into each side column.
Or just handle the layout yourself in the form's Resize event.
I'm a developer who's trying to get the hang of Blend. I've always used Blend to mess with control templates and such, but I'm trying to get the hang of using it for basic UI design, since I figure it's probably a bit faster than typing the XAML up manually in Visual Studio.
Right now I'm just trying to create a basic Grid, but I'm seeing two default behaviors that I'm hoping someone can show me how to change.
1) When I hover my mouse outside of the design surface, I see the temporary yellow line to show up, where the new Grid Column / Row will be when I click. The problem is that the newly created rows are set to heights like 0.2297* How do I get Blend to attach regular heights, like 250?
2) Ignoring 1), once I have some rows and columns, when I drag a button, or combo box, etc, onto one of the cells, it drops it exactly where I release the mouse, while adding some large margins to position it there. Is it possible to tell blend to just drop the control into the cell, and leave the margins alone?
Grids are awesome but it takes a bit of play to get proficient at working with them in Blend. Here are some tips to get you started (I cover this in detail in chapter 4 of my book).
1) When you use the snap lines to create rows and columns Blend automatically makes them relative (Star) sized, which is the behavior you are seeing. To change the row/column style to fixed (Pixel) sizes, click on the Padlock icons to the left and top of the desired rows and columns. Then, either edit the values in XAML or you can click near (but not on) the padlock to select the row or column. This will open the sizing properties in the Properties panel.
2) The short answer is "No". Blend will always add Margins when you draw the element in a cell unless you take care to draw them to the borders. This is too difficult and time consuming, so I just make sure I draw it somewhere inside my target cell. Now I can right-click the element and select "Auto Size > Fill" and the element will fill up the cell: no Margins, Width and Height set to Auto, and Horizontal and Vertical Alignments set to Stretch. [FWIW, addressing this is my number one feature request for Blend.]
I hope this helps.
To answer point 1) Blend is creating proportional grids so that the columns remain the same relative widths when you grow or shrink the grid rather than absolute grids. So if you want absolute grid widths you'll have to go in and edit the values by hand.
I find that it's easier to create the basic form in Blend and then tweak the values in the text editor - either in Visual Studio or Blend itself.
As for point 2) I've just tried this and as long as I click inside the column/row on the grid when placing a button it adds it to the correct column/row of the grid as expected. Select the button and then just double click inside the grid - this should add a button of default size where you clicked, but in the grid. (It would be much easier if I could see what you were doing).