How to make the implicit ScrollViewer appear on the left hand side instead of right hand side

Question

I have a ScrollViewer which appears on the right hand side when enough objects are in the list. How can I make it appear on the left hand side?

<ListBox
    x:Name="MessageListBox" 
    BorderThickness="0" 
    ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
    HorizontalContentAlignment="Stretch"  
    AlternationCount="2" 
    ItemContainerStyle="{StaticResource AltStyle}" 
    SelectionMode="Extended">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!-- button -->
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 1

It can be achieved by wrapping the list into ScrollViewer and changing the ScrollViewer property FlowDirection to RightToLeft. Also don't forget to restore the lists FlowDirection to LeftToRight otherwise it will inherit the parent's direction.

<ScrollViewer FlowDirection="RightToLeft"
    CanContentScroll="False" VerticalScrollBarVisibility="Auto">
  <ListBox ItemsSource="{Binding CustomItems}" FlowDirection="LeftToRight"/>
</ScrollViewer>

I found it on MSDN social blogs, How to Set VerticalScroll bar on Left side

Answer 2

This is accomplished by modifying the template of the ListBox's ScrollViewer.

Start by modifying the ColumnDefinitions for the container Grid. Then, put things into the correct columns.

Have fun!

<!--This should be able to be placed on any WPF Window for testing purposes-->
<ListBox Height="85" VerticalAlignment="Top" Margin="117,110,300,0">
    <ListBox.Template>
        <ControlTemplate TargetType="{x:Type ListBox}">
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                    <ScrollViewer.Template>
                        <ControlTemplate TargetType="{x:Type ScrollViewer}">
                            <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>                    
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Rectangle x:Name="Corner" Grid.Column="0" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
                                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                                <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                            </Grid>
                        </ControlTemplate>
                    </ScrollViewer.Template>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListBox.Template>
    <TextBox Text="Hi Mom!"/>
    <TextBox Text="Hi Dad!"/>
    <TextBox Text="Hi Father!"/>
    <TextBox Text="Hi Mother!"/>
    <TextBox Text="Hi Padre!"/>            
</ListBox>

P.S. If you wanted to move the HorizontalScrollBar, simply reorder the RowDefinitions, the do the same exercise (put every child component in the proper row)