tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #3134 from AvaloniaUI/overhaul-scrollbars 

Overhaul scrollbars
pull/3143/head
Jumar Macato 7 years ago
committed by GitHub
parent
e0dc559efd 0381a471e8
commit
f361f846bc
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 162 additions and 136 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/Avalonia.Controls/Primitives/Thumb.cs
  2. 7
      src/Avalonia.Themes.Default/Accents/BaseDark.xaml
  3. 16
      src/Avalonia.Themes.Default/Accents/BaseLight.xaml
  4. 6
      src/Avalonia.Themes.Default/RepeatButton.xaml
  5. 264
      src/Avalonia.Themes.Default/ScrollBar.xaml
  6. 1
      src/Avalonia.Themes.Default/ScrollViewer.xaml

4
src/Avalonia.Controls/Primitives/Thumb.cs
View File

@ -83,6 +83,8 @@ namespace Avalonia.Controls.Primitives
Vector = (Vector)_lastPoint,
};
PseudoClasses.Add(":pressed");
RaiseEvent(ev);
}
@ -102,6 +104,8 @@ namespace Avalonia.Controls.Primitives
RaiseEvent(ev);
}
PseudoClasses.Remove(":pressed");
}
}
}

7
src/Avalonia.Themes.Default/Accents/BaseDark.xaml
View File

@ -14,7 +14,9 @@
<Color x:Key="ThemeBorderHighColor">#FFA0A0A0</Color>
<Color x:Key="ThemeControlLowColor">#FF282828</Color>
<Color x:Key="ThemeControlMidColor">#FF505050</Color>
<Color x:Key="ThemeControlMidHighColor">#FF686868</Color>
<Color x:Key="ThemeControlHighColor">#FF808080</Color>
<Color x:Key="ThemeControlVeryHighColor">#FFEFEBEF</Color>
<Color x:Key="ThemeControlHighlightLowColor">#FFA8A8A8</Color>
<Color x:Key="ThemeControlHighlightMidColor">#FF828282</Color>
<Color x:Key="ThemeControlHighlightHighColor">#FF505050</Color>
@ -32,7 +34,9 @@
<SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{DynamicResource ThemeBorderHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlLowBrush" Color="{DynamicResource ThemeControlLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlMidBrush" Color="{DynamicResource ThemeControlMidColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlMidHighBrush" Color="{DynamicResource ThemeControlMidHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighBrush" Color="{DynamicResource ThemeControlHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlVeryHighBrush" Color="{DynamicResource ThemeControlVeryHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightHighBrush" Color="{DynamicResource ThemeControlHighlightHighColor}"></SolidColorBrush>
@ -61,6 +65,7 @@
<sys:Double x:Key="FontSizeNormal">12</sys:Double>
<sys:Double x:Key="FontSizeLarge">16</sys:Double>
<sys:Double x:Key="ScrollBarThickness">10</sys:Double>
<sys:Double x:Key="ScrollBarThickness">18</sys:Double>
<sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double>
</Style.Resources>
</Style>

16
src/Avalonia.Themes.Default/Accents/BaseLight.xaml
View File

@ -12,9 +12,14 @@
<Color x:Key="ThemeBorderLowColor">#FFAAAAAA</Color>
<Color x:Key="ThemeBorderMidColor">#FF888888</Color>
<Color x:Key="ThemeBorderHighColor">#FF333333</Color>
<Color x:Key="ThemeControlLowColor">#FFFFFFFF</Color>
<Color x:Key="ThemeControlMidColor">#FFAAAAAA</Color>
<Color x:Key="ThemeControlHighColor">#FF888888</Color>
<Color x:Key="ThemeControlLowColor">#FF868999</Color>
<Color x:Key="ThemeControlMidColor">#FFF5F5F5</Color>
<Color x:Key="ThemeControlMidHighColor">#FFC2C3C9</Color>
<Color x:Key="ThemeControlHighColor">#FF686868</Color>
<Color x:Key="ThemeControlVeryHighColor">#FF5B5B5B</Color>
<Color x:Key="ThemeControlHighlightLowColor">#FFF0F0F0</Color>
<Color x:Key="ThemeControlHighlightMidColor">#FFD0D0D0</Color>
<Color x:Key="ThemeControlHighlightHighColor">#FF808080</Color>
@ -32,7 +37,9 @@
<SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{DynamicResource ThemeBorderHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlLowBrush" Color="{DynamicResource ThemeControlLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlMidBrush" Color="{DynamicResource ThemeControlMidColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlMidHighBrush" Color="{DynamicResource ThemeControlMidHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighBrush" Color="{DynamicResource ThemeControlHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlVeryHighBrush" Color="{DynamicResource ThemeControlVeryHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightHighBrush" Color="{DynamicResource ThemeControlHighlightHighColor}"></SolidColorBrush>
@ -61,6 +68,7 @@
<sys:Double x:Key="FontSizeNormal">12</sys:Double>
<sys:Double x:Key="FontSizeLarge">16</sys:Double>
<sys:Double x:Key="ScrollBarThickness">10</sys:Double>
<sys:Double x:Key="ScrollBarThickness">18</sys:Double>
<sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double>
</Style.Resources>
</Style>

6
src/Avalonia.Themes.Default/RepeatButton.xaml
View File

@ -33,12 +33,8 @@
<Setter Property="BorderBrush"
Value="{DynamicResource ThemeBorderMidBrush}" />
</Style>
<Style Selector="RepeatButton:pressed /template/ ContentPresenter">
<Setter Property="Background"
Value="{DynamicResource ThemeControlHighBrush}" />
</Style>
<Style Selector="RepeatButton:disabled">
<Setter Property="Opacity"
Value="{DynamicResource ThemeDisabledOpacity}" />
</Style>
</Styles>
</Styles>

264
src/Avalonia.Themes.Default/ScrollBar.xaml
View File

@ -1,128 +1,140 @@
<Styles xmlns="https://github.com/avaloniaui">
<Style Selector="ScrollBar">
<Setter Property="Template">
<ControlTemplate>
<Border Background="{DynamicResource ThemeControlMidBrush}">
<Grid RowDefinitions="Auto,*,Auto">
<RepeatButton Name="PART_LineUpButton"
Classes="repeat"
Grid.Row="0"
Grid.Column="0"
Focusable="False">
<Path Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z"
Stretch="Uniform"
Fill="{DynamicResource ThemeForegroundLowBrush}" />
</RepeatButton>
<Track Grid.Row="1"
Grid.Column="1"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
ViewportSize="{TemplateBinding ViewportSize}"
Orientation="{TemplateBinding Orientation}"
IsDirectionReversed="True">
<Track.DecreaseButton>
<RepeatButton Name="PART_PageUpButton"
Classes="repeattrack"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_PageDownButton"
Classes="repeattrack"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb Name="thumb"/>
</Track>
<RepeatButton Name="PART_LineDownButton"
Classes="repeat"
Grid.Row="2"
Grid.Column="2"
Focusable="False">
<Path Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z"
Stretch="Uniform"
Fill="{DynamicResource ThemeForegroundLowBrush}" />
</RepeatButton>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ScrollBar:horizontal">
<Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{DynamicResource ThemeControlMidBrush}">
<Grid ColumnDefinitions="Auto,*,Auto">
<RepeatButton Name="PART_LineUpButton"
Classes="repeat"
Grid.Row="0"
Grid.Column="0"
Focusable="False">
<Path Data="M 3.18,7 C3.18,7 5,7 5,7 5,7 1.81,3.5 1.81,3.5 1.81,3.5 5,0 5,0 5,0 3.18,0 3.18,0 3.18,0 0,3.5 0,3.5 0,3.5 3.18,7 3.18,7 z"
Stretch="Uniform"
Fill="{DynamicResource ThemeForegroundLowBrush}" />
</RepeatButton>
<Track Grid.Row="1"
Grid.Column="1"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
ViewportSize="{TemplateBinding ViewportSize}"
Orientation="{TemplateBinding Orientation}">
<Track.DecreaseButton>
<RepeatButton Name="PART_PageUpButton"
Classes="repeattrack"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_PageDownButton"
Classes="repeattrack"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb Name="thumb"/>
</Track>
<RepeatButton Name="PART_LineDownButton"
Classes="repeat"
Grid.Row="2"
Grid.Column="2"
Focusable="False">
<Path Data="M 1.81,7 C1.81,7 0,7 0,7 0,7 3.18,3.5 3.18,3.5 3.18,3.5 0,0 0,0 0,0 1.81,0 1.81,0 1.81,0 5,3.5 5,3.5 5,3.5 1.81,7 1.81,7 z"
Stretch="Uniform"
Fill="{DynamicResource ThemeForegroundLowBrush}" />
</RepeatButton>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ScrollBar /template/ Thumb#thumb">
<Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style Selector="ScrollBar:horizontal /template/ Thumb#thumb">
<Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
</Style>
<Style Selector="ScrollBar:vertical">
<Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
</Style>
<Style Selector="ScrollBar:vertical /template/ Thumb#thumb">
<Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
</Style>
<Style Selector="ScrollBar /template/ RepeatButton.repeat">
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style Selector="ScrollBar /template/ RepeatButton.repeattrack">
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ScrollBar">
<Setter Property="Cursor" Value="Arrow" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{DynamicResource ThemeControlMidBrush}">
<Grid RowDefinitions="Auto,*,Auto">
<RepeatButton Name="PART_LineUpButton" HorizontalAlignment="Center"
Classes="repeat"
Grid.Row="0"
Focusable="False"
MinHeight="{DynamicResource ScrollBarThickness}">
<Path Data="M 0 4 L 8 4 L 4 0 Z" />
</RepeatButton>
<Track Grid.Row="1"
Grid.Column="1"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
ViewportSize="{TemplateBinding ViewportSize}"
Orientation="{TemplateBinding Orientation}"
IsDirectionReversed="True">
<Track.DecreaseButton>
<RepeatButton Name="PART_PageUpButton"
Classes="repeattrack"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_PageDownButton"
Classes="repeattrack"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb Name="thumb"/>
</Track>
<RepeatButton Name="PART_LineDownButton" HorizontalAlignment="Center"
Classes="repeat"
Grid.Row="2"
Grid.Column="2"
Focusable="False"
MinHeight="{DynamicResource ScrollBarThickness}">
<Path Data="M 0 0 L 4 4 L 8 0 Z" />
</RepeatButton>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ScrollBar:horizontal">
<Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{DynamicResource ThemeControlMidBrush}">
<Grid ColumnDefinitions="Auto,*,Auto">
<RepeatButton Name="PART_LineUpButton" VerticalAlignment="Center"
Classes="repeat"
Grid.Row="0"
Grid.Column="0"
Focusable="False"
MinWidth="{DynamicResource ScrollBarThickness}">
<Path Data="M 4 0 L 4 8 L 0 4 Z" />
</RepeatButton>
<Track Grid.Row="1"
Grid.Column="1"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
ViewportSize="{TemplateBinding ViewportSize}"
Orientation="{TemplateBinding Orientation}">
<Track.DecreaseButton>
<RepeatButton Name="PART_PageUpButton"
Classes="repeattrack"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_PageDownButton"
Classes="repeattrack"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb Name="thumb"/>
</Track>
<RepeatButton Name="PART_LineDownButton" VerticalAlignment="Center"
Classes="repeat"
Grid.Row="2"
Grid.Column="2"
Focusable="False"
MinWidth="{DynamicResource ScrollBarThickness}">
<Path Data="M 0 0 L 4 4 L 0 8 Z" />
</RepeatButton>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ScrollBar /template/ Thumb#thumb">
<Setter Property="Background" Value="{DynamicResource ThemeControlMidHighBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style Selector="ScrollBar /template/ Thumb#thumb:pointerover">
<Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}"/>
</Style>
<Style Selector="ScrollBar /template/ Thumb#thumb:pressed">
<Setter Property="Background" Value="{DynamicResource ThemeControlVeryHighBrush}"/>
</Style>
<Style Selector="ScrollBar:horizontal /template/ Thumb#thumb">
<Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Height" Value="{DynamicResource ScrollBarThumbThickness}" />
</Style>
<Style Selector="ScrollBar:vertical">
<Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
</Style>
<Style Selector="ScrollBar:vertical /template/ Thumb#thumb">
<Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
<Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
</Style>
<Style Selector="ScrollBar /template/ RepeatButton.repeat">
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style Selector="ScrollBar /template/ RepeatButton.repeattrack">
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter>
</Style>
<Style Selector="ScrollBar /template/ RepeatButton > Path">
<Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowBrush}" />
</Style>
<Style Selector="ScrollBar /template/ RepeatButton:pointerover > Path">
<Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
</Style>
</Styles>

1
src/Avalonia.Themes.Default/ScrollViewer.xaml
View File

@ -36,6 +36,7 @@
Visibility="{TemplateBinding VerticalScrollBarVisibility}"
Grid.Column="1"
Focusable="False"/>
<Panel Grid.Row="1" Grid.Column="1" Background="{DynamicResource ThemeControlMidBrush}"/>
</Grid>
</ControlTemplate>
</Setter>

Write Preview
Loading…
Cancel
Save