Resizing Panel Containing UserControl - c#

I have a UserControl that contains invisible controls, to make them visible, the UserControl resizes.
I need to resize the Panel that contains the UserControl, but I don't know how.

This behavior is handled well by the Panel and Form classes without explicit sizing (and without the layout bugs introduced when the user has a high-DPI monitor or uses the large or extra-large font settings.
1) Create a Form with a docked FlowLayoutPanel.
2) Set the Form and FlowLayoutPanel's AutoSize to true and AutoSizeMode to GrowAndShrink
3) Add your panels and content.
4) Programmatically set the desired panel's Visible property to hidden
hiddenPanel.Visible = false;
5) or true
hiddenPanel.Visible = true;

Put this code in the usercontrol:
Size last = new Size(0, 0);
private void Me_Resize(object sender, System.EventArgs e)
{
if (last != new Size(0, 0)) {
this.Parent.Size = Size.Add(this.Parent.Size, Size.Subtract(this.Size, last));
}
last = this.Size;
}
Will also retain margins (e.g., if the panel is larger than your usercontrol or has other controls beside your usercontrol.)

If you'd like to resize it to a particular size, you can do it on the code behind:
Size panelSize = new Size(500, 500);
usercontrol1.Parent.Size = panelSize;
You could add this code to the usercontrol if that is where you wish to resize from.

To resize the control , call scale of to the control.
// To zoom in controls.
foreach (Control c in MyFlowLayoutPanel.Controls)
{
PictureBox ptc = c as PictureBox;
if (null != ptc)
{
Point pt = new Point(2, 2);
SizeF sf = new SizeF(pt);
c.Scale(sf);
}
}
// To zoom out controls.
foreach (Control c in MyFlowLayoutPanel.Controls)
{
PictureBox ptc = c as PictureBox;
if (null != ptc)
{
SizeF sf = new SizeF(0.5F, 0.5F);
c.Scale(sf);
}
}

I know that this topic is pretty old but I want to add my method, as well...
If you have a Panel containing a UserControl you can easially resize the panel.Controls by firing Form1_Resize event.
private void Form1_Resize(object sender, EventArgs e)
{
foreach (Control control in MasterPanel.Controls)
{
control.Size = MasterPanel.Size;
}
}
Just make sure that you anchor its content properly.

Related

Scrollbar in user control

I have a simple user control like this:
And yes, it has nothing inside, the controls will be dynamically added inside the user control using below on control load event:
List<Control> controlsNeed = getUserControls();
foreach(Control c in controlsNeed)
{
this.Controls.Add(c);
}
The controls loaded correctly, but if there're many controls, there won't be enough space and scroll bars will be needed.
The problem is, the scroll bar isn't added to the control despite setting the below:
Setting AutoScroll to true in the user control
Try setting AutoSize to false and true
What settings / code should be added to add scrollbar to the control?
List<Control> controlsNeed = getUserControls();
int PaddingTop = 10;
foreach (Control c in controlsNeed)
{
this.Controls.Add(c);
c.Location = new Point(0, c.Height + PaddingTop);
}
Or you can inherit the Panle control to your user control that will work like a panel control
public partial class MyControl : Panel
{
}
I think adding AutoScrollMinSize to user control should solve the problem
public MyUserControl()
{
InitializeComponent();
AutoScrollMinSize=new Size(0,1);
AutoScroll = true;
}

How to hide and show panels on a form and have it resize to take up slack?

I have a form with three panels.
I want the top two to be a fixed height, and bottom one to fill the rest of the space.
The dialog is resizable, so all should change width on resixze, and bottom one should change height.
This is important, the user must be able to stretch the form, as well as the program through code.
If I set a panel to visible = false, I want the form height to shrink so the others stay the same height.
If I set a panel to visible = true, I want the form height to grow by the height of the panel.
I will control the hiding/showing of the panels with buttons. The idea is I show certain panels for "advanced" mode in my form, and hide them for "simple" mode. I cannot have a bunch of blank space if I hide a panel, and I want the form to shrink a bunch for simple mode.
I tried doing this with panels docked to top, but a form resize by the user will not change a panel height. So that is the main trick I am asking for help on.
Anyone in this kind of situation can use the below styling:
Use 2-3 Panel to Group different Controls and place them in a single parent control say a GroupBox.
Make all the child panels Dock to the same side say "Top".
if any of the panel is jumping over another due to similar docking. In Visual Studio, go to menu View > Other Windows > Document Outline and Set the display order. (https://msdn.microsoft.com/en-us/library/46xf4h0w%28v=vs.80%29.aspx)
Set the Panel property as follows:
AutoSize: true
AutoSizeMode: GrowAndShrink
Once the panel is not visible, other panel will take away the empty space.
Hope this helps!!!
the other posts are close, there is a detail missing that I included in the solution I came up with. Its a flag to tell if the sized event was caused by a user form resize, or the program doing it when a panel is shown or hidden.
For this solution, make a form with 4 panels.
Set dock to top for all panels. Do not set any autosizing for panels or form.
Also make two buttons and place on top panel, or any panel that you will not be hiding.
The code below shows how to handle the resized event, and the showing hiding buttons.
I made them hide/show panel 2, but the code should work for any panel.
namespace ProgTesting {
public partial class Form5 : Form {
private bool doNothing = false;
public Form5() {
InitializeComponent();
cmdAdvanced.Visible = false;
}
private void cmdSimple_Click(object sender, EventArgs e) {
if (panel2.Visible) {
panel2.Visible = false;
doNothing = true;
this.MinimumSize = new Size(this.Width, this.Height - panel2.Height);
this.Height = this.Height - panel2.Height;
doNothing = false;
cmdSimple.Visible = false;
cmdAdvanced.Visible = true;
}
}
private void cmdAdvanced_Click(object sender, EventArgs e) {
if (!panel2.Visible) {
panel2.Visible = true;
doNothing = true;
this.Height = this.Height + panel2.Height;
this.MinimumSize = new Size(this.Width, this.Height);
doNothing = false;
cmdAdvanced.Visible = false;
cmdSimple.Visible = true;
}
}
private void Form5_SizeChanged(object sender, EventArgs e) {
if (!doNothing)
if (panel2.Visible)
panel3.Height = this.ClientSize.Height - panel1.Height - panel2.Height - panel4.Height;
else
panel3.Height = this.ClientSize.Height - panel1.Height - panel4.Height;
}
}
}
You do have to manage the heights going on, which is a pain but gives you control. Some shots of it working:
It sounds like what you are looking for is an Expander. Essentially a control that consists of a header and a content area, where clicking on the header toggles the content area between visible and collapsed.
I'm not 100% certain if an Expander control will automatically adjust the height of a form when it expands/collapses though. You may need to hook up an event handler to the Expander to manually adjust the height of your form when the Expander collapses.
Try looking at the Stack Overflow Question Add an expander (collapse/expand) to a Panel WinForm. There are a number of links from that question about implementing an Expander in Windows Forms, including some that provide full source code.
Update:
I've knocked up a quick demo that will accomplish what you want, in a very primitive way, not using any of the various Expander controls out there. I think that while you will find the Expanders useful, I doubt they will adjust the size of the container they are inside, unless you write some adjustment code like I have below.
Create a form that looks like this:
The two text boxes are anchored Left, Top, Right.
The toggle button is anchored Left, Top, named btnTogglePanel.
The magenta panel is anchored Left, Top, Right, Bottom, named pnlToggled.
The bottom button is anchored Right, Bottom.
Then in the code behind for the form:
public partial class ToggleableExpanderForm : Form
{
public ToggleableExpanderForm()
{
InitializeComponent();
SizeChanged += (s, args) =>
{
if (_LastSize.HasValue)
{
var diff = Size - _LastSize.Value;
if (_LastHeight.HasValue
&& !IgnoreNextResizeForLastHeightAdjustment)
{
_LastHeight += diff.Height;
}
}
_LastSize = Size;
};
}
private Size? _LastSize;
private bool IgnoreNextResizeForLastHeightAdjustment = true;
private int? _LastHeight;
private void btnTogglePanel_Click(object sender, EventArgs e)
{
var newVisibility = !pnlToggled.Visible;
int heightAdjustment = 0;
if (newVisibility)
{
if (_LastHeight.HasValue)
{
heightAdjustment = _LastHeight.Value;
_LastHeight = null;
}
}
else
{
_LastHeight = pnlToggled.Height;
heightAdjustment = -pnlToggled.Height;
}
pnlToggled.Visible = newVisibility;
IgnoreNextResizeForLastHeightAdjustment = true;
Height += heightAdjustment;
}
}
Essentially you adjust the height of the form manually when the toggle button is clicked, based on whether or not the panel is hiding/showing. You also need to take into account of what will happen when the user resizes the form when the panel is invisible, which is where the cruft around listening to the SizeChanged event comes in. You need the answer to "how MUCH has the size changed" and then you adjust your previously stored panel height as appropriate.
I don't imagine the above code is perfect, and I haven't tested it in every use case, but it gets the basic job done.
One way to go about it is to use a TableLayoutPanel for the top two panels.
The steps below will give you the resizing desired when the user resizes the form.
Start by created a TableLayoutPanel (TLP) and shrink it down from the default 2 columns, 2 rows to just 2 columns, 1 row.
Anchor it to Top, Left, and Right
Now size the TLP to fit your top two panels and place each panel in a cell of the TLP.
Anchor these two panels to all sides.
Position the 3rd panel (Panel3) below the TLP to your liking and anchor it to all sides.
To handle the hiding of Panel3 some logic will need to be added to the appropriate button_Click event. Determine what size you would like the "minimized" height to be and then just store the form size when Panel3 is visible and restore the height when it's clicked again. It should look something like this.
private void button1_Click(object sender, EventArgs e)
{
if (panel3.Visible)
{
// make invisible
panel3.Visible = false;
// storedHeight is a private member of the Form
storedHeight = Form1.ActiveForm.Height;
Form1.ActiveForm.Height = minimumHeight; // Set to predetermined minimum height
}
else
{
// make visible
panel3.Visible = true;
Form1.ActiveForm.Height = storedHeight;
}
}
Now when you hide Panel3 the form will shrink to the size of the TLP, then grow again when Panel3 is visible. Also the top panels will expand in width, but not height. You will need to change the MinSize properties of the form and its value will have to be dynamically adjusted depending on whether Panel3 is visible or not.

Drawing Rectangle as TextBox Border

I'm using validation methods for my textboxes in a class named Validators. I'm trying also to draw a rectangle on the textbox which failed to validate.
Im using this code:
private void TextBoxStyle(TextBox textBox)
{
Graphics graphics = textBox.CreateGraphics();
Pen redPen = new Pen(Color.Red);
graphics.DrawRectangle(redPen, textBox.Location.X, textBox.Location.Y, textBox.Width, textBox.Height);
}
/// <summary>
/// Validates TextBoxes for string input.
/// </summary>
public bool ValidateTextBoxes(params TextBox[] textBoxes)
{
foreach (var textBox in textBoxes)
{
if (textBox.Text.Equals(""))
{
Graphics graphics = textBox.CreateGraphics();
Pen redPen = new Pen(Color.Red);
graphics.DrawRectangle(redPen, textBox.Location.X, textBox.Location.Y, textBox.Width, textBox.Height);
return false;
}
}
return true;
}
The problem is... the rectangles wont show. Am I doing something wrong with the code ? If yes, help please.
A couple potential problems I see:
You get the Graphics object for the text box but use the textbox's offset in the form to do the drawing. Net result: the rectangle is translated outside the visible area of the textbox. Try using the location (0,0).
You draw the rectangle as wide as the textbox. Net result: right and bottom edges won't be visible. You should subtract the width of the pen from these values.
While you're at it, check out the ErrorProvider class. It may just take care of your needs off-the-shelf.
write a user control
public partial class UserControl1 : UserControl
{
private string text;
private bool isvalid = true;
public string Text
{
get { return textBox.Text; }
set { textBox.Text = value; }
}
public bool isValid
{
set
{
isvalid = value;
this.Refresh();
}
}
TextBox textBox = new TextBox();
public UserControl1()
{
InitializeComponent();
this.Paint += new PaintEventHandler(UserControl1_Paint);
this.Resize += new EventHandler(UserControl1_Resize);
textBox.Multiline = true;
textBox.BorderStyle = BorderStyle.None;
this.Controls.Add(textBox);
}
private void UserControl1_Resize(object sender, EventArgs e)
{
textBox.Size = new Size(this.Width - 3, this.Height - 2);
textBox.Location = new Point(2, 1);
}
private void UserControl1_Paint(object sender, PaintEventArgs e)
{
if (isvalid)
ControlPaint.DrawBorder(e.Graphics, this.ClientRectangle, Color.Black, ButtonBorderStyle.Solid);
else
ControlPaint.DrawBorder(e.Graphics, this.ClientRectangle, Color.Red, ButtonBorderStyle.Solid);
}
}
update:
just added the isvalid property
you can put properties to show the border or not. if the input is valid show normal border and if the control input is invalid show the red border.
Anything drawn directly onto the TextBox will disappear as soon as the TextBox control is invalidated in some way.
A correct approach is to add a User Control to your project and add a TextBox on its canvas. Leave a little border around it.
You can now simply color the background of the user control's canvas red when needed and it will look like a border drawn around the TextBox.
You can add code directly to the user control to validate it whenever the text changes. That way, you only have to write code once and just add as many TextBoxes as you need to your forms or pages.
You shouldn't paint on a control simply from somewhere. The build in painting will override it on the next occasion. The Control has a paint event where you should paint. That will be used whenever painting is needed.
In your validate method you should just store the result of the validation somewhere so that it can be used in the paint event and call Invalidate() so that a repainting is enforced.
// You may use this
Label lblHighlight = new Label ();
Rectangle rc = new Rectangle(this.Left - 2, this.Top - 2, this.Width + 4, this.Bottom - this.Top + 4);
this.Parent.Controls.Add(lblHighlight);
lblHighlight.Bounds = rc;
lblHighlight.BackColor = "Red";

How do I put a panel of buttons into flow layout panel?

I have a panel of labels, buttons and image that I wish to put into a flow layout panel.
As seen in some tutorial, I understand that it is possible to auto align new and additional buttons into a flow layout panel.
what I would like to ask is that is it possible to put a panel WITHIN a flow layout panel and call multiple instances of the same panel to appear within the flow layout panel.
My panel code would be
this.panelNotification.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
this.panelNotification.Controls.Add(this.button1);
this.panelNotification.Controls.Add(this.lblImage);
this.panelNotification.Controls.Add(this.lblName);
this.panelNotification.Controls.Add(this.lblLinkName);
this.panelNotification.Controls.Add(this.lblLinkLocation);
this.panelNotification.Controls.Add(this.lblLocation);
this.panelNotification.Location = new System.Drawing.Point(3, 3);
this.panelNotification.Name = "panelNotification";
this.panelNotification.Size = new System.Drawing.Size(506, 100);
this.panelNotification.TabIndex = 17;
So is it possible to include the whole panel into a flow layout panel? if yes, how do i do it. thank you.
Yes, you can put a Panel into a FlowLayoutoutPanel.
No, you can't put a control several times into a FlowLayoutoutPanel (in fact you can, but it is only displayed once).
But what you could do is writing some kind of Factory-Method that creates a new Panel with new Buttons/Labels/other Controls etc. every time you call it, and add these new instances to your FlowLayoutpanel. Something like this:
public class Form1
{
private Panel CreateNotificationPanel()
{
var p = new Panel { BackColor = Color.Red };
p.Controls.Add(new Button { Text = "Test" });
return p;
}
private void Form1_Load(System.Object sender, System.EventArgs e)
{
var flp = new FlowLayoutPanel { Dock = DockStyle.Fill };
flp.Controls.Add(CreateNotificationPanel());
flp.Controls.Add(CreateNotificationPanel());
flp.Controls.Add(CreateNotificationPanel());
this.Controls.Add(flp);
}
public Form1() { Load += Form1_Load; }
}
Another (and problably better) approach would be to create a UserControl that contains your Buttons/Labels/etc. instead of using a panel and adding all controls manually. Just create with the Designer and add new instances of the UserControl to the FlowLayoutPanel.

Word wrap for a label in Windows Forms

How can one get word wrap functionality for a Label for text which goes out of bounds?
Actually, the accepted answer is unnecessarily complicated.
If you set the label to AutoSize, it will automatically grow with whatever text you put in it. (This includes vertical growth.)
If you want to make it word wrap at a particular width, you can set the MaximumSize property.
myLabel.MaximumSize = new Size(100, 0);
myLabel.AutoSize = true;
Tested and works.
The quick answer: switch off AutoSize.
The big problem here is that the label will not change its height automatically (only width). To get this right you will need to subclass the label and include vertical resize logic.
Basically what you need to do in OnPaint is:
Measure the height of the text (Graphics.MeasureString).
If the label height is not equal to the height of the text set the height and return.
Draw the text.
You will also need to set the ResizeRedraw style flag in the constructor.
In my case (label on a panel) I set label.AutoSize = false and label.Dock = Fill.
And the label text is wrapped automatically.
There is no autowrap property but this can be done programmatically to size it dynamically. Here is one solution:
Select the properties of the label
AutoSize = True
MaximumSize = (Width, Height) where Width = max size you want the label to be and Height = how many pixels you want it to wrap
From MSDN, Automatically Wrap Text in Label:
using System;
using System.Text;
using System.Drawing;
using System.Windows.Forms;
public class GrowLabel : Label {
private bool mGrowing;
public GrowLabel() {
this.AutoSize = false;
}
private void resizeLabel() {
if (mGrowing)
return;
try {
mGrowing = true;
Size sz = new Size(this.Width, Int32.MaxValue);
sz = TextRenderer.MeasureText(this.Text, this.Font, sz, TextFormatFlags.WordBreak);
this.Height = sz.Height;
}
finally {
mGrowing = false;
}
}
protected override void OnTextChanged(EventArgs e) {
base.OnTextChanged(e);
resizeLabel();
}
protected override void OnFontChanged(EventArgs e) {
base.OnFontChanged(e);
resizeLabel();
}
protected override void OnSizeChanged(EventArgs e) {
base.OnSizeChanged(e);
resizeLabel();
}
}
I had to find a quick solution, so I just used a TextBox with those properties:
var myLabel = new TextBox
{
Text = "xxx xxx xxx",
WordWrap = true,
AutoSize = false,
Enabled = false,
Size = new Size(60, 30),
BorderStyle = BorderStyle.None,
Multiline = true,
BackColor = container.BackColor
};
Have a better one based on #hypo 's answer
public class GrowLabel : Label {
private bool mGrowing;
public GrowLabel() {
this.AutoSize = false;
}
private void resizeLabel() {
if (mGrowing)
return;
try {
mGrowing = true;
int width = this.Parent == null ? this.Width : this.Parent.Width;
Size sz = new Size(this.Width, Int32.MaxValue);
sz = TextRenderer.MeasureText(this.Text, this.Font, sz, TextFormatFlags.WordBreak);
this.Height = sz.Height + Padding.Bottom + Padding.Top;
} finally {
mGrowing = false;
}
}
protected override void OnTextChanged(EventArgs e) {
base.OnTextChanged(e);
resizeLabel();
}
protected override void OnFontChanged(EventArgs e) {
base.OnFontChanged(e);
resizeLabel();
}
protected override void OnSizeChanged(EventArgs e) {
base.OnSizeChanged(e);
resizeLabel();
}
}
int width = this.Parent == null ? this.Width : this.Parent.Width; this allows you to use auto-grow label when docked to a parent, e.g. a panel.
this.Height = sz.Height + Padding.Bottom + Padding.Top; here we take care of padding for top and bottom.
Put the label inside a panel
Handle the ClientSizeChanged event for the panel, making the
label fill the space:
private void Panel2_ClientSizeChanged(object sender, EventArgs e)
{
label1.MaximumSize = new Size((sender as Control).ClientSize.Width - label1.Left, 10000);
}
Set Auto-Size for the label to true
Set Dock for the label to Fill
All but step 2 would typically be done in the designer window.
Not sure it will fit all use-cases but I often use a simple trick to get the wrapping behaviour:
put your Label with AutoSize=false inside a 1x1 TableLayoutPanel which will take care of the Label's size.
Set the AutoEllipsis Property to 'TRUE' and AutoSize Property to 'FALSE'.
If your panel is limiting the width of your label, you can set your label’s Anchor property to Left, Right and set AutoSize to true. This is conceptually similar to listening for the Panel’s SizeChanged event and updating the label’s MaximumSize to a new Size(((Control)sender).Size.Width, 0) as suggested by a previous answer. Every side listed in the Anchor property is, well, anchored to the containing Control’s respective inner side. So listing two opposite sides in Anchor effectively sets the control’s dimension. Anchoring to Left and Right sets the Control’s Width property and Anchoring to Top and Bottom would set its Height property.
This solution, as C#:
label.Anchor = AnchorStyles.Left | AnchorStyles.Right;
label.AutoSize = true;
If you really want to set the label width independent of the content, I find that the easiest way is this:
Set autosize true
Set maximum width to how you want it
Set minimum width identically
Now the label is of constant width, but it adapts its height automatically.
Then for dynamic text, decrease the font size. If necessary, use this snippet in the sub where the label text is set:
If Me.Size.Height - (Label12.Location.Y + Label12.Height) < 20 Then
Dim naam As String = Label12.Font.Name
Dim size As Single = Label12.Font.SizeInPoints - 1
Label12.Font = New Font(naam, size)
End If
This helped me in my Form called InpitWindow:
In Designer for Label:
AutoSize = true;
Achors = Top, Left, Right.
private void InputWindow_Shown(object sender, EventArgs e) {
lbCaption.MaximumSize = new Size(this.ClientSize.Width - btOK.Width - btOK.Margin.Left - btOK.Margin.Right -
lbCaption.Margin.Right - lbCaption.Margin.Left,
Screen.GetWorkingArea(this).Height / 2);
this.Height = this.Height + (lbCaption.Height - btOK.Height - btCancel.Height);
//Uncomment this line to prevent form height chage to values lower than initial height
//this.MinimumSize = new Size(this.MinimumSize.Width, this.Height);
}
//Use this handler if you want your label change it size according to form clientsize.
private void InputWindow_ClientSizeChanged(object sender, EventArgs e) {
lbCaption.MaximumSize = new Size(this.ClientSize.Width - btOK.Width - btOK.Margin.Left * 2 - btOK.Margin.Right * 2 -
lbCaption.Margin.Right * 2 - lbCaption.Margin.Left * 2,
Screen.GetWorkingArea(this).Height / 2);
}
Whole code of my form
If the dimensions of the button need to be kept unchanged:
myButton.Text = "word\r\nwrapped"
The simple answer for this problem is to change the DOCK property of the Label. It is "NONE" by default.
If you are entering text into the label beforehand, you can do this.
In the designer,
Right-Click on the label and click Properties.
In Properties, search for text tab.
Click in the tab and click on the arrow button next to it.
A box will popup on top of it.
You can press enter in the popup box to add lines and type as in notepad!
(PRESS ENTER WHERE YOU WANT TO WRAP THE LABEL TEXT)
I would recommend setting AutoEllipsis property of label to true and AutoSize to false. If text length exceeds label bounds, it'll add three dots (...) at the end and automatically set the complete text as a tooltip. So users can see the complete text by hovering over the label.
I have a label that autowraps and grows to whatever size in a right docked autosize panel, whose width is set by other content.
Label (in tablelayoutpanel) Autosize = True.
TableLayoutPanel (in panel) Autosize = True, AutoSizeMode = GrowAndShrink, Dock = Bottom, one Column SizeType = 100%, one Row SizeType = 100%.
Panel (right docked in form) AutoSize = True, AutoSizeMode = GrowAndShrink, Dock = Right.
Use System.Windows.Forms.LinkLabel instead of Label and set the property LinkArea as below.
myLabel.LinkArea = new LinkArea(0, 0);
Use style="overflow:Scroll" in the label as in the below HTML. This will add the scroll bar in the label within the panel.
<asp:Label
ID="txtAOI"
runat="server"
style="overflow:Scroll"
CssClass="areatext"
BackColor="White"
BorderColor="Gray"
BorderWidth="1"
Width = "900" ></asp:Label>

Categories