c# - 根据下图，wpf 中的滚动条样式

Question

我想在 WPF 中为滚动条添加一个滚动样式代码，如下图所示。此滚动条位于 Grid 标记内。

感谢您的帮助。

Answer 1

我之前创建了一个与此类似的用户控件。此示例代码可为您提供一个良好的起点。

<Border BorderThickness="2" BorderBrush="Black">
    <Grid>
    <Grid.RowDefinitions>           
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="20"></RowDefinition>
    </Grid.RowDefinitions>


        <RepeatButton Grid.Row="0" x:Name="btnUp" Focusable="False" Command="ScrollBar.LineUpCommand" CommandTarget="{Binding ElementName=firstItem}" BorderBrush="Transparent">
        <RepeatButton.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="White" Offset="0"></GradientStop>
                <GradientStop Color="Black" Offset=".5"></GradientStop>
            </LinearGradientBrush>
        </RepeatButton.Background>
        <RepeatButton.Content>
            <Path Fill="White" Data="M 0 10 L 36 10 L 18 0 Z"/>
        </RepeatButton.Content>
    </RepeatButton>
    <ListView  Grid.Row="1" FontSize="22" Foreground="White" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Center" Background="Black" >
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel MaxWidth="500"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListViewItem Name="firstItem">A</ListViewItem>
        <ListViewItem>B</ListViewItem>
        <ListViewItem>C</ListViewItem>
        <ListViewItem>D</ListViewItem>
        <ListViewItem>E</ListViewItem>
        <ListViewItem>F</ListViewItem>
        <ListViewItem>G</ListViewItem>
        <ListViewItem>H</ListViewItem>
        <ListViewItem>I</ListViewItem>
        <ListViewItem>J</ListViewItem>
        <ListViewItem>K</ListViewItem>
        <ListViewItem>L</ListViewItem>
        <ListViewItem>M</ListViewItem>
        <ListViewItem>N</ListViewItem>
        <ListViewItem>O</ListViewItem>
    </ListView>
    <RepeatButton Grid.Row="2" x:Name="btnDown" Focusable="False" Command="ScrollBar.LineDownCommand" CommandTarget="{Binding ElementName=firstItem}" BorderBrush="Transparent">
        <RepeatButton.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="White" Offset="0"></GradientStop>
                <GradientStop Color="Black" Offset="0.5"></GradientStop>
            </LinearGradientBrush>
        </RepeatButton.Background>
        <RepeatButton.Content>
            <Path Fill="White" Data="M 0 0 L 18 10 L 36 0 Z"/>
        </RepeatButton.Content>
    </RepeatButton>
</Grid>
</Border>