wpf中的滾動條樣式根據以下圖像

Question

我想要一個WPF中的滾動樣式代碼，顯示在下圖中的滾動條。該滾動條位於網格標籤內。

感謝您的幫助。

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>