Apple Style Scrollbar WPF

Question

필자는 스크롤바 컨트롤의 크기를 줄이고 인터페이스가 실제로 잘 맞았 기 때문에 "Apple"처럼 만들려고합니다. 내가 가진 모든

구현 될 수있는이

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

작업 XAML입니다 지금까지

:

내가 달성하기 위해 노력하고있어 다음과 같습니다 뭔가 찾은에서 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

정말 예쁘지 않고 모든 정직에서 나는 그것이 어디에서 왔는지 기억할 수 없다. 나의 프로젝트 중 하나에서 당신이 겪은 것과 비슷한 것이있다. 아마도 요구되지 않는 스타일이 많이있을 것이다. 또는 부정확하지만 또한 그것을 줄 수 있습니다.

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