TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
Go Back  Xtreme Visual Basic Talk > > > TableLayoutPanel Margin / Padding?


Reply
 
Thread Tools Display Modes
  #1  
Old 03-22-2010, 01:16 PM
EmptyVessel's Avatar
EmptyVessel EmptyVessel is offline
Junior Contributor
 
Join Date: Nov 2008
Posts: 315
Default TableLayoutPanel Margin / Padding?


Thanks to AtmaWeapon I now know about the TableLayoutPanel Control.
It divies up panel zones exactly as I like.

What I am having issues with now is the margin or border the TableLayoutPanel places around a child control. I'd like to minimize the distance. It appears about 1/16" all around the contained control.
(So about 1/8" between two controls.) I do not see a property to adjust this.

Any thoughts?
__________________
-MT-
Reply With Quote
  #2  
Old 03-22-2010, 01:41 PM
AtmaWeapon's Avatar
AtmaWeaponTableLayoutPanel Margin / Padding? AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

I didn't believe it, but tested it out to see. For some reason, all of the controls I slapped into my test panel had a 3-pixel margin set. If you make it 0 they butt up together. This isn't a property on the table, it's a property on each control.

I'm too lazy to see if this is just a default for controls or if it's set when they're in the panel. My guess is it's a default.
__________________
.NET Resources
My FAQ threads | Tutor's Corner | Code Library
I would bet money 2/3 of .NET questions are already answered in one of these three places.
Reply With Quote
  #3  
Old 03-22-2010, 04:14 PM
snarfblam's Avatar
snarfblamTableLayoutPanel Margin / Padding? snarfblam is offline
Senior Contributor

Forum Leader
* Expert *
 
Join Date: Apr 2005
Location: USA
Posts: 896
Default

This is the default Margin value. Funny thing is I never knew what it did. It doesn't seem to affect docking. The documentation doesn't even explain what it's for.
__________________
C# _VB.NET _
Reply With Quote
  #4  
Old 03-23-2010, 02:05 PM
AtmaWeapon's Avatar
AtmaWeaponTableLayoutPanel Margin / Padding? AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

It is unclear in Windows Forms. The definition is much more apparent if you've studied layout in WPF. The idea is the same between both of them.

Padding and margin are related concepts. The margin is the amount of distance that a control has requested that its parent container places between the control's edge and the container's edge. Padding is the amount of space a container will add between its edges and its child controls.

Don't you love technical definitions? They pretty much only make sense to the person that makes them.

The key thing to understand here is the Margin and Padding properties only have an effect with respect to containers. The WinForms containers are Form, Panel, GroupBox, FlowLayoutPanel, and TableLayoutPanel. For some reason, it doesn't look like Form pays any attention to Margin or Padding, so we'll ignore it. Padding affects the things inside a container; you usually don't set it in WinForms. The Margin property affects how a control is placed in a container; it's not uncommon to set it on containers as well.

I keep trying to make an example, but I keep finding exceptions. GroupBox apparently either doesn't use its Margin or Panel doesn't respect it. Panel seems to respect Padding, but only if it contains a container like GroupBox. You know what I call this? Borked. Hosed. Broken. All I can do is say how it's *supposed* to work.

Let's say you have a GroupBox docked in a form. If you set the Form's Padding property to 10 all around, the GroupBox should shrink to leave 10 pixels between its edges and the form's edges. If you reset the form's Padding, then set the group box's Margin to 10, the same thing should happen. Thus you see that Margin is how the child tells the parent to give it some room, and Padding is how the parent gives the child some extra room. TableLayoutPanel uses it properly, and I suppose FlowLayoutPanel is but the more of these little stupid problems I find the closer I get to just being through with WinForms entirely.

In WPF, it's a little more consistent and clear. Anything that contain content uses its Padding and its content's Margin properties to determine where the child goes. For example, suppose you put an Image inside a Button. By default, the Image will fill the button. If you set the button's Padding to 10, then there will be 10 pixels of space around the edges of the Image. If you set the image's Margin to 10, there will now be 20 pixels of space around the edges of the Image.
__________________
.NET Resources
My FAQ threads | Tutor's Corner | Code Library
I would bet money 2/3 of .NET questions are already answered in one of these three places.
Reply With Quote
  #5  
Old 03-24-2010, 07:36 AM
EmptyVessel's Avatar
EmptyVessel EmptyVessel is offline
Junior Contributor
 
Join Date: Nov 2008
Posts: 315
Default

Thanks for exploring it further Atma.

I notice in WinForms that the toolstrip also understands margin for toolstripitem's left and right borders.
I used it to space out dropdown items such that they more resemble a menustrip.

Do you use VS 2010? Have they improved the WPF ide editor from 2008? The main reason I stayed away from it in 2008 was it just felt unfinished.
__________________
-MT-
Reply With Quote
  #6  
Old 03-24-2010, 08:16 AM
AtmaWeapon's Avatar
AtmaWeaponTableLayoutPanel Margin / Padding? AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

If you grok WPF, you don't use the designer. WPF isn't about pixel-perfect placement of objects; it's more about using containers to create a fluid layout. For layout purposes, it will always be easier to edit the XAML to get the results you want. Blend is much better at complex things like animations, behaviors, and retemplating. It even handles basic layout much better. But in my opinion, the "drag and drop" school of UI design is completely incompatible with how a WPF application should behave.

For example, let's say you want to make a layout with 4 equally-sized buttons in a 2x2 grid, with a TextBox spanning two columns beneath them.

You could type this XAML:
Code:
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox VerticalAlignment="Top"></TextBox>
        <UniformGrid Grid.Row="1" Rows="2" Columns="2">
            <Button></Button>
            <Button></Button>
            <Button></Button>
            <Button></Button>
        </UniformGrid>
    </Grid>
Or you could follow these steps in the designer:
  1. Click in the left margin of the grid to create a new row.
  2. Drag a text box into the top row
  3. Drag a UniformGrid into the bottom row
  4. Drop 4 buttons into the UniformGrid
  5. Hold CTRL to multi-select all 4 buttons, the UniformGrid, and the TextBox.
  6. Set the Margin property to 0 for all of them.
  7. Deselect the controls.
  8. Hold CTRL to multi-select all 4 buttons.
  9. Delete the Width property's value and leave it blank.
  10. Delete the Height property's value and leave it blank.
More than half of those steps were there to overcome the designer's desire to make everything work like Windows Forms. It's 2010, and layouts should be fluid!

So I guess my answer is "No".

Last edited by AtmaWeapon; 03-24-2010 at 08:30 AM.
Reply With Quote
  #7  
Old 03-24-2010, 08:32 AM
PlausiblyDamp's Avatar
PlausiblyDampTableLayoutPanel Margin / Padding? PlausiblyDamp is offline
Ultimate Contributor

Forum Leader
* Expert *
 
Join Date: Nov 2003
Location: Newport, Wales
Posts: 2,058
Default

I personally find the editor in 2010 to be improved over the 2008 but then again I agree with AtmaWeapon on this and tend to edit the xaml directly anyway when it comes to laying out the screen objects.

The actual design stuff is then far easier to do in Blend (i.e. creating styles, resources, triggers etc.) and this can be done without needing to make code level changes (often virtually no xaml changes either).

In all honesty I like how WPF simplifies how a windows application works (no need to override paint events, things are consistent, built in support for command and event routing, UI reports validation better etc.), however the fact it allows me to design a much cleaner application structure (MVVM!) is the biggest feature I have found. With WPF you can actually achieve a no code front end - all the logic etc. is in the back end where it belongs.
__________________
Intellectuals solve problems; geniuses prevent them.
-- Albert Einstein

Posting Guidelines Forum Rules Use the code tags
Reply With Quote
  #8  
Old 03-24-2010, 03:36 PM
EmptyVessel's Avatar
EmptyVessel EmptyVessel is offline
Junior Contributor
 
Join Date: Nov 2008
Posts: 315
Default

You and Heinlein (Rest his soul) may grok WPF fluidity, but I certainly do not.
I also have to admit the thought of working in XAML manually rubs me the wrong way.

If that is the future I may give up writing code an grow beans instead.
__________________
-MT-
Reply With Quote
  #9  
Old 03-24-2010, 04:15 PM
PlausiblyDamp's Avatar
PlausiblyDampTableLayoutPanel Margin / Padding? PlausiblyDamp is offline
Ultimate Contributor

Forum Leader
* Expert *
 
Join Date: Nov 2003
Location: Newport, Wales
Posts: 2,058
Default

Once you get used to it, especially with an editor that offers decent intellisense like VS then it isn't really that difficult to work with. If anything I find it easier because you have a very definite split between UI and code. For starters you don't find your UI is built on a hundred tiny hacks, tweaks and kludges in code working around winform oddities or badly behaved controls.

I really don't miss the chore of writing Validating event handlers and having code to manipulate UI state for errors and so on. The WPF layout system is far more flexible and consistent than winforms could ever hope to be, it just takes a bit of adjusting in how you approach things.

I would seriously recommend you sit down with VS 2008 or later and a good book or tutorial and approach it without trying to treat it as a 'new winforms'. When I first looked at WPF I hated it, simply because I was trying to do things the way I had been doing since VB3 through VB.Net and everything took longer, with more code that was harder to understand, once I got used to the XAML way the UI is down to virtually no code at all and far cleaner for it.
__________________
Intellectuals solve problems; geniuses prevent them.
-- Albert Einstein

Posting Guidelines Forum Rules Use the code tags
Reply With Quote
  #10  
Old 03-24-2010, 07:39 PM
EmptyVessel's Avatar
EmptyVessel EmptyVessel is offline
Junior Contributor
 
Join Date: Nov 2008
Posts: 315
Default

Perhaps. Of course if they keep that up they won't be able to call it "Visual" Studio anymore.

I'll look into it someday I suppose. I've never been happy with the meta languages or web based programming. This looks like more of the same. Visualizing graphical output based on textual input. I suppose I should take your advice and do some more reading before I throw stones.
__________________
-MT-
Reply With Quote
  #11  
Old 03-25-2010, 09:06 AM
AtmaWeapon's Avatar
AtmaWeaponTableLayoutPanel Margin / Padding? AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

I really like XAML vs. a visual designer. If you don't like or practice fluid layout I take pity on your users that use large fonts or resolutions different than your own.

For simple throwaway applications, I call it a tie. If all I care about is "must have 2 text boxes and a button" and I don't give a flying flip about where they are, it's easier to drag and drop my way to success. WPF's default layout container Grid makes this kind of psychopathic layout harder than it should be.

For stuff I might want to use more than once, XAML starts to take the lead. In Windows Forms, I can use the TableLayoutPanel to make a fluid layout, but it's a pain in the butt. I have to drop the panel, dock it, add the right number of rows and columns, drop the controls, configure the anchor/dock on each control, and configure the rows/columns. If I configure the rows or columns before I drop controls, any auto size rows/columns will assume a size of 0 and now I can't drop a control into them. This happens all. the. time. In WPF, I start at the top of the XAML file by adding my rows and columns and setting the size mode for each. Then, one by one I add each control. I can do it in the opposite order if I want. There's no fiddly "Oh this column is too small, let me temporarily boost its size" or "Oh crud I forgot auto-size labels don't play well, let me go turn that off..."

For a dynamic UI, WPF wins hands-down. Suppose I have some user control that I want to center on the form. Its contents may vary, so its width is variable. Here the difference between WPF and WinForms is clear. WPF requires this:
Code:
<local:MyUserControl HorizontalAlignment="Center" />
Windows Forms requires this:
Code:
Protected Overrides Sub OnResize(...)
    UpdateUserControl()
End Sub

Protected Overrides Sub OnLoad(...)
    UpdateUserControl()
End Sub

Private Sub UpdateUserControl()
    Dim controlWidth As Integer = _myUserControl.Width
    Dim newX As Integer = (ClientRectangle.Width - controlWidth) \ 2
    
    _myUserControl.Location.X = newX ' This actually won't compile but you know what I mean
End Sub
I have to write code to do it in Windows Forms. I've cheated my way around this by creating a TableLayoutPanel with three columns laid out "percent, auto, percent", but in a complicated form I can easily end up with so many layout panels that I have to resort to the property grid's dropdown to find the one I want. Which means I have to give a unique name to every layout panel, and if I don't want to pollute intellisense I have to remember to set GenerateMember to false.

I promise you, the only reason the visual designer feels easier is familiarity. I know so many little tricks to hack what I want out of controls I don't even think about performing them. But each one involves scrolling around in a property grid and fiddling with a control or dialog. Some controls I wish had a different set of default properties; every time I drop a label I turn AutoSize off. In XAML, I can write a control-specific style and force all controls to use the defaults I want. In Windows Forms, it just costs me extra clicks/time.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding? TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
 
TableLayoutPanel Margin / Padding?
TableLayoutPanel Margin / Padding?
 
-->