Forums Home / ComponentOne / WinForms Edition
Posted by: hyoudoing00 on 1 December 2020, 4:14 am EST
hyoudoing00
Posted 1 December 2020, 4:14 am EST
Hello guys, we have a legacy Windows Forms application that our customer is demanding us to visually put up to date. We don’t want to change WPF or another platform because it would be too time-consuming. So the question is, what advise could you give me to give a more modern look to a WinForms application. Thank you!!
wknauf
Posted 2 December 2020, 4:45 am EST
Well, a ribbon seems to state of the art now. Use “C1.Win.Ribbon”, not the legacy control “C1.Win.C1Ribbon”.
See https://www.grapecity.com/componentone/docs/win/online-ribbon/overview.html
Also, you can use a C1ThemeController to create a themed app: https://www.grapecity.com/componentone/docs/win/online-themes/overview.html
Hope this helps
Wolfgang
prabhat.sharma
Posted 2 December 2020, 7:10 am EST
Hi,
To give your application a new look, you can use our C1ThemeController to apply different themes to your application, you can choose one of our 25+ professionally-designed themes, or design your own theme completely from the ground up to fit your company branding and app’s design using our included ThemeDesigner application. and to give your application a modern layout you can use Ribbon control which is a ribbon-style flat menu similar to what Microsoft offers in its Office 365 applications.
Please Take a Look:
Ribbon Product Page: https://www.grapecity.com/componentone/winforms/ribbon-ui-control-winforms
Ribbon Documentation: https://www.grapecity.com/componentone/docs/win/online-ribbon/overview.html
Theme Product Page: https://www.grapecity.com/componentone/winforms/office-design-themes-winforms
Theme Documentation: https://www.grapecity.com/componentone/docs/win/online-themes/overview.html
If you have any other questions, please let me know.
@Wolfgang, thank you for your suggestions.
Regards,
Prabhat Sharma.
rachelgomez161999
Posted 25 February 2022, 8:45 am EST
The Windows Forms Designer provides many tools for building Windows Forms applications. This article illustrates how to build an app using the various tools provided by the designer, including the following tasks:
-Arrange controls using snaplines.
-Accomplish designer tasks using smart tags.
-Set margins and padding for controls.
-Arrange controls using a TableLayoutPanel control.
-Partition your control’s layout by using a SplitContainer control.
-Navigate your layout with the Document Outline window.
-Position controls with the size and location information display.
-Set property values using the Properties window.
-When you’re finished, you’ll have a custom control that’s been assembled using many of the layout features available in the Windows Forms Designer. This control implements the user interface (UI) for a simple calculator. The following image shows the general layout of the calculator control:
-Create the custom control project
The first step is to create the DemoCalculator control project.
-Open Visual Studio and create a new Windows Forms Control Library project. Name the project DemoCalculatorLib.
-To rename the file, in Solution Explorer, right-click UserControl1.vb or UserControl1.cs, select Rename, and change the file name to DemoCalculator.vb or DemoCalculator.cs. --Select Yes when you are asked if you want to rename all references to the code element “UserControl1”.
-The Windows Forms Designer shows the designer surface for the DemoCalculator control. In this view, you can graphically design the appearance of the control by selecting controls and components from Toolbox and placing them on the designer surface. For more information about custom controls, see Varieties of custom controls.
Design the control layout
The DemoCalculator control contains several Windows Forms controls. In this procedure, you’ll arrange the controls using the Windows Forms Designer.
-In the Windows Forms Designer, change the DemoCalculator control to a larger size by selecting the sizing handle in the lower-right corner and dragging it down and to the right. In the lower-right corner of Visual Studio, find the size and location information for controls. Set the size of the control to width 500 and height 400 by watching the size information as you resize the control.
-In Toolbox, select the Containers node to open it. Select the SplitContainer control and drag it onto the designer surface.
-The SplitContainer is placed on the DemoCalculator control’s designer surface.
-In the Properties window, change the value of the Dock property to None.
-The SplitContainer control shrinks to its default size and no longer follows the size of the DemoCalculator control.
-Select the smart tag glyph (Smart Tag Glyph) on the upper-right corner of the SplitContainer control. Select Dock in Parent Container to set the Dock property to Fill.
-The SplitContainer control docks to the DemoCalculator control’s boundaries.
Select the vertical border between the panels and drag it to the right, so that most of the space is taken by the left panel.
-The SplitContainer divides the DemoCalculator control into two panels with a movable border separating them. The panel on the left will hold the calculator buttons and display, and the panel on the right will show a record of the arithmetic operations performed by the user.
-In the Properties window, change the value of the BorderStyle property to Fixed3D.
-In Toolbox, select the Common Controls node to open it. Select the ListView control and drag it into the right panel of the SplitContainer control.
-Select the ListView control’s smart tag glyph. In the smart tag panel, change the View setting to Details.
-In the smart tag panel, select Edit Columns.
-The ColumnHeader Collection Editor dialog box opens.
-In the ColumnHeader Collection Editor dialog box, select Add to add a column to the ListView control. Change the value of the column’s Text property to History. Select OK to create the column.
-In the smart tag panel, select Dock in Parent Container, and then select the smart tag glyph to close the smart tag panel.
-From the Containers node Toolbox, drag a TableLayoutPanel control into the left panel of the SplitContainer control.
-The TableLayoutPanel control appears on the designer surface with its smart tag panel open. The TableLayoutPanel control arranges its child controls in a grid. The TableLayoutPanel control will hold the DemoCalculator control’s display and buttons. For more information, see Walkthrough: Arrange controls using a TableLayoutPanel.
-Select Edit Rows and Columns on the smart tag panel.
-The Column and Row Styles dialog box opens.
-Select the Add button until five columns are displayed. Select all five columns, and then select Percent in the Size Type box. Set the Percent value to 20. This sets each column to the same width.
-Under Show, select Rows.
-Select Add until five rows are displayed. Select all five rows, and the select Percent in the Size Type box. Set the Percent value to 20. This sets each row to the same height.
-Select OK to accept your changes, and then select the smart tag glyph to close the smart tag panel.
-In the Properties window, change the value of the Dock property to Fill.
Regards,
Rachel Gomez
