Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve ScrollBar style #128

Merged
merged 2 commits into from
Feb 7, 2025
Merged

Improve ScrollBar style #128

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
985d01d
Improve ScrollBar style
justinshannon Feb 7, 2025
e7b2615
Fix scrollbar thumb dimensions
justinshannon Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 33 additions & 31 deletions vATIS.Desktop/App.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,36 @@
x:Class="Vatsim.Vatis.App"
Name="vATIS"
RequestedThemeVariant="Dark">
<NativeMenu.Menu>
<NativeMenu/>
</NativeMenu.Menu>
<Application.Styles>
<FluentTheme />
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
<StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml"/>
<StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
<StyleInclude Source="/Ui/Styles/DarkComboBox.axaml"/>
<StyleInclude Source="/Ui/Styles/AvaloniaEditorStyles.axaml"/>
</Application.Styles>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="/Ui/Styles/Buttons.axaml"/>
<ResourceInclude Source="/Ui/Styles/TextBox.axaml"/>
<ResourceInclude Source="/Ui/Styles/CheckBox.axaml"/>
<ResourceInclude Source="/Ui/Styles/RadioButton.axaml"/>
<ResourceInclude Source="/Ui/Controls/CustomTabControl.axaml"/>
<ResourceInclude Source="/Ui/Controls/CustomTabItem.axaml"/>
<ResourceInclude Source="/Ui/Controls/GroupBox/GroupBoxBasic.axaml"/>
<ResourceInclude Source="/Ui/Controls/GroupBox/GroupBoxClassic.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<FontFamily x:Key="UiFont">/Assets/Fonts#Nunito</FontFamily>
<FontFamily x:Key="Icons">/Assets/Fonts#mdl2</FontFamily>
<FontFamily x:Key="Monospace">/Assets/Fonts#DM Mono</FontFamily>
<StaticResource x:Key="ContentControlThemeFontFamily" ResourceKey="UiFont" />
<x:Double x:Key="ControlContentThemeFontSize">13</x:Double>
</Application.Resources>
</Application>
<NativeMenu.Menu>
<NativeMenu/>
</NativeMenu.Menu>
<Application.Styles>
<FluentTheme />
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
<StyleInclude Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml"/>
<StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
<StyleInclude Source="/Ui/Styles/DarkComboBox.axaml"/>
<StyleInclude Source="/Ui/Styles/AvaloniaEditorStyles.axaml"/>
<StyleInclude Source="/Ui/Styles/ScrollViewerStyles.axaml"/>
</Application.Styles>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="/Ui/Styles/Buttons.axaml"/>
<ResourceInclude Source="/Ui/Styles/TextBox.axaml"/>
<ResourceInclude Source="/Ui/Styles/CheckBox.axaml"/>
<ResourceInclude Source="/Ui/Styles/RadioButton.axaml"/>
<ResourceInclude Source="/Ui/Controls/CustomTabControl.axaml"/>
<ResourceInclude Source="/Ui/Controls/CustomTabItem.axaml"/>
<ResourceInclude Source="/Ui/Controls/GroupBox/GroupBoxBasic.axaml"/>
<ResourceInclude Source="/Ui/Controls/GroupBox/GroupBoxClassic.axaml"/>
<ResourceInclude Source="/Ui/Styles/ScrollBarResources.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<FontFamily x:Key="UiFont">/Assets/Fonts#Nunito</FontFamily>
<FontFamily x:Key="Icons">/Assets/Fonts#mdl2</FontFamily>
<FontFamily x:Key="Monospace">/Assets/Fonts#DM Mono</FontFamily>
<StaticResource x:Key="ContentControlThemeFontFamily" ResourceKey="UiFont" />
<x:Double x:Key="ControlContentThemeFontSize">13</x:Double>
</Application.Resources>
</Application>
297 changes: 297 additions & 0 deletions vATIS.Desktop/Ui/Styles/ScrollBarResources.axaml
View file
Open in desktop
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">60</x:Double>
<x:Double x:Key="ScrollBarHorizontalThumbHeight">15</x:Double>
<x:Double x:Key="ScrollBarHorizontalThumbMinWidth">60</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>
Loading