Walkthrough: Creating a Layout That Adjusts Proportion for Localization
Creating forms that are ready to be localized greatly speeds development for international markets.
This walkthrough illustrates how to create a layout that proportionally adjusts when you translate displayed string values into other languages. This process of translation is called localization. For more information, see Localizing Applications. For information about how to localize a completed Windows Form, see Walkthrough: Localizing Windows Forms
Tasks illustrated in this walkthrough include:
Creating the Project
Preserving Vertical Alignment
Enabling Proportional Resizing
When you are finished, your form will look similar to the following:
.gif "Localizable Form with TableLayoutPanel")
For the complete code listing, see How to: Design a Windows Forms Layout that Responds Well to Localization.
Not
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.
Prerequisites
In order to complete this walkthrough, you will need:
- Sufficient permissions to be able to create and run Windows Forms application projects on the computer where Visual Studio is installed.
Creating the Project
The first step is to create the application project. You will use this project to build the application that shows the data-entry form.
To create the project
- Create a Windows Application project called DemoLocalizableForm. For more information, see How to: Create a New Windows Forms Application Project.
Preserving Vertical Alignment
You can preserve the vertical alignment of your controls as their contents change with the AutoSize and Anchor properties in conjunction with the TableLayoutPanel control.
To use automatic sizing
Drag a TableLayoutPanel control from the Toolbox onto your form. Set the value of its RowCount property to 1. Set the value of its AutoSize property to true. Size the TableLayoutPanel control to occupy about half of the form.
Drag a Panel control from the Toolbox into the left cell of the TableLayoutPanel control.
Drag a Button control from the Toolbox into the Panel control. Place it in the upper-left corner of the Panel control.
Drag two more Button controls from the Toolbox into the Panel control. Position them beneath the first Button control. Use snaplines to align them vertically and to space them evenly. For more information, see Walkthrough: Arranging Controls on Windows Forms Using Snaplines.
Set the value of the AutoSize property on all three Button controls to true.
Set the value of the Panel control's AutoSize property to true, and set the value of its AutoSizeMode property to GrowAndShrink. Note The panel is sized to surround all three Button controls.
Select the TableLayoutPanel control and open the Columns and Row Styles dialog box. For more information, see How to: Edit Columns and Rows in a TableLayoutPanel Control.
Select Column1 and change the value of its SizeType property to AutoSize. Click the OK button to accept your changes. Note The cell width is sized to the width of the Panel control.
Change the value of the Anchor property on all three Button controls to Left,Right.
Change the value of the first Button control's Text property to a long string, for example "This is a long string to demonstrate a localizable form." Note All three Button controls and the TableLayoutPanel cell are resized to fit the new string length.
Enabling Proportional Resizing
You can preserve the proportions of your controls as their contents change with the AutoSize and Anchor properties in conjunction with the TableLayoutPanel control.
To enable proportional resizing
Drag a TableLayoutPanel control from the Toolbox onto your form. Position it beneath the first TableLayoutPanel control.
Set the value of the second TableLayoutPanel control's AutoSize property to true. Set the value of the ColumnCount property to 3. Set the value of the RowCount property to 1. Set the value of the Anchor property on the TableLayoutPanel control to Right, Bottom.
Drag three Button controls from the Toolbox onto the TableLayoutPanel.
Change the value of the AutoSize property on all three Button controls to true.
Change the value of the Anchor property on all three Button controls to Left, Right.
Open the Columns and Row Styles dialog box.
Select all three columns and change the SizeType property to Percent, and change the percentage value to 33. Click the OK button to accept your changes.
Change the value of the first Button control's Text property to a long string, for example "This is a long string to demonstrate a localizable form." Note that the Button controls are all resized to fit the new string length. Also note that the TableLayoutPanel control is resized and its cells are proportionally resized.
Next Steps
Now that you can create localizable forms, consider implementing a dynamic layout that proportionally adjusts as the user resizes the form. For more information, see Walkthrough: Creating a Resizable Windows Form for Data Entry.
See Also
Tasks
Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel
Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel
Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property
How to: Support Localization on Windows Forms Using AutoSize and the TableLayoutPanel Control
Walkthrough: Performing Common Tasks Using Smart Tags on Windows Forms Controls
Walkthrough: Creating a Resizable Windows Form for Data Entry