AutoLayout by Examples - Part 3 - Dialog 8

  • Article

Dialog 8: Custom control inside a dialog

 

Project Name: Channel.csproj. Download source.

 

Characteristics:

  • Multi-channel custom control
  • Overlapping containers

 

Screen Shots:

 

 

 

 

Dialog Designer Layout:

 

Dialog Document Outline:

 

 

Custom Control Designer Layout:

 

Custom Control Document Outline:

 

Custom Control Key Notes:

  • Identically placed and sized channel containers are panels (panelChannel1 to panelChannel4) located inside an outer panel (channelContainer)
  • The “channels” (i.e. contents on the right) are switched to visibility by toggling the respective channel panel’s Visible property. Download source.

 

        /// <summary>

        /// Switch to the specified channel

        /// </summary>

        /// <param name="channel">1,2,3,4</param>

    private void SwitchTo(int channel)

        {

            channelControlLayoutPanel.SuspendLayout();

            channelContainer.SuspendLayout();

            buttonChannel1.Checked = panelChannel1.Visible = (channel == 1) ? true : false;

            buttonChannel2.Checked = panelChannel2.Visible = (channel == 2) ? true : false;

            buttonChannel3.Checked = panelChannel3.Visible = (channel == 3) ? true : false;

            buttonChannel4.Checked = panelChannel4.Visible = (channel == 4) ? true : false;

            channelContainer.ResumeLayout(true);

            channelControlLayoutPanel.ResumeLayout(true);

        }

 

  • The channel contents are laid-out inside the channel own TableLayoutPanel (channel1LayoutPanel to channel4LayoutPanel)

 

Tricks and Tips:

  • Identically placed and sized overlapping panels are quite difficult to select in the designer. Additionally, a selected panel has to be brought to the foreground before its contents can be edited. Use the Document Outline to select the desired panel and bring it to the foreground.

 

Here are the steps to select and bring a channel panel to the foreground:

    • View > Other Windows > Document Outline. From the Document Outline window, highlight an item in the document outline to select the corresponding control in the designer and to show its property values in the Properties window.
    • Expand the outer channel container (channelContainer)
    • To select the channel 4 container (panelChannel4) and drag it to right below the channelContainer item. The order of items/nodes in the document tree defines the corresponding control’s Z-order.

 

 

 

 

 

 

 

 

 

 

 

  • Another way to bring a hidden or occluded panel to the foreground is to first select the control using the Document Outline and then, in the designer, right-click on the displayed sizing handles (i.e. little squares) to dropdown the context menu and select Bring to Front. Here are the steps:
    • In the Document Outline, select panelChannel4. In the form designer, panel panelChannel4 should be selected. Notice that even though panelChannel4 is being selected, it is not in the foreground.

 

 

    • In the form designer, right-click on one of the resize handles and select Bring to Foreground. In the screen shot below, right-clicking on the top-center resize square drops down the context menu.

 

 

   

 

 

  • New user controls like this custom control are listed at the top of Toolbox. Select the dialog form in the designer to see this list in Toolbox.

 

 

 

 

This posting is provided "AS IS" with no warranties, and confers no rights. Use of included

script samples are subject to the terms specified at https://www.microsoft.com/info/cpyright.htm