SuperPanel is a general purpose container control. It includes numerous properties that change its appearance. These properties make it possible to have many different visual styles for your application. This walkthrough demonstrates how to use SuperPanel to create one such visual style. In this walkthrough you will create a styled dialog used to capture employee details. The image below shows the completed dialog.

 

Creating the application and form

1. Create a new WinFrom application. You can use C# or Visual Basic.
2. Add a Button to Form1. Call this button buttonEmployeeDetails (ButtonEmployeeDetails for Visual Basic).
3. Add another Form to the project. Call this Form EmployeeDetailsDialog.
4. Select the EmployeeDetailsDialog and set the following properties to the specified value:
   1. BackColor = 255, 245, 235
   2. FormBorderStyle = None
   3. Text = Employee Details
   4. Size = 450,460
   5. StartPosition = CenterParent
   6. ShowInTaskbar = false;
   7. TransparencyKey = 255, 245, 235
5. Double click the buttonEmployeeDetails Button and implement the Click event handler as shown below.
   

   Visual Basic
   Private Sub ButtonEmployeeDetails_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ButtonEmployeeDetails.Click Dim dialog As EmployeeDetailsDialog = New EmployeeDetailsDialog dialog.ShowDialog() End Sub

   C#
   private void buttonEmployeeDetails_Click(object sender, EventArgs e) { EmployeeDetailsDialog dialog = new EmployeeDetailsDialog(); dialog.ShowDialog(); }

Add striped SuperPanel to the EmployeeDetailsDialog

1. Add a SuperPanel to the EmployeeDetailsDialog Form.
2. Name the SuperPanel superPanelMain (SuperPanelMain for Visual Basic).
3. Select superPanelMain and set the following properties to the specified value:
   1. Dock = Fill
   2. Padding = 0,30,0,0
   3. Text = ""
   4. BorderColor = SteelBlue
   5. ClientBackground.Color = WhiteSmoke
   6. ClientBackground.FadeColor = DarkGray
   7. ClientBackground.FadeDirection = SE
   8. ClientBackground.Type = Faded
   9. Image.Predefined = Person (This image is on the Icons page)
   10. Watermark.Predefined = Working 2 (This image is on the Clip art page)
   11. Stripes.Color = DimGray
   12. Stripes.FadeColor = White
   13. Stripes.FadeDirection = E
   14. Stripes.Opacity = 50
   15. Stripes.Type = Fade
   16. StripesInClientRegionOnly = true
   17. StripeSpace = 3
   18. StripeWidth = 2
   19. TitleBackground.Color = White
   20. TitleBackground.FadeColor = SteelBlue
   21. TitleBackground.FadeDirection = S
   22. TitleBackground.FadeLocation = NearMiddle
   23. TitleBackground.Type = Faded
   24. TitleIgnoreRounding = true
   25. TitleRounding = 0
   26. TitleSizeToContent = false
   27. TitleText = Employee Details
   28. ImageBounds = 4,0,68,66
   29. WatermarkBounds = 15,282,113,121

Add lowered SuperPanel to the EmployeeDetailsDialog

1. Add a SuperPanel to superPanelMain.
2. Name this SuperPanel superPanelLowered (SuperPanelLowered for Visual Basic).
3. Select superPanelLowered and set the following properties to the specified value:
   1. Text = ""
   2. Background.Color = Silver
   3. Background.Opacity = 175
   4. Background.Type = Solid
   5. Edge = 3
   6. EdgeStyle = Lowered
   7. BorderWidth = None
   8. Location = 10,66
   9. Size = 430,344

Add the CommandButtons

1. Add two CommandButton controls to the EmployeeDetailsDialog.
2. Name the one CommandButton buttonOk (ButtonOk for Visual Basic).
3. Select the buttonOk and set the following properties to the specified value:
   1. AutomaticSize = false
   2. ButtonStyle = Mac
   3. Text = Ok
   4. DialogResult = OK
   5. BackColor = SteelBlue
   6. HotTrackBackColor = 255,192,128
   7. PressedBackColor = SlateGray
4. Name the other CommandButton buttonCancel (ButtonCancel for Visual Basic).
5. Select the buttonCancel and set the following properties to the specified value:
   1. AutomaticSize = false
   2. Text = Cancel
   3. DialogResult = Cancel
6. Right click the buttonOk and select the Save style option on the context menu.
7. Right click the buttonCancel and select Apply style buttonOk option on the context menu.
8. Select the EmployeeDetailsDialog (Right click the superPanelMain and select the Select 'EmployeeDetailsDialog' option)
9. Set the Form's AcceptButton = buttonOk
10. Set the Form's CancelButton = buttonCancel

 The walkthrough is complete. You can continue by adding the appropriate controls to the superPanelLowered.

 

 

---