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

Advertisement

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