Udostępnij za pośrednictwem


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:

Localizable Form with TableLayoutPanel

For the complete code listing, see How to: Design a Windows Forms Layout that Responds Well to Localization.

Note

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 Visual Studio 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

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

  1. 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.

  2. Drag a Panel control from the Toolbox into the left cell of the TableLayoutPanel control.

  3. Drag a Button control from the Toolbox into the Panel control. Place it in the upper-left corner of the Panel control.

  4. 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.

  5. Set the value of the AutoSize property on all three Button controls to true.

  6. 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.

  7. 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.

  8. 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.

  9. Change the value of the Anchor property on all three Button controls to Left,Right.

  10. 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

  1. Drag a TableLayoutPanel control from the Toolbox onto your form. Position it beneath the first TableLayoutPanel control.

  2. 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.

  3. Drag three Button controls from the Toolbox onto the TableLayoutPanel.

  4. Change the value of the AutoSize property on all three Button controls to true.

  5. Change the value of the Anchor property on all three Button controls to Left, Right.

  6. Open the Columns and Row Styles dialog box.

  7. 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.

  8. 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

Reference

TableLayoutPanel

FlowLayoutPanel

Other Resources

Localizing Applications