Develop Reference

Dynamically resize WinForms controls when Form is resized

I have a WinForms project on which I would like all of the controls to grow proportionally along with the form as the form is resized. This is what the form looks like in normal state: Normal State Form
I have tried setting the Anchor properties to their appropriate values given the location of each control on the form, and while it does move the controls, they remain the same size. I tried using the AutoSize property, but also to no avail. Here is what the form looks like after being maximized with the Anchor properties set: Maximized Form
I also tried using a formula from Shaun Halverson to dynamically resize everything but it does not relocate the control properly, and I can't seem to figure out why. Here is the code I used to try and resize dynamically:
private void Main_Load(object sender, EventArgs e)
{
originalFormSize = new Rectangle(this.Location.X, this.Location.Y, this.Size.Width, this.Size.Height);
submitBtnOriginal = new Rectangle(submitButton.Location.X, submitButton.Location.Y, submitButton.Width, submitButton.Height);
}
private void Main_Resize(object sender, EventArgs e)
{
resizeControl(submitBtnOriginal, submitButton);
}
private void resizeControl(Rectangle r, Control c)
{
float xRatio = (float)(this.Width) / (float)(originalFormSize.Width);
float yRatio = (float)(this.Height) / (float)(originalFormSize.Height);
int newWidth = (int)(r.Width * xRatio);
int newHeight = (int)(r.Height * yRatio);
int newX = (int)(r.Width * xRatio);
int newY = (int)(r.Height * yRatio);
c.Location = new Point(newX, newY);
c.Size = new Size(newWidth, newHeight);
}
When I run this code, it moves the button to the opposite corner of the form, but it resizes it properly.
This would obviously be quite redundant given that I have to get an original size for every control I want to resize, but I would be fine with that if I could get dynamic resizing to work. I am surprised that this is not a more common problem, and I couldn't find hardly anything on this specific topic other than to use the Anchor and Dock properties. Is there an easy way to do this that I am missing? Is this a more difficult problem than it seems?

Put TextBox anchor property values as Top, Bottom, Left, Right and resize the form. That should work.

Overlapping panels with "Dock" resize functionality

I've been struggling for a couple of days with this issue, which seems like it would have an obvious solution.
How could I place a panel, which maintains position and resizes as if Docked, in the middle of the form, over other panels populating a TableLayoutPanel without messing Column/Row spans and misplacing other containers and controls?
I would like to avoid developing custom functionality and make due with the basic visual studio toolbox (extensions are welcome).
In an effort to better explain what I'm hoping to achieve, I've provided a link to an image of the goal.
Blue is the dynamically resizable, centered pop-up panel.
Green is an Image/BackgroundImage starting on cell [1,1] of the TableLayoutPanel.
Orange is a drop-down panel for a side menu, also starting on cell [1,1].

So... I found a solution.
I guess I needed to admit that I have to write the resizing function myself.
I'm new here, so I don't know if answering oneself question is canon, but here goes.
For the Orange panel, given it's Anchored Top,Left:
private double panel1WidthRatio, panel1HeightRatio; // Global variables for maintaining ratio.
private void ParentForm_ResizeBegin(object sender, EventArgs e)
{
double p1w = this.side_panel.Size.Width; // Grab the panels' dimensions
double p1h = this.side_panel.Size.Height; // as soon as the user begins to resize
double fw = this.Size.Width; // in order to store
double fh = this.Size.Height; // the Panel to Form
panel1WidthRatio = p1w / fw; // dimension ratios.
panel1HeightRatio = p1h / fh;
}
private void ParentForm_SizeChanged(object sender, EventArgs e)
{
double formWidth = this.Size.Width; // As soon as a new size is set
double formHeight = this.Size.Height; // resize the panel using the earlier ratio.
this.side_panel.Size = new Size((int)(formWidth * panel1WidthRatio), (int)(formHeight * panel1HeightRatio));
}
For the Blue panel, given no Anchors, simply replace:
this.side_panel.Size = new Size((int)(formWidth * panel1WidthRatio), (int)(formHeight * panel1HeightRatio));
with:
this.middle_panel.Size = new Size((int)(formWidth * panel2WidthRatio), (int)(formHeight * panel2HeightRatio));
this.middle_panel.Location = new System.Drawing.Point(this.Size.Width/4-9, this.Size.Height/4-24);
The constants (9,24) take into account the Form's frame and borders, so as to correctly reposition the panel in the center.

How can I keep the RadioButton text and an additional Label in alignment?

I'm working on a C# project using .NET 3.5 and Windows Forms. I need to design a decision step with multiple options that require a bit of explanatory text. For this, I want to have a set of RadioButtons to choose an option, followed by an additional Label each that contains the explanation.
I want to keep the label of the radio buttons and the label containing the explanatory text aligned - I've added red lines to the image to illustrate this. I could probably tweak some margins or other settings on the second label, but that would probably start to look weird as soon as the user chooses a different theme or changes some other settings. What is the canonical (and most robust) way to do this?

Your question boils down to two partial problems:
How large is the RadioButton (or the CheckBox when thinking ahead)..
How large is the gap between the glyph and the Text.
The first question is trivial:
Size s = RadioButtonRenderer.GetGlyphSize(graphics,
System.Windows.Forms.VisualStyles.RadioButtonState.CheckedNormal);
..using a suitable Graphics object. Note that I use the RadioButtonState CheckedNormal as I don't you want the Lables to align differently when the Buttons are checked or unchecked..
The second one is anything but trivial. The gap may or may not be constant and there is another gap to the left of the glyph! If I really wanted to get it right I guess I would write a routine to measure the text offset at startup:
public Form1()
{
InitializeComponent();
int gapRB = getXOffset(radioButton1);
int gapLB = getXOffset(label1);
label1.Left = radioButton1.Left + gapRB - gapLB;
}
Here is the measurement function. Note that is doesn't even use the Glyph measurement. Also note that it isn't enough to measure the text offset of the RadioButton. You also need to measure the offset of the Label!
int getXOffset(Control ctl)
{
int offset = -1;
string save = ctl.Text; Color saveC = ctl.ForeColor; Size saveSize = ctl.Size;
ContentAlignment saveCA = ContentAlignment.MiddleLeft;
if (ctl is Label)
{
saveCA = ((Label)ctl).TextAlign;
((Label)ctl).TextAlign = ContentAlignment.BottomLeft;
}
using (Bitmap bmp = new Bitmap(ctl.ClientSize.Width, ctl.ClientSize.Height))
using (Graphics G = ctl.CreateGraphics() )
{
ctl.Text = "_";
ctl.ForeColor = Color.Red;
ctl.DrawToBitmap(bmp, ctl.ClientRectangle);
int x = 0;
while (offset < 0 && x < bmp.Width - 1)
{
for (int y = bmp.Height-1; y > bmp.Height / 2; y--)
{
Color c = bmp.GetPixel(x, y);
if (c.R > 128 && c.G == 0) { offset = x; break; }
}
x++;
}
}
ctl.Text = save; ctl.ForeColor = saveC; ctl.Size = saveSize;
if (ctl is Label) { ((Label)ctl).TextAlign = saveCA; }
return offset;
}
Now the Texts do align pixel perfect..:
Note that I use two original controls from my form. Therefore much of the code is simply storing and restoring the properties I need to manipulate for the measurement; you can save a few lines by using two dummies.. Also note that I wrote the routine so that it can measure RadioButtons and Labels and probably CheckBoxes as well..
Is it worth it? You decide..!
PS: You could also owner-draw the RadioButton and the Label text in one.. this would have the interesting side-effect, that the whole text would be clickable..:
Here is a quick and dirty implementation of owner drawing a CheckBox: Prepare it by setting AutoSize = false and by adding the real text together with the extra text into the Tag, separated by a e.g. "§". Feel free to change this setup, maybe using the Label control..
I clear the Text to prevent it from drawing it and I decide on an offset. To measure it, you could use the GetGlyphSize from above.. Note how the DrawString method honors embedded '\n' characters.
The Tag contained this string:
A Rose is a Rose is a Rose..§A Rose is a rose is a rose is a rose is /
A rose is what Moses supposes his toes is / Couldn't be a lily or a
taffy daphi dilli / It's gotta be a rose cuz it rhymes with mose!
And I for the screenshot I actually used this line:
e.Graphics.DrawString(texts[1].Replace("/ ", "\n"), ...
Here is the Paint event:
private void checkBox1_Paint(object sender, PaintEventArgs e)
{
checkBox1.Text = "";
string[] texts = checkBox1.Tag.ToString().Split('§');
Font font1 = new Font(checkBox1.Font, FontStyle.Regular);
e.Graphics.DrawString(texts[0], checkBox1.Font, Brushes.Black, 25, 3);
if (texts.Length > 0)
{
SizeF s = e.Graphics.MeasureString(texts[1], checkBox1.Font, checkBox1.Width - 25);
checkBox1.Height = (int) s.Height + 30;
e.Graphics.DrawString(texts[1], font1, Brushes.Black,
new RectangleF(new PointF(25, 25), s));
}
}

The simplest out-of-the-box solution (it seems to me) would be to use 3 controls instead of 2: a radio button (with the text set to ""), a label (to go beside the radio button) and another label (to go below them). This would allow you easier configuration in designer, but (far more importantly) simpler run-time evaluation and adjustment, if necessary, to keep them in alignment should styles change.
I do understand that this takes away the benefit of clicking the label to select the radio button, but you could add that behavior in the label's Click event if you need it.
Alternatively, you could create a UserControl containing the text-free radio button and the label, and handle the behavior within that UserControl while exposing the label's location.

If you don't care about the radiobutton's text being bold, you could set it's label to a multiline string, and set CheckAlign to TopLeft:
radioButton2.CheckAlign = ContentAlignment.TopLeft;
radioButton2.Text = #"Radiobutton
Explanation text";

Don't know why I didn't think of this earlier, but the following approach seems to work:
Use a TableLayoutPanel with two columns that are set to adjust their width automatically.
Place all RadioButtons in the first column and set them to span both columns.
Place all Labels in the second column, setting all margins to 0.
Add a disabled, but visible (!) "spacer" RadioButton without text in an additional row at the end of the layout.
When displaying the form, convert the first column to a fixed size and hide the "spacer".
The key point seems to be that the "spacer" has to be visible initially - otherwise the column will get a size of 0.
This is my test form in the designer:
To change the layout, I used the following Load handler:
private void TestForm_Load(object sender, EventArgs e)
{
// find the column with the spacer and back up its width
int column = tableLayoutPanel.GetColumn(radioButtonSpacer);
int width = tableLayoutPanel.GetColumnWidths()[column];
// hide the spacer
radioButtonSpacer.Visible = false;
// set the column to the fixed width retrieved before
tableLayoutPanel.ColumnStyles[column].SizeType = SizeType.Absolute;
tableLayoutPanel.ColumnStyles[column].Width = width;
}
And this is the result at runtime:

You could add an invisible dummy label having the same text as the radiobutton. Then, get the length of that label and calculate the correct position of the explanation label.
labelDummy.Text = radioButton1.Text;
labelExplanation.Left = radioButton1.Right - labelDummy.Width;
However, this still appears to be some pixels off, even though I the label's margin to 0, maybe some additional tweaking can fix this. Here's a screenshot to show what I mean. The label's background is green to be able to see the extra margin.

Draw a static line between characters in a TextBox

I have a TextBox. I want the user to be able to click inside it; when he does, a red marker line should appear between the two characters closest to the click position, and remain here. The user could do that multiple times.
I'm new to WPF, but I guess, as in Winforms, I will have to hack a messy OnRender method. So far, it's okay.
What I'd really like to know is: how to get the two closest characters to the click position?
I was about to do a pixel check but it seems pretty heavy.

You could try:
textBox.GetCharacterIndexFromPoint(point, true);

Well I found what I wanted to do, and it's way simpler than I thought (even though FINDING the actual way was a pain).
Just add this handler to your textbox's SelectionChanged event:
private void placeMarker(object sender, RoutedEventArgs e)
{
// txt_mark is your TextBox
int index = txt_mark.CaretIndex;
// I don't want the user to be able to place a marker at index = 0 or after the last character
if (txt_mark.Text.Length > first && first > 0)
{
Rect rect = txt_mark.GetRectFromCharacterIndex(first);
Line line = new Line();
// If by any chance, your textbox is in a scroll view,
// use the scroll view's margin instead
line.X1 = line.X2 = rect.Location.X + txt_mark.Margin.Left;
line.Y1 = rect.Location.Y + txt_mark.Margin.Top;
line.Y2 = rect.Bottom + txt_mark.Margin.Top;
line.HorizontalAlignment = HorizontalAlignment.Left;
line.VerticalAlignment = VerticalAlignment.Top;
line.StrokeThickness = 1;
line.Stroke = Brushes.Red;
// grid1 or any panel you have
grid1.Children.Add(line);
// set the grid position of the line to txt_mark's (or the scrollview's if there is one)
Grid.SetRow(line, Grid.GetRow(txt_mark));
Grid.SetColumn(line, Grid.GetColumn(txt_mark));
}
}
You might want to add some kerning or simply increase the font size for the markers not to ruin readability.

How to create and manage Matrix of buttons in C#

I have a matrix of bits 20x23.
I need to represent this matrix in a winform (GUI).
The idea is that the user will be able to change the content of specific cell by clicking the relevant button, that represent the specific cell in the matrix.
(When the user click a button, the relevant bit cell in the matrix is being inverted)
I have considered using GRID for this, but due to GUI (Design) issue, it is not possible to use it.
How can I create and manage 20x23 (=460) buttons effectively and keep it correlated to the real matrix ?

It is not that difficult, I would start with a method that will generate a button matrix for you. This matrix consists of Buttons, where the ID (ie. Tag) will correspond to the correct cellNumber (you might consider passing the coordinates as a Point instance as well, I will leave that up for you to decide).
So basically, it comes to this, where all the buttons are rendered on a panel (panel1):
...
#region Fields
//Dimensions for the matrix
private const int yDim = 20;
private const int xDim = 23;
#endregion
...
private void GenerateButtonMatrix()
{
Button[,] buttonMatrix = new Button[yDim, xDim];
InitializeMatrix(ref matrix); //Corresponds to the real matrix
int celNr = 1;
for (int y = 0; y < yDim; y++)
{
for (int x = 0; x < xDim; x++)
{
buttonMatrix[y,x] = new Button()
{
Width = Height = 20,
Text = matrix[y, x].ToString(),
Location = new Point( y * 20 + 10,
x * 20 + 10), // <-- You might want to tweak this
Parent = panel1,
};
buttonMatrix[y, x].Tag = celNr++;
buttonMatrix[y,x].Click += MatrixButtonClick;
}
}
}
As you can see, all 460 buttons have a custom EventHandler connected to the ClickEvent, called MatrixButtonClick(). This eventhandler will handle the ClickEvent and may determine on which button the user has clicked. By retrieving the tag again, you may calculate the correct coordinate which corresponds to the 'real' matrix.
private void MatrixButtonClick(object sender, EventArgs e)
{
if (sender is Button)
{
Button b = sender as Button;
//The tag contains the cellNr representing the cell in the real matrix
//To calculate the correct Y and X coordinate, use a division and modulo operation
//I'll leave that up to you :-)
.... Invert the real matrix cell value
}
}
I will not give away everything, since it is a nice practice for you to achieve :).

I would:
1) create an object with needed properties
2) fill a list and fill with values
3) iterate list creating buttons and assigning its click handler and button's name (for name something like button_rowindex_colindex)
4) inside click handler, assign value to object cell by detecting which button was clicked