Skip to content

Commit

Permalink
Implement MaterialModernScrollBar style
Browse files Browse the repository at this point in the history
  • Loading branch information
@SKProCH
SKProCH committed Jan 31, 2024
1 parent 6b12b03 commit bb5e2cb
Showing 1 changed file with 153 additions and 13 deletions.
166 changes: 153 additions & 13 deletions Material.Styles/Resources/Themes/ScrollBar.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,45 @@
xmlns:system="clr-namespace:System;assembly=netstandard">
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Orientation="Horizontal" Spacing="20">
<StackPanel Spacing="20">
<ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" IsEnabled="False" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" IsEnabled="False" />
<StackPanel Spacing="8">
<TextBlock>Material ScrollBar</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<StackPanel Spacing="20">
<ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" IsEnabled="False" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" IsEnabled="False" />
</StackPanel>
<ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" />
<ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" IsEnabled="False" />
<ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" />
<ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" IsEnabled="False" />
</StackPanel>

<TextBlock>Modern ScrollBar</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<StackPanel.Styles>
<Style Selector="ScrollBar">
<Setter Property="Theme" Value="{StaticResource MaterialModernScrollBar}" />
</Style>
</StackPanel.Styles>
<StackPanel Spacing="20">
<ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="False" VerticalAlignment="Center" Width="100" IsEnabled="False" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" />
<ScrollBar Orientation="Horizontal" AllowAutoHide="True" VerticalAlignment="Center" Width="100" IsEnabled="False" />
</StackPanel>
<ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" />
<ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" IsEnabled="False" />
<ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" />
<ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" IsEnabled="False" />
</StackPanel>
<ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" />
<ScrollBar Orientation="Vertical" AllowAutoHide="False" HorizontalAlignment="Center" Height="100" IsEnabled="False" />
<ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" />
<ScrollBar Orientation="Vertical" AllowAutoHide="True" HorizontalAlignment="Center" Height="100" IsEnabled="False" />
</StackPanel>

</Border>
</Design.PreviewWith>
<system:Double x:Key="ScrollBarThumbMinimumLength">24</system:Double>
<system:Double x:Key="ModernScrollBarThumbMinimumLength">36</system:Double>

<ControlTheme x:Key="ModernSimpleScrollThumb" TargetType="Thumb">
<Setter Property="Background" Value="{DynamicResource MaterialBodyBrush}" />
Expand Down Expand Up @@ -96,7 +120,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter Background="Transparent"
<ContentPresenter Background="{TemplateBinding Background}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</ControlTemplate>
Expand Down Expand Up @@ -224,7 +248,7 @@
<Style Selector="^[IsExpanded=False]">
<Style Selector="^ /template/ Track#PART_Track">
<Setter Property="Width" Value="8" />
<Setter Property="Control.RenderTransform" Value="translateX(4px)" />
<Setter Property="RenderTransform" Value="translateX(4px)" />
</Style>

<Style Selector="^ /template/ RepeatButton#PART_LineUpButton">
Expand Down Expand Up @@ -274,7 +298,7 @@
<Style Selector="^[IsExpanded=False]">
<Style Selector="^ /template/ Track#PART_Track">
<Setter Property="Height" Value="8" />
<Setter Property="Control.RenderTransform" Value="translateY(4px)" />
<Setter Property="RenderTransform" Value="translateY(4px)" />
</Style>

<Style Selector="^ /template/ RepeatButton#PART_LineUpButton">
Expand All @@ -290,4 +314,120 @@

<ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar"
BasedOn="{StaticResource MaterialScrollBar}" />


<!-- Modern -->
<ControlTheme x:Key="MaterialModernScrollBar" TargetType="ScrollBar">
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Background" Value="{DynamicResource MaterialSelectionBrush}" />
<Setter Property="Foreground" Value="{DynamicResource MaterialBodyBrush}" />
<Setter Property="Template">
<ControlTemplate>
<Border Name="PART_RootBorder"
Background="Transparent">
<Border Name="PART_BackgroundBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Track Name="PART_Track"
Maximum="{TemplateBinding Maximum}"
Minimum="{TemplateBinding Minimum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
ViewportSize="{TemplateBinding ViewportSize}"
Orientation="{TemplateBinding Orientation}">
<Track.DecreaseButton>
<RepeatButton Name="PART_PageUpButton"
Theme="{StaticResource ModernSimpleScrollLineButton}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_PageDownButton"
Theme="{StaticResource ModernSimpleScrollLineButton}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Track.IncreaseButton>
<Thumb Name="PART_Thumb"
Theme="{StaticResource ModernSimpleScrollThumb}"
CornerRadius="{TemplateBinding CornerRadius}" />
</Track>
</Border>
</Border>
</ControlTemplate>
</Setter>

<Style Selector="^ /template/ RepeatButton#PART_PageUpButton">
<Setter Property="Focusable" Value="False" />
</Style>

<Style Selector="^ /template/ RepeatButton#PART_PageDownButton">
<Setter Property="Focusable" Value="False" />
</Style>

<Style Selector="^:disabled /template/ Border#PART_RootBorder">
<Setter Property="Opacity" Value="0.24" />
</Style>

<Style Selector="^ /template/ Border#PART_RootBorder">
<Setter Property="MinHeight" Value="8" />
<Setter Property="MinWidth" Value="8" />
</Style>

<Style Selector="^:not(.no-transitions) /template/ Border#PART_BackgroundBorder">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Width" Easing="CircularEaseOut" Duration="0.1" />
<DoubleTransition Property="Height" Easing="CircularEaseOut" Duration="0.1" />
<TransformOperationsTransition Property="RenderTransform" Duration="0.05" />
</Transitions>
</Setter>
</Style>

<Style Selector="^:vertical">
<Style Selector="^ /template/ Thumb#PART_Thumb">
<Setter Property="MinHeight" Value="{DynamicResource ModernScrollBarThumbMinimumLength}" />
</Style>

<Style Selector="^ /template/ Track#PART_Track">
<Setter Property="DockPanel.Dock" Value="Right" />
</Style>

<Style Selector="^ /template/ Track#PART_Track">
<Setter Property="IsDirectionReversed" Value="True" />
</Style>

<Style Selector="^ /template/ Border#PART_BackgroundBorder">
<Setter Property="Width" Value="8" />
</Style>

<Style Selector="^[IsExpanded=False]">
<Setter Property="CornerRadius" Value="2" />
<Style Selector="^ /template/ Border#PART_BackgroundBorder">
<Setter Property="Width" Value="4" />
<Setter Property="RenderTransform" Value="translateX(2px)" />
</Style>
</Style>
</Style>

<Style Selector="^:horizontal">
<Style Selector="^ /template/ Thumb#PART_Thumb">
<Setter Property="MinWidth" Value="{DynamicResource ModernScrollBarThumbMinimumLength}" />
</Style>

<Style Selector="^ /template/ Track#PART_Track">
<Setter Property="DockPanel.Dock" Value="Bottom" />
</Style>

<Style Selector="^ /template/ Border#PART_BackgroundBorder">
<Setter Property="Height" Value="8" />
</Style>

<Style Selector="^[IsExpanded=False]">
<Setter Property="CornerRadius" Value="2" />
<Style Selector="^ /template/ Border#PART_BackgroundBorder">
<Setter Property="Height" Value="4" />
<Setter Property="RenderTransform" Value="translateY(2px)" />
</Style>
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>

0 comments on commit bb5e2cb

Please sign in to comment.