c# - 下の画像によるwpfのスクロールバースタイル

Question

下の画像に示すスクロールバーのWPFでスクロールスタイルコードが必要です。このスクロールバーは Grid タグ内にあります。

助けてくれてありがとう。

Answer 1

以前にこれに似た Usercontrol を作成しました。このサンプル コードは、適切な出発点となる場合があります。

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