#1,042 – How FlowDirection Affects a StackPanel

April 2, 2014 1 Comment

Changing the FlowDirection property of a StackPanel changes how it lays out elements when its Orientation is set to Horizontal.

When Orientation is Horizontal and FlowDirection is LeftToRight (the default), each label’s width is set to fit its content.  The label’s height is stretched to fill the container.  Labels are arranged left to right.

1042-001

 

Changing FlowDirection to RightToLeft, the labels are arranged from right to left.

1042-002

 

If Orientation is Vertical and FlowDirection is LeftToRight, the labels’ width now sizes to fit the container and their height is set to match the content.  The labels are arranged from top to bottom in the StackPanel.

1042-003

Changing FlowDirection to RightToLeft when the orientation is Vertical does not change how the labels are arranged.  They are still ordered from top to bottom in the StackPanel.  The content of the labels, however, is now right-aligned, rather than left-aligned.

1042-004

Advertisement

Filed under Layout Tagged with , , , ,

#762 – Set FlowDirection at Runtime Based on CurrentUICulture

February 22, 2013 2 Comments

The FlowDirection property of a FrameworkElement (including a Window) indicates how child elements of an element should be layed out–left to right (what we are used to in the US), or right to left.

FlowDirection should typically be set to match the text direction of the language being used to render text in your user interface.  If text in your application is in Arabic, the letters will run right to left, so your GUI should also be layed out right to left.

You’ll normally load text resources based on the CurrentUICulture property, which is meant to indicate the target language for your application.  So you should also set the flow direction based on information pointed to by CurrentUICulture.

For example:

        public MainWindow()
        {
            InitializeComponent();

            this.FlowDirection =
                CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ?
                    FlowDirection.RightToLeft :
                    FlowDirection.LeftToRight;
        }

On an English version of Windows, we get:
762-001
And on an Arabic version of Windows, we now get:
762-002

Filed under Layout Tagged with , , , , , ,

#761 – How FlowDirection Affects HorizontalContentAlignment

February 21, 2013 Leave a comment

The FlowDirection property, which can be LeftToRight or RightToLeft, indicates how elements within a control should be layed out.

A FlowDirection of RightToLeft reverse the meaning of all HorizontalContentAlignment values.  The example below shows the effect of different combinations of HorizontalContentAlignment and FlowDirection for some Label controls.

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Label Content="HorizontalContentAlignment / FlowDirection Values" Grid.Row="0" Grid.ColumnSpan="2"
               HorizontalAlignment="Center"/>

        <Label Content="Left / LeftToRight" Grid.Row="1" Grid.Column="0"
               HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
               Background="Bisque"/>
        <Label Content="Left / RightToLeft" Grid.Row="1" Grid.Column="1"
               HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
               FlowDirection="RightToLeft"
               Background="Bisque"/>

        <Label Content="Right / LeftToRight" Grid.Row="2" Grid.Column="0"
               HorizontalAlignment="Stretch" HorizontalContentAlignment="Right"
               Background="Bisque"/>
        <Label Content="Right / RightToLeft" Grid.Row="2" Grid.Column="1"
               HorizontalAlignment="Stretch" HorizontalContentAlignment="Right"
               FlowDirection="RightToLeft"
               Background="Bisque"/>
    </Grid>

761-001

Filed under Layout Tagged with , , ,

#471 – How FlowDirection Works with the Image Element

January 12, 2012 1 Comment

Unlike other elements, the Image control will not inherit it’s parent’s value of FlowControl.  However, you can explicitly set FlowControl for an Image to RightToLeft, which will flip the image horizontally.

    <StackPanel Orientation="Horizontal">
        <Image Source="Images\BestYears.jpg" Margin="5"/>
        <Image Source="Images\BestYears.jpg" Margin="5" FlowDirection="RightToLeft"/>
    </StackPanel>

Filed under Layout Tagged with , , , ,

#470 – Elements that Support RightToLeft Flow

January 11, 2012 Leave a comment

Every FrameworkElement has a FlowDirection property that can be either LeftToRight (the default), or RightToLeft.  For panel elements that lay out a series of child elements, this property indicates in which direction the layout should be done.

The FlowDirection property is typically used for cultures where text flows from right to left, e.g. Arabic.  However, you can use this property whenever a right-to-left layout would make sense.

Below are some examples of elements that can use RightToLeft flow.

A Calendar control.

A DatePicker

A Menu, with MenuItem elements

A ListBox

A TreeView

A ProgressBar

A Grid

A StackPanel with Horizontal orientation

Filed under Layout Tagged with , , , , , ,

#469 – Filling a UniformGrid from Right to Left

January 10, 2012 1 Comment

A UniformGrid will normally lay out its child elements from left to right, starting in the first row (top to bottom, left to right).  You can reverse the left-to-right behavior by using the FlowDirection property.

The default value for FlowDirection is LeftToRight.  If you specify a value of RightToLeft, the UniformGrid will fill child elements from right to left within each row.  (Rows are still filled from top to bottom).

<UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft">
    <Label Content="1" Background="AliceBlue"/>
    <Label Content="2" Background="Cornsilk"/>
    <Label Content="3" Background="DarkSalmon"/>
    <Label Content="4" Background="Gainsboro"/>
    <Label Content="5" Background="LightBlue"/>
    <Label Content="6" Background="MediumAquamarine"/>
    <Label Content="7" Background="MistyRose"/>
</UniformGrid>

Filed under Layout Tagged with , , , ,

#443 – Reversing the Flow Direction in a WrapPanel

December 5, 2011 1 Comment

You can set a WrapPanel to flow its children from right to left, rather then from left to right by setting the FlowDirection property to RightToLeft.  (The default is LeftToRight).

For a horizontally oriented WrapPanel, elements will fill in the top row from right to left, flowing to the second row when the first one fills up.  For a vertically oriented WrapPanel, elements will fill in the rightmost column from top to bottom and then move to the next column to the left when the first column fills up.

Below are examples of each combination of Orientation and FlowDirection.

Orientation = Horizontal, FlowDirection = LeftToRight (the default).

Orientation = Horizontal, FlowDirection = RightToLeft.

Orientation = Vertical, FlowDirection = LeftToRight (the default).

Orientation = Vertical, FlowDirection = RightToLeft.

You would normally use right-to-left flow in culture that present text from right to left (e.g. Arabic).  But you can also use it whenever this layout makes sense for your application.

Filed under Layout Tagged with , , , ,