XAML更改大小并显示水平滚动条

Question

I am trying to change the size and display of the horizontal scroll bar. Currently the scroll bar is displayed only when I move the listview items. I need to make it bigger and add color to it. Can I use style for it plz.

 <ListView x:Name="listview" ScrollViewer.HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding Path=YourCollection}"
                  GotFocus="StackPanel_GotFocus" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" Margin="125,262,125,19">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" Height="200"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Height="200" Width="256">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Image}" Height="144" Width="256" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}"  Height="56" Width="256" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Answer 1

You can create a custom style for your ListView and its internal ScrollViewer and ScrollBar.

You will find the definitions for the styles to override here:

• ListView
• ScrollViewer
• ScrollBar

If you want to change all the ScrollBars of your app, overriding ScrollBar style will be enough

If you want this custom style to apply only within your ListView, it will be more tricky.

You will have to create a custom ScrollBar style changing the properties you want. Then create a custom ScrollViewer style which will reference/use your custom ScrollBar style. And finally, create a custom ListView style which will reference/use your custom ScrollViewer style.

It will look as the following:

ListView style:

<Style TargetType="ListView" x:Key="MyListViewStyle">
    <Setter Property="Template">
        <Setter.Value>
           <ControlTemplate TargetType="ListView">
               <Border>
                  <ScrollViewer x:Name="ScrollViewer" Style={StaticResource myCustomScrollViewerStyle" />
               </Border>
           </ControlTemplate>
    </Setter>
</Style >

Scrollviewer style:

<Style TargetType="ScrollViewer" x:Key="myCustomScrollViewerStyle">
    ...
    <ScrollBar x:Name="VerticalScrollBar" Style={StaticResource myCustomScrollBarStyle}" />
    <ScrollBar x:Name="HorizontalScrollBar" Style={StaticResource myCustomScrollBarStyle}" />
     ...
</Style>

Scrollbar style:

<Style TargetType="ScrollBar" x:Key="myCustomScrollBarStyle">
     ...
     <Setter Property="Background" Value="Red" />
     <Setter Property="Foreground" Value="Green" />
     ...
</Style>