I need help to make vertical scrollbar work with the panel to scroll down the panel, i tried to make AutoScroll = true but not work, so how I can set yp the vertical scrollbar??
Thanks
Assuming your panel is named panel1(or else replace it),try the following and you shall see the scrollbars:
Button b = new Button();
b.Location = new Point(20, panel1.Height + 20);
panel1.Controls.Add(b);
I just added a button for demonstration purposes you add whatever you need.
Or as i said in the comments using the autoscrollminsize:
panel1.AutoScrollMinSize = new Size(panel1.Width + 50, panel1.Height + 50);
Related
Can anyone help me to understand the usefulness of the Margin property?
Using the simple scenario below, I can't see how it's useful
SET UP
I created a simple app to test this:
Created a new WinForms app from the template
Opened Form1 in the designer
Added a 'Panel' (called Panel1) onto Form1 from the toolbox, with:
Dock = Fill;
Size.Width = 800px;
Size.Height = 450px`;
Added two child 'Panels' onto Panel1
Panel2 has Dock = Left
Panel3 has Dock = Right
Both Panel2 and Panel3 have Size.Width = 400px, Size.Height = 450px (so Panel2 and Panel3 effectively split Panel1 into 2 down the middle)
WHY THE PADDING PROPERTY MAKES SENSE TO ME:
The usefulness of Padding is obvious in the designer - it enforces space between the border of the parent (Panel1) and its contents (Panel2 and Panel3)).
So if I set Panel1.Padding.All = 10, then the Size.Height of both Panel2 and Panel3 is forced to decrease (by 20px) to 430px.
Their Size.Width stays the same (they just become overlapped).
Winforms then prevents the Size.Height of Panel2/Panel3 from being increased above 430px, as this would encroach into the padding space of Panel1.
This all makes sense to me
WHY THE MARGIN PROPERTY DOES NOT MAKE SENSE TO ME
Margin is the space around the border of an element - it keeps other elements from getting too close to the element you're setting the Margin on.
So I thought that if I set Margin.Right (on Panel2) to 10px, this would force the Size.Width of Panel3 to decrease (so that it wasn't encroaching on the margin of Panel2).
Instead, setting this right margin appears to have no visible impact on the form?
The Margin property is primarily used by the visual designer and reflected with "snaplines" when positioning controls on the design surface.
See this walkthrough from Microsoft.
One way to think about it (generally) is that Margin is something that happens outside the control whereas Padding is something that happens inside. Also, the "total" effect can be the result of the parent's padding added to the margin of the child control.
The MainForm has padding of 25 (shown in blue) and contains a FlowLayoutPanel set to Dock.Fill. To avoid confusion, the padding and margin of the flow layout panel is set to 0.
The 6 child controls of the flow layout panel set their own left-top margin to 10 and bottom margin to 40. At the top left and the bottom of each child the BackColor of LightSalmon shows through. There is a total of 50 from the bottom of one child to the top of the next one below. Each child control also sets its padding value to 15 which will apply on all four sides of the buttons it contains.
The padding and margin of Button are also set to 0. The the button is auto-sized and centered because it is anchored on all sides.
public partial class MainForm : Form
{
public MainForm()
{
InitializeComponent();
// Main form Padding in light blue
BackColor = Color.LightSkyBlue;
Padding = new Padding(25);
flowLayoutPanel.BackColor = Color.LightSalmon;
// Set these to 0 and let the individual controls
// manage the padding and margins.
flowLayoutPanel.Margin = new Padding(all: 0);
flowLayoutPanel.Padding = new Padding(all: 0);
for (int i = 1; i <= 6; i++)
{
var panel = new TableLayoutPanel
{
Name = $"panel{i}",
Size = new Size(200, 100),
// Margin 'outside' the panel will show in Light Salmon.
// This will space the panels inside the FlowLayoutPanel
Margin = new Padding(left: 10, top: 10, right: 0, bottom: 40),
// The button inside this panel will have Padding around it.
Padding = new Padding(all: 15),
BackColor = Color.LightGreen,
BackgroundImage = new Bitmap(
Path.Combine(
AppDomain.CurrentDomain.BaseDirectory,
"Images",
"back-image.png"
)),
BackgroundImageLayout = ImageLayout.Stretch,
};
// Add button to internal panel
var button = new Button
{
Name = $"button{i}",
Text = $"Button {(char)(64 + i)}",
BackColor = Color.DarkSeaGreen,
ForeColor = Color.WhiteSmoke,
// By anchoring the button, it will autosize
// respecting the Padding of its parent.
Anchor = AnchorStyles.Left | AnchorStyles.Top | AnchorStyles.Right | AnchorStyles.Bottom,
Margin = new Padding(all: 0),
Padding = new Padding(all: 0),
};
panel.Controls.Add(button);
flowLayoutPanel.Controls.Add(panel);
}
}
}
I somehow noticed, that while I'm creating a control in my application, it first appears as weird rectangle and then it "shrinks" to it's correct form.
First thing you'll see after creation
Correctly created object
My question is, why I first see the rectangle in top left corner and then it suddenly changes to it's correct form. It's like split second thing (I had to use Thread.Sleep 'cos it's impossible to screenshot it), but my eyes can still see this and I'm really triggered when it's happening.
This is the code, where I'm creating the control:
var label = new Label
{
AutoSize = true,
TextAlign = ContentAlignment.MiddleLeft,
Font = new Font("Courier New", 9F, FontStyle.Regular,
GraphicsUnit.Point, 238),
Text = keyword,
Margin = new Padding(0, 6, 25, 3),
Padding = new Padding(0, 3, 0, 0)
};
var button = new Button
{
BackgroundImage = Image.FromFile("../../../Images/cross_200x200.png"),
BackgroundImageLayout = ImageLayout.Stretch,
Dock = DockStyle.Right,
Width = 21,
Height = 21,
FlatStyle = FlatStyle.Flat,
};
button.FlatAppearance.BorderSize = 0;
var pan = new Panel
{
AutoSize = true,
Padding = new Padding(0, 0, 1, 1),
BackColor = Color.PowderBlue,
BorderStyle = BorderStyle.FixedSingle,
Tag = keyword
};
button.Click += delegate
{
_keywords.Remove(pan.Controls.OfType<Label>().First().Text);
pan.Dispose();
StatusLabel.Text = $#"Removed {keyword}";
};
pan.Controls.Add(label);
pan.Controls.Add(button);
FlowLayoutPanelMain.Controls.Add(pan);
Everytime a "keyword" is added to FlowLayoutPanel control, at first it's a rectangle in top left corner and immediately after that it's fine.
With help from a friend of mine, we figured out, that this is happening due to Windows Forms old technology (It's probably not happening in .NET Core's WPF) and it's inability of creating controls at runtime. So, the offered solution for this seems to be just .Hide() the control, .Add() it to the FlowLayoutPanel and then simply .Show() it back, now my eyes will be satisfied.
...
pan.Hide();
FlowLayoutPanelMain.Controls.Add(pan);
pan.Show();
...
Try to remove AutoSize property and assign a new Size() to the panel
AutoSize = false,
Worked for me
I am having a panel in Winforms which loads panels in it during a method call.
In the method call I have written following code:
//to get number of panel present in main panel so that new panel position can be set
int counT = panel1.Controls.Count;
Panel p = new Panel();
p.Location = new Point(3, 3 + (counT * 197));
p.Size = new Size(280, 150);
//To add panel to parent panel
panel1.Controls.Add(p);
Every time I call the method it will load a panel in the main panel. Everything works fine if i didn't scroll the scroll bar. Once I scroll the Scroll bar to down and after that i call the method, the distance between panels increases.
As per logic written the distance between two panel should be 197 pixel along Y axis, but it is increasing by more.
I have set AutoScroll=true
Any help !!!
That's quite strange behavior which I didn't know until now (and I have a lot experience in WF). It can be seen when the parent panel is scrolled when the code above is executed. I was thinking that child control positions are relative to the ClientRectangle, but it turns out that they are accounting the DisplayRectangle.
Shortly, instead of this
p.Location = new Point(3, 3 + (counT * 197));
use this
var parentRect = panel1.DisplayRectangle;
p.Location = new Point(parentRect.X + 3, parentRect.Y + 3 + (counT * 197));
Panel.AutoScrollPosition affects Location property of all child controls. Scrolling works in this way. So you should keep in mind that, for example you could store current scroll position, move position to (0,0), add new controls, and restore scroll position after all
//to get number of panel present in main panel so that new panel position can be set
int counT = panel1.Controls.Count;
var pos = this.panel1.AutoScrollPosition; // Whe are storing scroll position
this.panel1.AutoScrollPosition = new Point(Size.Empty);
Panel p = new Panel();
p.Location = new Point(3, 3 + (counT * 197));
p.Size = new Size(280, 150);
p.BorderStyle = BorderStyle.FixedSingle;
//To add panel to parent panel
panel1.Controls.Add(p);
this.panel1.AutoScrollPosition = new Point(Math.Abs(pos.X), Math.Abs(pos.Y)); // We are restoring scroll position
I want to add Buttons to a FlowLayoutPanel. The Buttons might contain longer texts with spaces between the words. The Buttons are Autosize=true and AutoSizeMode = AutoSizeMode.GrowAndShrink. Further more I set the MaximumSize property to (maxwidth,0). maxwidth is the width of the panel. So the button does not grow too wide.
What I see is, that the widht of the Button is limited by the MaximumSize property, but when text wrapping occurs, the Button's height doesn't autosize to the height of the wrapped text. Is there a solution to that problem?
I also tried this manually sizing the button like this:
using (Graphics cg = this.CreateGraphics()) {
SizeF size = cg.MeasureString(button.Text, button.Font, 200);
button.Width = (int)size.Width+20;
button.Height = (int)size.Height+20;
button.Text = someLongTextWithSpaces;
}
But please note that I added 20 to the calculated size. It's working, but is there a proper way to determin this additional size? Maybe 2x Padding + ?????
A few hours later...
I came to this version which seems to work quite fine.
using (Graphics cg = this.CreateGraphics()) {
var fmt = TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter | TextFormatFlags.WordBreak;
var prop = new Size(tableLayoutPanel1.Width - 20, 0);
var size = TextRenderer.MeasureText(button.Text, button.Font, prop, fmt);
int border = button.Height - button.Font.Height;
button.Width = (int)size.Width + border;
button.Height = (int)size.Height + border;
button.Text = someLongTextWithSpaces;
}
It seems that the initial button height is borders + the height the font. So I calculated the border subtracting button.Height-button.font.Height.
According to Hans, I now use the TextRenderer.MeasureText. I tested it without enabling VisualStyles and it worked fine. Any comments on that?
There is a proper way, but it isn't exactly very subtle. Reverse-engineering it from the ButtonRenderer class source code, the Winforms class that draws the button text, you must use the TextRenderer class to measure the text. And you must use the VisualStyleRenderer.GetBackgroundContentRectangle() method to obtain the effective drawing bounds. Note that it is smaller than the button's Size because of the border and a margin that depends on the selected visual style.
Non-trivial problems are mapping a calculated content rectangle back to the outer button size and dealing with old machines that don't have visual styles enabled. Sample code that appeared to arrive at the correct size:
private static void SetButtonSize(Graphics gr, Button button) {
VisualStyleElement ButtonElement = VisualStyleElement.Button.PushButton.Normal;
var visualStyleRenderer = new VisualStyleRenderer(ButtonElement.ClassName, ButtonElement.Part, 0);
var bounds = visualStyleRenderer.GetBackgroundContentRectangle(gr, button.Bounds);
var margin = button.Height - bounds.Height;
var fmt = TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter | TextFormatFlags.WordBreak;
var prop = new Size(bounds.Width, 0);
var size = TextRenderer.MeasureText(button.Text, button.Font, prop, fmt);
button.ClientSize = new Size(button.ClientSize.Width, size.Height - margin);
}
protected override void OnLoad(EventArgs e) {
using (var gr = this.CreateGraphics()) {
SetButtonSize(gr, this.button1);
}
base.OnLoad(e);
}
Not extensively tested for corner cases, can't say I recommend this.
It seems that the initial button height is borders + the height the font. So I calculated the border subtracting button.Height-button.font.Height. (See the last block of my original post)
This also works with VisualStyles enabled/disabled.
You should control the line breaks by adding newline characters in the text. Automatic text wrapping won't work with spaces alone:
button1.Text = "123232131232\r\nfgfdgfdgdfgdfgdf\r\nASDSADSDASD";
Or :
button1.Text = "123232131232" + Environment.NewLine +
"fgfdgfdgdfgdfgdf" + Environment.NewLine + "ASDSADSDASD";
If you'd rather get the automatic wrapping you could try to use TextMeasure to determine the height needed for the text and then set the button's height accordingly but that may need some extra attention..
But I suggest to consider using Labels instead. For a Label the wrapping works out of the box.. Huge Buttons with varying sizes are non-standard UI elements.
Adding some gui modifications and I want to have a button which is 10pixels away from the forms left and right border. With this code the right border of the button is around 20-30 pixel outside the form window. Why is that? How can I position my button to be exactly 10pixels away from the form borders ?
int margin = 10;
meny1 = new Button();
meny1.Top = 50;
meny1.Left = margin;
meny1.Size = new Size(this.Width - (2*margin), 30);
You should calculate with this.ClientWidth although I would expect the difference to be just the BorderSize, not 20 pixels.
Use the Form.ClientWidth. This code worked for me.
button1.Left = 10;
button1.Width = this.ClientRectangle.Width - 20;