苹果风格的滚动条WPF

我试图减小滚动条控件的大小，并使其更像“苹果”，因为它将非常适合我的界面。

我试图达到的是这样的：

到目前为止，我所拥有的就是这个

<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

实现可以在WPF的Apple Style Scrollbar中find

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