WildDragonLLC/teamsiso
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Restyle ScrollBar to match dark theme
Some checks failed
CI / build-and-test (push) Failing after 29s
Details

Browse source 
Default WPF ScrollBar template renders chunky Win9x line-up/line-down arrow buttons + a 3D thumb that look out of place on the dark canvas. Replace with a slim transparent track + tinted thumb pattern (Edge / VS Code / GitHub style):

- Thumb: BorderStrong by default, lifts to Text.Tertiary on hover, switches to cyan accent while dragging.

- No arrow buttons — track-clicks above/below the thumb still page-scroll via invisible RepeatButtons (preserves PageUp/PageDown behavior).

- Horizontal orientation has its own template via Style.Triggers so it picks the right Track command set (PageLeft/PageRight).

Affects every ScrollViewer in the app — settings panel, presets dialog list, Notes window, About dialog, Help cheat sheet.
This commit is contained in:
Zac Gaetano 2026-05-10 13:29:44 -04:00
parent c53c7a7768
commit 2de65f6d10
1 changed files with 92 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/TeamsISO.App/Themes/WildDragonTheme.xaml
View file

@ -687,16 +687,107 @@
</Setter>
</Style>
<!-- ════ ScrollBar (slim) ════ -->
<!-- ════ ScrollBar (slim, dark-theme-native) ════ -->
<!--
The default WPF ScrollBar template is a chunky Win9x affair (line-up
/ line-down arrow buttons + a 3D thumb) that clashes hard with the
dark canvas. Replace with a slim, transparent track + thumb pattern
like Edge / VS Code / GitHub use: thumb is barely visible at rest,
pops a tone brighter on hover/drag. Track-clicks still page-scroll
(the RepeatButton does the work) but render as invisible hit zones.
-->
<Style x:Key="Wd.ScrollBar.Thumb" TargetType="Thumb">
<Setter Property="Background" Value="{StaticResource Wd.BorderStrong}"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
CornerRadius="4"
Margin="2"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Text.Tertiary}"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Invisible page-scroll RepeatButton (clicks above/below thumb still page-scroll). -->
<Style x:Key="Wd.ScrollBar.PageButton" TargetType="RepeatButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ScrollBar">
<Setter Property="Width" Value="10"/>
<Setter Property="MinWidth" Value="10"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Bg" Background="{TemplateBinding Background}">
<Track x:Name="PART_Track" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Height" Value="10"/>
<Setter Property="MinHeight" Value="10"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Bg" Background="{TemplateBinding Background}">
<Track x:Name="PART_Track" IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageLeftCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource Wd.ScrollBar.Thumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource Wd.ScrollBar.PageButton}"
Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>