#761 – How FlowDirection Affects HorizontalContentAlignment

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

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

#332 – HorizontalContentAlignment and VerticalContentAlignment Are Sometimes Not Relevant

The HorizontalContentAlignment and VerticalContentAlignment properties, used to align a control’s content within the interior of the control, only make sense if the control is not automatically sizing to fit its content.

In the example below, all three buttons have their HorizontalContentAlignment property set to Right.  The first button has the default value for its HorizontalAlignment property (Stretch), so you can see the content of the button aligned to the right.  The other two buttons are not stretched, so their width is set to fit their content.  For these buttons, setting the HorizontalContentAlignment property doesn’t have any visible effect.

    <StackPanel>
        <Button Content="HorizontalAlignment=Stretch (Default)" HorizontalContentAlignment="Right"/>
        <Button Content="HorizontalAlignment=Left" HorizontalAlignment="Left" HorizontalContentAlignment="Right"/>
        <Button Content="HorizontalAlignment=Right" HorizontalAlignment="Right" HorizontalContentAlignment="Right"/>
    </StackPanel>

#331 – Default Values for HorizontalContentAlignment and VerticalContentAlignment

Controls have different default values for the HorizontalContentAlignment and VerticalContentAlignment properties, reflecting the most typical location within the control to place its content.

Default values for HorizontalContentAlignment / VerticalContentAlignment for the most common controls are listed below.

  • Button – Center, Center
  • Calendar – Left, Top
  • CheckBox – Left, Top
  • ComboBox – Left, Top
  • ContextMenu – Left, Center
  • DataGrid – Left, Top
  • DatePicker – Stretch, Top
  • Expander – Stretch, Stretch
  • GroupBox – Left, Top
  • Label – Left, Top
  • ListBox – Left, Center
  • Menu – Left, Top
  • PasswordBox – Left, Top
  • ProgressBar – Left, Top
  • RadioButton – Left, Top
  • RepeatButton – Center, Center
  • RichTextBox – Left, Top
  • Slider – Left, Top
  • StatusBar – Left, Top
  • TabControl – Center, Center
  • TextBox – Left, Top
  • TreeView – Left, Center

#330 – HorizontalContentAlignment and VerticalContentAlignment

Recall that the HorizontalAlignment and VerticalAlignment properties specify how child controls should be located and sized within their parent container.

The HorizontalContentAlignment and VerticalContentAlignment properties are similar, but specify how a control’s content should be aligned, within the interior of the control.

Below is an example of some non-default values for HorizontalContentAlignment.

    <StackPanel>
        <Label Content="Buttons:" FontWeight="Bold"/>
        <Button Content="Center (Default)"/>
        <Button Content="Left" HorizontalContentAlignment="Left"/>
        <Button Content="Right" HorizontalContentAlignment="Right" />

        <Label Content="Labels:" FontWeight="Bold" Margin="0,20,0,0"/>
        <Label Content="Left (Default)" Background="Thistle"/>
        <Label Content="Center" HorizontalContentAlignment="Center" Background="Goldenrod"/>
        <Label Content="Right" HorizontalContentAlignment="Right" Background="PaleGreen"/>
    </StackPanel>