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
Unified 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, Vector = (Vector)_lastPoint,
}; };
PseudoClasses.Add(":pressed");
RaiseEvent(ev); RaiseEvent(ev);
} }
@ -102,6 +104,8 @@ namespace Avalonia.Controls.Primitives
RaiseEvent(ev); 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="ThemeBorderHighColor">#FFA0A0A0</Color>
<Color x:Key="ThemeControlLowColor">#FF282828</Color> <Color x:Key="ThemeControlLowColor">#FF282828</Color>
<Color x:Key="ThemeControlMidColor">#FF505050</Color> <Color x:Key="ThemeControlMidColor">#FF505050</Color>
<Color x:Key="ThemeControlMidHighColor">#FF686868</Color>
<Color x:Key="ThemeControlHighColor">#FF808080</Color> <Color x:Key="ThemeControlHighColor">#FF808080</Color>
<Color x:Key="ThemeControlVeryHighColor">#FFEFEBEF</Color>
<Color x:Key="ThemeControlHighlightLowColor">#FFA8A8A8</Color> <Color x:Key="ThemeControlHighlightLowColor">#FFA8A8A8</Color>
<Color x:Key="ThemeControlHighlightMidColor">#FF828282</Color> <Color x:Key="ThemeControlHighlightMidColor">#FF828282</Color>
<Color x:Key="ThemeControlHighlightHighColor">#FF505050</Color> <Color x:Key="ThemeControlHighlightHighColor">#FF505050</Color>
@ -32,7 +34,9 @@
<SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{DynamicResource ThemeBorderHighColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{DynamicResource ThemeBorderHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlLowBrush" Color="{DynamicResource ThemeControlLowColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeControlLowBrush" Color="{DynamicResource ThemeControlLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlMidBrush" Color="{DynamicResource ThemeControlMidColor}"></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="ThemeControlHighBrush" Color="{DynamicResource ThemeControlHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlVeryHighBrush" Color="{DynamicResource ThemeControlVeryHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightHighBrush" Color="{DynamicResource ThemeControlHighlightHighColor}"></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="FontSizeNormal">12</sys:Double>
<sys:Double x:Key="FontSizeLarge">16</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.Resources>
</Style> </Style>

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

@ -12,9 +12,14 @@
<Color x:Key="ThemeBorderLowColor">#FFAAAAAA</Color> <Color x:Key="ThemeBorderLowColor">#FFAAAAAA</Color>
<Color x:Key="ThemeBorderMidColor">#FF888888</Color> <Color x:Key="ThemeBorderMidColor">#FF888888</Color>
<Color x:Key="ThemeBorderHighColor">#FF333333</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="ThemeControlHighlightLowColor">#FFF0F0F0</Color>
<Color x:Key="ThemeControlHighlightMidColor">#FFD0D0D0</Color> <Color x:Key="ThemeControlHighlightMidColor">#FFD0D0D0</Color>
<Color x:Key="ThemeControlHighlightHighColor">#FF808080</Color> <Color x:Key="ThemeControlHighlightHighColor">#FF808080</Color>
@ -32,7 +37,9 @@
<SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{DynamicResource ThemeBorderHighColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{DynamicResource ThemeBorderHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlLowBrush" Color="{DynamicResource ThemeControlLowColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeControlLowBrush" Color="{DynamicResource ThemeControlLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlMidBrush" Color="{DynamicResource ThemeControlMidColor}"></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="ThemeControlHighBrush" Color="{DynamicResource ThemeControlHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlVeryHighBrush" Color="{DynamicResource ThemeControlVeryHighColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush> <SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush>
<SolidColorBrush x:Key="ThemeControlHighlightHighBrush" Color="{DynamicResource ThemeControlHighlightHighColor}"></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="FontSizeNormal">12</sys:Double>
<sys:Double x:Key="FontSizeLarge">16</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.Resources>
</Style> </Style>

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save