What is RightToLeftLayout?

I discovered the https://www.microsoft.com/middleeast/MSDN is now redirected to a new MSDN page. In the past I published some articles about Arabic developement that is still relevant to date. So I'll re-publish them through my blog. So I'll regularly add some of my existing articles to the blog and keep more Arabic resources in this blog. So the first article is about RightToLeftLayout.

RightToLeftLayout is a new property introduced in Visual Studio 2005, which would enable developers to take advantage of the advanced right-to-left (rtl) support of Windows. With the introduction of RightToLeftLayout we would like to obtain the same results as mirroring, using extended styles with fewer hassles. For more information on Mirroring check this article
Implementing Mirror-Aware Controls for Windows Application with Visual Studio .NET

Facts about RightToLeftLayout:

  • It has effect if RightToLeft is set to Yes, only.
  • RightToLeftLayout is a Boolean property and the values are true or false
  • RightToLeftLayout property is not inherited by its child controls. Unlike the RightToLeft property you need to individually set the RightToLeftLayout to each individual control that supports this property.
  • RightToLeftLayout would change the origin of its control and mirror the coordinates. So the origin is at the top-right instead of the top-left of the control. The coordinates would then increase to the left, instead of the right.

 

The RightToLeftLayout property is associated with the following controls and this table describes the affect of setting RightToLeftLayout=true.

Controls Affect of RightToLeftLayout = true
DateTimePicker The control's layout is changed to rtl and the days order starts from the right to left
Form The Form's title bar is reversed, similar to localized Windows and the title is right aligned. However there are several considerations to be discussed below
ListView The control's layout is changed to rtl and the items are displayed from right to left
MonthCalendar The control's layout is changed to rtl and the days order starts from the right to left.
Progressbar The control's layout is changed to rtl and the ticks progress from the right to left.
TabControl The control's layout is changed to rtl and the first tab page is on the right and the following are on the left.
TrackBar The control's layout is changed to rtl and the arrow points to the right, in case of vertical orientation.
TreeView The control's layout is changed to rtl and the tree nodes are on the right and expand in the correct manner.

1 - The Form, while RightToLeftLayout

  • The controls are laid out from right-to-left automatically. This is a result of changing the origin we mentioned above. However, if this is not your desired behavior you can add a Panel in the Form and set it to dock-fill. This would make the panel in the background of the form and you can layout your controls in the panel without being affected by the layout change and the RightToLeftLayout property.
  • You can't have Form.backgroundImage. The Form.BackgroundImage is ignored while RightToLeftLayout is true. This is not an issue because there are several workarounds to set your form background. For example, add a PictureBox and dock it to fill the form and you’ll get a background.
  • You can't resize the form correctly while the Form.Opacity < 100%, in the case of RightToLeftLayout=true.

2 - Having owner drawn items, while RightToLeftLayout=true

If you want to render text in controls, including a Form, while setting RightToLeftLayout to true, you need to use GDI, instead of GDI+. For example to display a string you need to use TextRenderer instead of DrawString. In the case when RightToLeftLayout is set to true, you don’t need to set the rtl TextFormatFlags because they are set by default.

While RightToLeftLayout = true and RightToLeft=yes
would automatically calculate the left of the control from the right edge of drawing area and you don’t need to add the rtl flags.

These are the code snippets:

[VB]TextRenderer.DrawText(e.Graphics, " عربى جميل!", Me.Font, New Rectangle(10, 10, 100, 100), SystemColors.ControlText)
[C#]TextRenderer.DrawText(e.Graphics, "عربي جميل!", this.Font, new Rectangle(10, 10, 100, 100), SystemColors.ControlText);

While RightToLeftLayout= false and RightToLeft=yes

First, you need to perform the coordinate transformation and change the left of the paint region. Second you need to add the correct TextFormatFlags.

These are the code snippets:

[VB]'We have to adjust the left of the drawing rectangle to draw the text in the correct location'NewLeft = FormWidth – (Left + Width)TextRenderer.DrawText(e.Graphics, " عربي جميل!", Me.Font, New Rectangle(Me.Width - (10 + 100), 10, 100, 100),SystemColors.ControlText, TextFormatFlags.RightToLeft)
[C#]//We have to adjust the left of the drawing rectangle to draw the text in the correct location//NewLeft = FormWidth – (Left + Width)TextRenderer.DrawText(e.Graphics, "عربي جميل!", this.Font, new Rectangle(this.Width – (10+100), 10, 100, 100),SystemColors.ControlText, TextFormatFlags.RightToLeft);

3 - Images in RightToLeftLayout controls.

Images are mirrored by default, when you set RightToLeftLayout to true. This may be the desired behavior for directional images but in several cases you may need to keep the images unchanged. In this case, you need to flip your original image to show it correct after it’s mirrored again.