[RESOLVED] Center vertical align controls with UserControl in designer

[wey97]

I have a UserControl that include several TextBoxes spaced horizontally. In the designer, the TextBox, Label, Button, CheckBox, etc. all will center align with each other. You notice the blue alignment guide lines change to magenta when the controls are centered with each other. Can this be done with a UserControl?

[dee-u]

Can you expand more? I did not quite get what you wanted.

[jmcilhinney]

I have a UserControl that include several TextBoxes spaced horizontally. In the designer, the TextBox, Label, Button, CheckBox, etc. all will center align with each other. You notice the blue alignment guide lines change to magenta when the controls are centered with each other. Can this be done with a UserControl?

That pink line doesn't indicate centre alignment. It indicates that the controls' text baseline is aligned, i.e. the bottom of the text in the two controls will be aligned.

[wey97]

That pink line doesn't indicate centre alignment. It indicates that the controls' text baseline is aligned, i.e. the bottom of the text in the two controls will be aligned.

I see what you mean but it's effectively the same thing. The one line controls text align with each other and the text is centered with the control input.

I'm wondering how this is accomplished so I can align single line controls with this control in the designer.

[jmcilhinney]

It's not effectively the same thing at all. Try aligning two controls with different font sizes that way. Also, as you're aware, not all controls have a text baseline.

I'm not sure how you define a text baseline for a control but, if what you want is to align by centre, it's irrelevant anyway. There are buttons on the designer toolbar that allow you to do things like that.

[NickThissen]

I've never used it before, but there are two properties in a control designer that may be useful:
- ParticipatesWithSnapLines (boolean)
- SnapLines (IList)


You will need to give your UserControl a custom designer and override those properties. What you need to do in the properties I'm not really sure, but I'm sure MSDN or google can give you some information.

To create a custom designer you first need to add a reference to System.Design.
Then you create a class that inherits ControlDesigner and let it override the two properties (possibly more, there's loads you can do with control designers!). Finally you need to tell your UserControl to use your custom designer, which you do by using the Designer attribute (see line 7).

Here's a very quick example:

using System.Windows.Forms;
using System.Windows.Forms.Design;
using System.Windows.Forms.Design.Behavior;
 
namespace SnapLinesTest
{
    [Designer(typeof(UserControlDesigner))]
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }
 
        internal class UserControlDesigner : ControlDesigner
        {
            public override bool ParticipatesWithSnapLines
            {
                get
                {
                    return true;
                }
            }
 
            public override System.Collections.IList SnapLines
            {
                get
                {
                    List<SnapLine> lines = new List<SnapLine>();
                    lines.Add(new SnapLine(SnapLineType.Horizontal, 5));
                    lines.Add(new SnapLine(SnapLineType.Left, 3));
                    return lines;
                }
            }
        }
    }
}

I just guessed that you could simply return a List(Of SnapLine) with a few new SnapLine objects. I have no idea how to control the snaplines exactly, when I tried this I got no snaplines whatsoever.. But I'm sure you can get it to work.

[wey97]

Nick, you got me on the right track.

You need to cast base.SnapLines to an ArrayList to manipulate it. I added an arbitrary baseline at the bottom of one of the TextBoxes:

[Designer(typeof(SnapLineTestControlDesigner))]
public partial class SnapLineTest : UserControl
{
    public SnapLineTest() {
        InitializeComponent();
    }
 
    class SnapLineTestControlDesigner : ControlDesigner
    {
        public override IList SnapLines {
            get {
                ArrayList snapLines = base.SnapLines as ArrayList;
                SnapLineTest control = Control as SnapLineTest;
 
                snapLines.Add(new SnapLine(SnapLineType.Baseline, control.txtName.Top + control.txtName.Height));
 
                return snapLines;
            }
        }
    }
}

That wasn't quite it, so it occurred to me that if I could access the SnapLines in the TextBox, I could use those properties for my new SnapLine. This would adjust for font changes as jmcilhinney noted:

[Designer(typeof(SnapLineTestControlDesigner))]
public partial class SnapLineTest : UserControl
{
    public SnapLineTest() {
        InitializeComponent();
    }
 
    class SnapLineTestControlDesigner : ControlDesigner
    {
        public override IList SnapLines {
            get {
                ArrayList snapLines = base.SnapLines as ArrayList;
                SnapLineTest control = Control as SnapLineTest;
 
                if(control != null) {
                    using(ControlDesigner controlDesigner = TypeDescriptor.CreateDesigner(control.txtName, typeof(IDesigner)) as ControlDesigner) {
 
                        if(controlDesigner != null) {
                            controlDesigner.Initialize(control.txtName);
 
                            foreach(SnapLine line in controlDesigner.SnapLines) {
                                if(line.SnapLineType == SnapLineType.Baseline) {
                                    snapLines.Add(new SnapLine(line.SnapLineType, line.Offset + control.txtName.Top, line.Filter, line.Priority));
                                }
                            }
                        }
                    }
                }
 
                return snapLines;
            }
        }
    }
}