-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Improve ScrollBar style * Fix scrollbar thumb dimensions
- Loading branch information
1 parent
e833d76
commit c988286
Showing
3 changed files
with
382 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,297 @@ | ||
| <ResourceDictionary xmlns="https://github.com/avaloniaui" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> | ||
|
|
||
| <x:Double x:Key="ScrollBarVerticalThumbWidth">8</x:Double> | ||
| <x:Double x:Key="ScrollBarVerticalThumbMinHeight">30</x:Double> | ||
| <x:Double x:Key="ScrollBarHorizontalThumbHeight">8</x:Double> | ||
| <x:Double x:Key="ScrollBarHorizontalThumbMinWidth">30</x:Double> | ||
|
|
||
| <Design.PreviewWith> | ||
| <Border Padding="20"> | ||
| <StackPanel Orientation="Horizontal" Spacing="20"> | ||
| <StackPanel Spacing="20"> | ||
| <ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="150"/> | ||
| <ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="150" IsEnabled="False"/> | ||
| <ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="150"/> | ||
| <ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="150" IsEnabled="False"/> | ||
| </StackPanel> | ||
| <ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="150"/> | ||
| <ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="150" IsEnabled="False"/> | ||
| <ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="150"/> | ||
| <ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="150" IsEnabled="False"/> | ||
| </StackPanel> | ||
| </Border> | ||
| </Design.PreviewWith> | ||
|
|
||
| <ControlTheme x:Key="FluentScrollBarThumb" TargetType="Thumb"> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarPanningThumbBackground}"/> | ||
| <Setter Property="Template"> | ||
| <Setter.Value> | ||
| <ControlTemplate> | ||
| <Border Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"/> | ||
| </ControlTemplate> | ||
| </Setter.Value> | ||
| </Setter> | ||
| <Setter Property="Transitions"> | ||
| <Transitions> | ||
| <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.1" /> | ||
| <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" /> | ||
| </Transitions> | ||
| </Setter> | ||
|
|
||
| <Style Selector="^:pointerover /template/ Border"> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPointerOver}" /> | ||
| </Style> | ||
| <Style Selector="^:pressed /template/ Border"> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillPressed}" /> | ||
| </Style> | ||
| <Style Selector="^:disabled /template/ Border"> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarThumbFillDisabled}" /> | ||
| </Style> | ||
| </ControlTheme> | ||
|
|
||
| <ControlTheme x:Key="FluentScrollBarPageButton" TargetType="RepeatButton"> | ||
| <Setter Property="Background" Value="Transparent" /> | ||
| <Setter Property="VerticalAlignment" Value="Stretch" /> | ||
| <Setter Property="HorizontalAlignment" Value="Stretch" /> | ||
| <Setter Property="Opacity" Value="0" /> | ||
| <Setter Property="Template"> | ||
| <ControlTemplate> | ||
| <Border Background="{TemplateBinding Background}" /> | ||
| </ControlTemplate> | ||
| </Setter> | ||
| </ControlTheme> | ||
|
|
||
| <ControlTheme x:Key="FluentScrollBarLineButton" TargetType="RepeatButton"> | ||
| <Setter Property="Opacity" Value="0" /> | ||
| <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForeground}"/> | ||
| <Setter Property="Template"> | ||
| <ControlTemplate> | ||
| <ContentPresenter x:Name="PART_ContentPresenter" | ||
| Background="{DynamicResource ScrollBarButtonBackground}" | ||
| BorderBrush="{DynamicResource ScrollBarButtonBorderBrush}" | ||
| Content="{TemplateBinding Content}"/> | ||
| </ControlTemplate> | ||
| </Setter> | ||
| <Setter Property="Transitions"> | ||
| <Transitions> | ||
| <DoubleTransition Property="Opacity" Duration="0:0:0.1" /> | ||
| </Transitions> | ||
| </Setter> | ||
|
|
||
| <Style Selector="^:pointerover"> | ||
| <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}"/> | ||
|
|
||
| <Style Selector="^ /template/ ContentPresenter" > | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPointerOver}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPointerOver}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:pressed"> | ||
| <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPressed}"/> | ||
|
|
||
| <Style Selector="^ /template/ ContentPresenter" > | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundPressed}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushPressed}" /> | ||
| </Style> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:disabled"> | ||
| <Setter Property="TextElement.Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundDisabled}"/> | ||
|
|
||
| <Style Selector="^ /template/ ContentPresenter" > | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarButtonBackgroundDisabled}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarButtonBorderBrushDisabled}" /> | ||
| </Style> | ||
| </Style> | ||
| </ControlTheme> | ||
|
|
||
| <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar"> | ||
| <Setter Property="MinWidth" Value="{DynamicResource ScrollBarSize}" /> | ||
| <Setter Property="MinHeight" Value="{DynamicResource ScrollBarSize}" /> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarBackground}" /> | ||
| <Setter Property="Foreground" Value="{DynamicResource ScrollBarForeground}" /> | ||
| <Setter Property="BorderBrush" Value="{DynamicResource ScrollBarBorderBrush}" /> | ||
| <Setter Property="ClipToBounds" Value="False" /> | ||
|
|
||
| <Style Selector="^:vertical"> | ||
| <Setter Property="Template"> | ||
| <ControlTemplate> | ||
| <Panel ClipToBounds="False"> | ||
| <Border x:Name="Hitbox" Margin="-4" Background="Transparent"/> | ||
| <Grid x:Name="Root"> | ||
| <Border x:Name="VerticalRoot" | ||
| Background="{TemplateBinding Background}" | ||
| BorderBrush="{TemplateBinding BorderBrush}"> | ||
| <Grid RowDefinitions="Auto,*,Auto"> | ||
| <Rectangle x:Name="TrackRect" | ||
| Fill="{DynamicResource ScrollBarTrackFill}" | ||
| Stroke="{DynamicResource ScrollBarTrackStroke}" | ||
| StrokeThickness="{DynamicResource ScrollBarTrackBorderThemeThickness}" | ||
| Opacity="0" | ||
| Grid.RowSpan="3"> | ||
| <Rectangle.Transitions> | ||
| <Transitions> | ||
| <DoubleTransition Property="Opacity" Duration="0:0:0.1" /> | ||
| </Transitions> | ||
| </Rectangle.Transitions> | ||
| </Rectangle> | ||
|
|
||
| <RepeatButton Name="PART_LineUpButton" | ||
| HorizontalAlignment="Center" | ||
| Theme="{StaticResource FluentScrollBarLineButton}" | ||
| Grid.Row="0" | ||
| Focusable="False" | ||
| MinWidth="{DynamicResource ScrollBarSize}" | ||
| Height="{DynamicResource ScrollBarSize}"> | ||
| <PathIcon | ||
| Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z" | ||
| Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" | ||
| Height="{DynamicResource ScrollBarButtonArrowIconFontSize}" /> | ||
| </RepeatButton> | ||
|
|
||
| <Track Grid.Row="1" | ||
| Minimum="{TemplateBinding Minimum}" | ||
| Maximum="{TemplateBinding Maximum}" | ||
| Value="{TemplateBinding Value, Mode=TwoWay}" | ||
| DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" | ||
| ViewportSize="{TemplateBinding ViewportSize}" | ||
| Orientation="{TemplateBinding Orientation}" | ||
| IsDirectionReversed="True"> | ||
| <Track.DecreaseButton> | ||
| <RepeatButton Name="PART_PageUpButton" | ||
| Theme="{StaticResource FluentScrollBarPageButton}" | ||
| Focusable="False" /> | ||
| </Track.DecreaseButton> | ||
| <Track.IncreaseButton> | ||
| <RepeatButton Name="PART_PageDownButton" | ||
| Theme="{StaticResource FluentScrollBarPageButton}" | ||
| Focusable="False" /> | ||
| </Track.IncreaseButton> | ||
| <Thumb Theme="{StaticResource FluentScrollBarThumb}" | ||
| Width="{DynamicResource ScrollBarVerticalThumbWidth}" | ||
| MinHeight="{DynamicResource ScrollBarVerticalThumbMinHeight}" | ||
| RenderTransform="{DynamicResource VerticalSmallScrollThumbScaleTransform}" | ||
| RenderTransformOrigin="100%,50%" /> | ||
| </Track> | ||
|
|
||
| <RepeatButton Name="PART_LineDownButton" | ||
| HorizontalAlignment="Center" | ||
| Theme="{StaticResource FluentScrollBarLineButton}" | ||
| Grid.Row="2" | ||
| Focusable="False" | ||
| MinWidth="{DynamicResource ScrollBarSize}" | ||
| Height="{DynamicResource ScrollBarSize}"> | ||
| <PathIcon | ||
| Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z" | ||
| Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" | ||
| Height="{DynamicResource ScrollBarButtonArrowIconFontSize}" /> | ||
| </RepeatButton> | ||
| </Grid> | ||
| </Border> | ||
| </Grid> | ||
| </Panel> | ||
| </ControlTemplate> | ||
| </Setter> | ||
| </Style> | ||
|
|
||
| <Style Selector="^:horizontal"> | ||
| <Setter Property="Template"> | ||
| <ControlTemplate> | ||
| <Panel> | ||
| <Border x:Name="Hitbox" Margin="-4" Background="Transparent"/> | ||
| <Grid x:Name="Root"> | ||
| <Border x:Name="HorizontalRoot" | ||
| Background="{TemplateBinding Background}" | ||
| BorderBrush="{TemplateBinding BorderBrush}"> | ||
| <Grid ColumnDefinitions="Auto,*,Auto"> | ||
| <Rectangle x:Name="TrackRect" | ||
| Fill="{DynamicResource ScrollBarTrackFill}" | ||
| Stroke="{DynamicResource ScrollBarTrackStroke}" | ||
| StrokeThickness="{DynamicResource ScrollBarTrackBorderThemeThickness}" | ||
| Opacity="0" | ||
| Grid.ColumnSpan="3"> | ||
| <Rectangle.Transitions> | ||
| <Transitions> | ||
| <DoubleTransition Property="Opacity" Duration="0:0:0.1" /> | ||
| </Transitions> | ||
| </Rectangle.Transitions> | ||
| </Rectangle> | ||
|
|
||
| <RepeatButton Name="PART_LineUpButton" | ||
| Theme="{StaticResource FluentScrollBarLineButton}" | ||
| VerticalAlignment="Center" | ||
| Grid.Column="0" | ||
| Focusable="False" | ||
| MinHeight="{DynamicResource ScrollBarSize}" | ||
| Width="{DynamicResource ScrollBarSize}"> | ||
| <PathIcon | ||
| Data="M 14.091797 19.970703 L 4.111328 10 L 14.091797 0.029297 L 14.970703 0.908203 L 5.888672 10 L 14.970703 19.091797 Z" | ||
| Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" | ||
| Height="{DynamicResource ScrollBarButtonArrowIconFontSize}" /> | ||
| </RepeatButton> | ||
|
|
||
| <Track Grid.Column="1" | ||
| Minimum="{TemplateBinding Minimum}" | ||
| Maximum="{TemplateBinding Maximum}" | ||
| Value="{TemplateBinding Value, Mode=TwoWay}" | ||
| DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" | ||
| ViewportSize="{TemplateBinding ViewportSize}" | ||
| Orientation="{TemplateBinding Orientation}"> | ||
| <Track.DecreaseButton> | ||
| <RepeatButton Name="PART_PageUpButton" | ||
| Theme="{StaticResource FluentScrollBarPageButton}" | ||
| Focusable="False" /> | ||
| </Track.DecreaseButton> | ||
| <Track.IncreaseButton> | ||
| <RepeatButton Name="PART_PageDownButton" | ||
| Theme="{StaticResource FluentScrollBarPageButton}" | ||
| Focusable="False" /> | ||
| </Track.IncreaseButton> | ||
| <Thumb Theme="{StaticResource FluentScrollBarThumb}" | ||
| Height="{DynamicResource ScrollBarHorizontalThumbHeight}" | ||
| MinWidth="{DynamicResource ScrollBarHorizontalThumbMinWidth}" | ||
| RenderTransform="{DynamicResource HorizontalSmallScrollThumbScaleTransform}" | ||
| RenderTransformOrigin="50%,100%" /> | ||
| </Track> | ||
|
|
||
| <RepeatButton Name="PART_LineDownButton" | ||
| Theme="{StaticResource FluentScrollBarLineButton}" | ||
| VerticalAlignment="Center" | ||
| Grid.Column="2" | ||
| Focusable="False" | ||
| MinHeight="{DynamicResource ScrollBarSize}" | ||
| Width="{DynamicResource ScrollBarSize}"> | ||
| <PathIcon | ||
| Data="M 5.029297 19.091797 L 14.111328 10 L 5.029297 0.908203 L 5.908203 0.029297 L 15.888672 10 L 5.908203 19.970703 Z" | ||
| Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" | ||
| Height="{DynamicResource ScrollBarButtonArrowIconFontSize}" /> | ||
| </RepeatButton> | ||
| </Grid> | ||
| </Border> | ||
| </Grid> | ||
| </Panel> | ||
| </ControlTemplate> | ||
| </Setter> | ||
| </Style> | ||
|
|
||
| <Style Selector="^[IsExpanded=true]"> | ||
| <Style Selector="^ /template/ Grid#Root"> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarBackgroundPointerOver}" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ Rectangle#TrackRect"> | ||
| <Setter Property="Fill" Value="{DynamicResource ScrollBarTrackFillPointerOver}" /> | ||
| <Setter Property="Stroke" Value="{DynamicResource ScrollBarTrackStrokePointerOver}" /> | ||
| <Setter Property="Opacity" Value="1" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ Thumb"> | ||
| <Setter Property="Background" Value="{DynamicResource ScrollBarThumbBackgroundColor}" /> | ||
| <Setter Property="RenderTransform" Value="none" /> | ||
| </Style> | ||
| <Style Selector="^ /template/ RepeatButton"> | ||
| <Setter Property="Opacity" Value="1" /> | ||
| </Style> | ||
| </Style> | ||
| </ControlTheme> | ||
| </ResourceDictionary> |
Oops, something went wrong.