How can i customized my list view horizental scrollbar appearence ?

Question

Hi all,

I am using wpf listview horizontaly. When i fixed the width of listview the horizontal scrollbar is shown automatically.

I want to change its appearence.

Like my listview shown on middle and both corners have scroll buttons left and right.

How can i achive this please let me know its urgent....

Answer 1

If I understood your request correctly:

1. You don't actually want to cause the ListView to scroll your data to the center
2. You do want to make the scroll bar on the ListView appear differently

For example, if you are using a GridView and you want the horizontal scroll bar to be converted to buttons to the left and right of your view you could style it this way:

<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <DockPanel Background="{TemplateBinding Background}" SnapsToDevicePixels="true">

          <RepeatButton DockPanel.Dock="Left"
                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                        Command="{x:Static ScrollBar.LineLeftCommand}"
                        Content="{StaticResource ScrollLeftArrow}"/>

          <RepeatButton DockPanel.Dock="Right"
                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                        Command="{x:Static ScrollBar.LineRightCommand}"
                        Content="{StaticResource ScrollRightArrow}"/>

          <ScrollBar DockPanel.Dock="Right"
                     Name="PART_VerticalScrollBar"
                     Orientation="Vertical"
                     Minimum="0.0"
                     Maximum="{TemplateBinding ScrollableHeight}"
                     ViewportSize="{TemplateBinding ViewportHeight}"
                     Value="{Binding Path=VerticalOffset,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay}"
                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                     Cursor="Arrow"/>

          <ScrollBar DockPanel.Dock="Bottom"
                     Name="PART_HorizontalScrollBar"
                     Visibility="Hidden"
                     Orientation="Horizontal" />

          <DockPanel Margin="{TemplateBinding Padding}">
            <ScrollViewer DockPanel.Dock="Top"
                          HorizontalScrollBarVisibility="Hidden"
                          VerticalScrollBarVisibility="Hidden"
                          Focusable="false">
              <GridViewHeaderRowPresenter Margin="2,0,2,0"
                                          Columns="{Binding Path=TemplatedParent.View.Columns,RelativeSource={RelativeSource TemplatedParent}}"
                                          ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle,RelativeSource={RelativeSource TemplatedParent}}"
                                          ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate,RelativeSource={RelativeSource TemplatedParent}}"
                                          ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector,RelativeSource={RelativeSource TemplatedParent}}"
                                          AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder,RelativeSource={RelativeSource TemplatedParent}}"
                                          ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu,RelativeSource={RelativeSource TemplatedParent}}"
                                          ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip,RelativeSource={RelativeSource TemplatedParent}}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </ScrollViewer>
            <ScrollContentPresenter Name="PART_ScrollContentPresenter"
                                    KeyboardNavigation.DirectionalNavigation="Local"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    CanContentScroll="{TemplateBinding CanContentScroll}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
          </DockPanel>

        </DockPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

What this does is modify the ScrollViewer template used within GridView to consist of:

• Two repeat buttons, docked to the left and right sides and used to scroll left and right
• A vertical scrollbar in case vertical scrolling is required
• A hidden horizontal scrollbar to satisfy the ScrollViewer (it depends on a scrollbar actually existing), and
• The normal GridView content consisting of the header and the data

Similar techniques apply to ListBox, etc, except the ScrollViewer template is simpler because it doesn't need to deal with header rows.

If you explain the exact layout you want when the scrolling is enabled (a picture would be nice), I may be able to give youa better answer. It might also help to see your existing XAML.