Share via

What is RightToLeftLayout?

  • Article

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.

Comments

  • Anonymous
    February 27, 2010
    thanks alot ... I was facing a small problem and your article fix it ...

  • Anonymous
    April 19, 2010
    One question though, where is the best place to change this property without causing flickering? form.load causes flickering. can you please answer me at base.lnimer (at) gmail? thanks

  • Anonymous
    May 12, 2010
    The reply is in the following post, http://blogs.msdn.com/vsarabic/archive/2010/05/04/when-should-you-set-righttoleftlayout-and-righttoleft.aspx Thanks, Dina

  • Anonymous
    August 07, 2011
    hi can i speek in arabek here

  • Anonymous
    August 07, 2011
    Hi Mary, Sure you can leave comments in Arabic... أهلاً و سهلاً

  • Anonymous
    July 20, 2015
    السلام عليكم ورحمة الله تحية طيبة و بعد أشكر صاحبة هذه المقالة التي فكت بعض الغموض الذي انتابني عند استخدام خاصية التموضع من اليمين إلى اليسار و يجب التنوية على أن الكتابة باللغة العربية في بيئة الترميز لا زالت صعبة بسبب ان المؤشر يكون في الجهة المعاكسة لنهاية الجملة عند استخدام الفاصلة او الأرقام كما هي الحالة عند الكتابة في صندوق التعليقات هذا. تقبلوا تحياتي خالد الدويخ