Изменить шаблон scrollviewer в списке

Question

Я новичок в WPF. Я хочу изменить шаблон просмотра прокрутки в списке. Я нашел прокрутку в стиле Apple в этом blog

Но я не знаю, как применить этот шаблон просмотра прокрутки к списку. Может кто-нибудь мне помочь? Вот XAML код Apple, шаблон просмотра с прокруткой:

<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/> 
     <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="Focusable" Value="false"/> 
      <Setter Property="IsTabStop" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type RepeatButton}"> 
         <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="IsTabStop" Value="false"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Thumb}"> 
         <Border Background="#FF868686" BorderThickness="0,0,1,0" Height="Auto" CornerRadius="4" /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="HorizontalScrollStyle" TargetType="{x:Type ScrollBar}"> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ScrollBar}"> 
         <Grid x:Name="Bg" Background="{TemplateBinding Background}" Height="10" SnapsToDevicePixels="true"> 
          <Grid.RowDefinitions> 
           <RowDefinition /> 
          </Grid.RowDefinitions> 
          <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}"> 
           <Track.DecreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
           </Track.DecreaseRepeatButton> 
           <Track.IncreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
           </Track.IncreaseRepeatButton> 
           <Track.Thumb> 
            <Thumb Style="{StaticResource ScrollBarThumb}" Cursor="Hand"/> 
           </Track.Thumb> 
          </Track> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="AppleStyleVerticalScrollBarStyle" TargetType="{x:Type ScrollBar}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ScrollBar}"> 
         <Grid x:Name="Bg" SnapsToDevicePixels="true" Width="10" HorizontalAlignment="Right" Margin="0"> 
          <Grid.RowDefinitions> 
           <RowDefinition /> 
          </Grid.RowDefinitions> 
          <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}"> 
           <Track.DecreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}" /> 
           </Track.DecreaseRepeatButton> 
           <Track.IncreaseRepeatButton> 
            <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
           </Track.IncreaseRepeatButton> 
           <Track.Thumb> 
            <Thumb Style="{DynamicResource ScrollBarThumb}" Cursor="Hand"/> 
           </Track.Thumb> 
          </Track> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <ControlTemplate x:Key="AppleStyleScrollBarStyle" TargetType="{x:Type ScrollViewer}"> 
      <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 
       <Rectangle x:Name="Corner" Grid.Column="1" Fill="{x:Null}" Grid.Row="1"/> 
       <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" 
         CanHorizontallyScroll="False" CanVerticallyScroll="False" 
         ContentTemplate="{TemplateBinding ContentTemplate}" 
         Content="{TemplateBinding Content}" Grid.Column="0" 
         Margin="{TemplateBinding Padding}" Grid.Row="0"/> 
       <ScrollBar x:Name="PART_VerticalScrollBar" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
       AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" 
       Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" 
       Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
       ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource AppleStyleVerticalScrollBarStyle}" 
       Background="{x:Null}" Width="Auto" Margin="0"/> 
       <ScrollBar x:Name="PART_HorizontalScrollBar" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
       AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" 
       Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" 
       Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
       ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource HorizontalScrollStyle}"/> 
      </Grid> 
     </ControlTemplate> 

Answer 1

ScrollViewer, как несколько других элементов управления в WPF, есть некоторые названные детали. Чтобы их можно было использовать в правильных местах, их нужно назвать должным образом. ScrollViewer дизайн был объяснен на этом сайте MSDN, но в основном он имеет 3 части ScrollContentPresenter, HorizontalScrollBar и VerticalScrollBar. В свою очередь, каждый ScrollBar будет иметь свои собственные именованные части в стиле. И для этого перейдите на этот сайт MSDN. В вашем случае вы можете обернуть ListBox в ScrollViewer как это:

<ScrollViewer> 
    <ListBox/> 
</ScrollViewer> 

В этом случае вы могли бы также рассмотреть прячась оригинальные полосы прокрутки вашего ListBox. Если вы не нажмете никаких ограничений на HeightListbox, он будет расти, чтобы соответствовать всем элементам, и это, в свою очередь, приведет к тому, что ваш ScrollViewer покажет ваши пользовательские полосы прокрутки. Или вы можете изменить шаблон вашего ListBox, как это, например (MSDN):

<Style TargetType={x:Type ListBox}> 
    <Setter Property="Template"> 
     <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ListBox}"> 
      <ScrollViewer x:Name="ScrollViewer"> 
       <ItemsPresenter/> 
      </ScrollViewer> 
     </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

, а затем настроить ваш ScrollViewer там