C# WPF ListBox或Listview的横竖滚动条的Style怎么修改可以实现如下图效果

Question

本帖最后由 yexihao 于 2013-02-26 15:29:30 编辑

Answer 1

写个ScrollBar的Style，修改模板从这个图片上截出几段来分别作为RepeatButton跟Track的背景，然后写个ScrollViewer的样式里面应用这个ScrollBar的样式，再写个ListBox，Listview的样式里面使用ScrollViewer的样式。
可以参照Blend里的样例样式自己改下就行<!-- Simple ScrollBar  它使用了 SimpleThumb、SimpleRepeatButton 和 SimpleScrollRepeatButton -->

<Style x:Key="SimpleScrollBar" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>

<RepeatButton x:Name="DecreaseRepeat" Style="{DynamicResource SimpleRepeatButton}" Command="ScrollBar.LineUpCommand">
<Grid>
<Path x:Name="DecreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"/>
</Grid>
</RepeatButton>

<!-- Track 是一种特殊的布局容器，可调整用于在其一侧执行跳转滚动的 thumb 和 repeat button 的大小 -->
<Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
<Track.Thumb>
<Thumb Style="{DynamicResource SimpleThumbStyle}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
</Track>

<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Style="{DynamicResource SimpleRepeatButton}" Command="ScrollBar.LineDownCommand">
<Grid>
<Path x:Name="IncreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</RepeatButton>
</Grid>

<!-- 它对 ScrollBar 使用一个模板，并将其旋转为“水平”
它还会更改命令，使其执行“向左”和“向右”命令，而不是执行“向上”和“向下”命令 -->
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Horizontal"> <!-- 将 ScrollBar 从“垂直”旋转为“水平” -->
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>

<!-- Track 在内部绑定到“方向”，因此我们需要将其旋转回“垂直” -->
<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>

<!-- 更改命令，以执行“水平”命令 -->
<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat"/>
<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat"/>
<Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
<Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- Simple ScrollViewer 
ScrollViewer 是 Grid 控件，该控件包含 ContentPresenter 以及 Horizontal 和 Vertical ScrollBar 
它可供 ListBox、MenuItem、ComboBox 和 TreeView 使用 -->
<Style x:Key="SimpleScrollViewer" TargetType="{x:Type ScrollViewer}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="0" Grid.Row="0" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/>

<!-- ScrollBars 的可见性通过控件的实现来控制 -->
<ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" x:Name="PART_HorizontalScrollBar" Style="{DynamicResource SimpleScrollBar}" Orientation="Horizontal" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}" />
<ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" x:Name="PART_VerticalScrollBar" Style="{DynamicResource SimpleScrollBar}" Orientation="Vertical" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Minimum="0" Maximum="{TemplateBinding ScrollableHeight}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- Simple ListBox - 它使用 SimpleScrollViewer 来使项滚动，并使用 SimpleListBoxItem 定义每个项的外观 -->
<Style x:Key="SimpleListBox" TargetType="{x:Type ListBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<ScrollViewer Margin="1" Style="{DynamicResource SimpleScrollViewer}" Focusable="false" Background="{TemplateBinding Background}">

<!-- StackPanel 用来显示子级，方法是将 IsItemsHost 设置为 True -->
<StackPanel Margin="2" IsItemsHost="true"/>

</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 2

请问图片应该怎么加进去   就是两头的小黑三角   我之前是重新写的Style  <Style x:Key="ScrollBarLineButtonTop" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border
          x:Name="Border"
          Margin="0"
          CornerRadius="0"
          
          BorderBrush="{StaticResource BorderColor}"
          BorderThickness="0">
                        <Border.Background>
                            <ImageBrush ImageSource="Gs/Images/Button/Next.png"/>
                        </Border.Background>
                        <Path
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Fill="{StaticResource NormalColor}"
            Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background"
                                Value="{StaticResource NormalColor}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground"
                                Value="{StaticResource NormalColor}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>红色部分提示不正确

Answer 3

请问图片应该怎么加进去   就是两头的小黑三角   我之前是重新写的Style  <Style x:Key="ScrollBarLineButtonTop" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border
          x:Name="Border"
          Margin="0"
          CornerRadius="0"
          
          BorderBrush="{StaticResource BorderColor}"
          BorderThickness="0">
                        <Border.Background>
                            <ImageBrush ImageSource="Gs/Images/Button/Next.png"/>
                        </Border.Background>
                        <Path
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Fill="{StaticResource NormalColor}"
            Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background"
                                Value="{StaticResource NormalColor}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground"
                                Value="{StaticResource NormalColor}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>红色部分提示不正确