Apple Stil Scrollbar WPF

Question

Ich versuche, die Größe der Bildlaufleiste zu reduzieren und es mehr "Apple" wie machen, da es meine Schnittstelle wirklich gut passen würde.

Was ich versuche zu erreichen ist etwas, das wie folgt aussieht:

Bisher alles, was ich habe, ist diese

 <Style TargetType="{x:Type ScrollBar}"> 
      <Setter Property="Stylus.IsFlicksEnabled" Value="True" /> 
      <Setter Property="Background" Value="#8C8C8C" /> 
      <Setter Property="Width" Value="8"/> 
      <Setter Property="MinWidth" Value="8" /> 
     </Style> 

Arbeits XAML

Umsetzung sein kann gefunden bei Apple Style Scrollbar in WPF

<!--Scrollbar Thumbs--> 
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Thumb}"> 
       <Grid x:Name="Grid"> 
        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="Transparent" /> 
        <Border x:Name="Rectangle1" CornerRadius="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" /> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="Tag" Value="Horizontal"> 
         <Setter TargetName="Rectangle1" Property="Width" Value="Auto" /> 
         <Setter TargetName="Rectangle1" Property="Height" Value="7" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<!--ScrollBars--> 
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}"> 
    <Setter Property="Stylus.IsFlicksEnabled" Value="false" /> 
    <Setter Property="Foreground" Value="#8C8C8C" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Width" Value="8" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ScrollBar}"> 
       <Grid x:Name="GridRoot" Width="8" Background="{TemplateBinding Background}"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="0.00001*" /> 
        </Grid.RowDefinitions> 

        <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false"> 
         <Track.Thumb> 
          <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" /> 
         </Track.Thumb> 
         <Track.IncreaseRepeatButton> 
          <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" /> 
         </Track.IncreaseRepeatButton> 
         <Track.DecreaseRepeatButton> 
          <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" /> 
         </Track.DecreaseRepeatButton> 
        </Track> 
       </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger SourceName="Thumb" Property="IsMouseOver" Value="true"> 
         <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" /> 
        </Trigger> 
        <Trigger SourceName="Thumb" Property="IsDragging" Value="true"> 
         <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" /> 
        </Trigger> 

        <Trigger Property="IsEnabled" Value="false"> 
         <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" /> 
        </Trigger> 
        <Trigger Property="Orientation" Value="Horizontal"> 
         <Setter TargetName="GridRoot" Property="LayoutTransform"> 
          <Setter.Value> 
           <RotateTransform Angle="-90" /> 
          </Setter.Value> 
         </Setter> 
         <Setter TargetName="PART_Track" Property="LayoutTransform"> 
          <Setter.Value> 
           <RotateTransform Angle="-90" /> 
          </Setter.Value> 
         </Setter> 
         <Setter Property="Width" Value="Auto" /> 
         <Setter Property="Height" Value="8" /> 
         <Setter TargetName="Thumb" Property="Tag" Value="Horizontal" /> 
         <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" /> 
         <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

Es ist nicht sehr hübsch und in aller Ehrlichkeit kann ich mich nicht erinnern, woher es kam, es gibt etwas, das ähnlich ist, was Sie in einem meiner Projekte hier suchen, es gibt wahrscheinlich eine Menge im Stil, der nicht erforderlich ist oder ist inkorrekt, kann aber auch einen Schuss geben.

<!--Scrollbar Thumbs--> 
     <Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Thumb}"> 
         <Grid x:Name="Grid"> 
          <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="Transparent" /> 
          <Border x:Name="Rectangle1" CornerRadius="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" /> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="Tag" Value="Horizontal"> 
           <Setter TargetName="Rectangle1" Property="Width" Value="Auto" /> 
           <Setter TargetName="Rectangle1" Property="Height" Value="7" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <!--ScrollBars--> 
     <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}"> 
      <Setter Property="Stylus.IsFlicksEnabled" Value="false" /> 
      <Setter Property="Foreground" Value="LightGray" /> 
      <Setter Property="Background" Value="DarkGray" /> 
      <Setter Property="Width" Value="10" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ScrollBar}"> 
         <Grid x:Name="GridRoot" Width="19" Background="{TemplateBinding Background}"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="0.00001*" /> 
          </Grid.RowDefinitions> 

          <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false"> 
           <Track.Thumb> 
            <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" /> 
           </Track.Thumb> 
           <Track.IncreaseRepeatButton> 
            <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" /> 
           </Track.IncreaseRepeatButton> 
           <Track.DecreaseRepeatButton> 
            <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" /> 
           </Track.DecreaseRepeatButton> 
          </Track> 
         </Grid> 

         <ControlTemplate.Triggers> 
          <Trigger SourceName="Thumb" Property="IsMouseOver" Value="true"> 
           <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" /> 
          </Trigger> 
          <Trigger SourceName="Thumb" Property="IsDragging" Value="true"> 
           <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" /> 
          </Trigger> 

          <Trigger Property="IsEnabled" Value="false"> 
           <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" /> 
          </Trigger> 
          <Trigger Property="Orientation" Value="Horizontal"> 
           <Setter TargetName="GridRoot" Property="LayoutTransform"> 
            <Setter.Value> 
             <RotateTransform Angle="-90" /> 
            </Setter.Value> 
           </Setter> 
           <Setter TargetName="PART_Track" Property="LayoutTransform"> 
            <Setter.Value> 
             <RotateTransform Angle="-90" /> 
            </Setter.Value> 
           </Setter> 
           <Setter Property="Width" Value="Auto" /> 
           <Setter Property="Height" Value="12" /> 
           <Setter TargetName="Thumb" Property="Tag" Value="Horizontal" /> 
           <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" /> 
           <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>