How to make an implicit scrollviewer appear on the left side instead of the right side

Question

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

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

Answer 1

This can be achieved by moving the list to a ScrollViewer and changing the ScrollViewer FlowDirection property to "RightToLeft". Also, don't forget to restore the "FlowDirection" list to LeftToRight, otherwise it will inherit the parent direction.

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

I found it on MSDN social blogs, http://social.msdn.microsoft.com/Forums/vstudio/en-US/e796231d-5c92-44b4-bb7e-c3b74d81a99c/how-to-set-verticalscroll-bar-on- left-side? forum = wpf

Answer 2

This is achieved by modifying the ListBox ScrollViewer template.

Start by changing the ColumnDefinitions settings for the Container grid. Then put things in the right columns.

Good luck

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

ps If you want to move the HorizontalScrollBar, just change the order of the RowDefinitions, do the same exercise (put each child component on the right line)

Answer 3

Just set the built-in scrollviewer ListBox to RightToLeft:

 <ListBox ScrollViewer.FlowDirection="RightToLeft" />