I am working on a WPF application where I have defined a style for the ScrollViewer in Resources and applied it to all controls. I need to change the Thumb colour to green only for a specific ComboBox while retaining all other default ScrollBar styles.
Here’s the ScrollViewer styles and template I currently have:
<UserControl.Resources>
<ResourceDictionary>
<!--#region ScrollViewer-->
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#2feb6871" />
<SolidColorBrush x:Key="NormalBrush" Color="Transparent" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="HorizontalNormalBrush" Color="#ffeb6871" />
<SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#FF282938" />
<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
Name="Border"
Margin="0"
CornerRadius="0"
Background="{StaticResource NormalBrush}"
BorderBrush="{StaticResource NormalBorderBrush}"
BorderThickness="0">
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background"
Value="{StaticResource HorizontalNormalBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border
CornerRadius="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="1" />
<RowDefinition Height="0.00001*" />
<RowDefinition MaxHeight="1" />
</Grid.RowDefinitions>
<Border
Grid.RowSpan="3"
CornerRadius="0"
Background="Transparent">
<Path Data="m 0 0 l 100 0 0 100 -100 0 z" Fill="#4feb6871" Stretch="Fill" />
</Border>
<RepeatButton
Grid.Row="0"
Style="{StaticResource ScrollBarLineButton}"
Height="18"
Command="ScrollBar.LineUpCommand"
Content="M 0 4 L 8 4 L 4 0 Z" />
<Track
Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource ScrollBarThumb}"
Margin="0,-1,0,-1"
Background="{StaticResource HorizontalNormalBrush}"
BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton
Grid.Row="3"
Style="{StaticResource ScrollBarLineButton}"
Height="18"
Command="ScrollBar.LineDownCommand"
Content="M 0 0 L 4 4 L 8 0 Z" />
</Grid>
</ControlTemplate>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Height" Value="Auto" />
<Setter Property="Width" Value="8" />
<Setter Property="Margin" Value="0,0,20,10" />
<Setter Property="Template"
Value="{StaticResource VerticalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style>
<!--#endregion ScrollViewer-->
I have defined the following Thumb styles in my resources:
<!-- Specific Thumb style with green color -->
<Style x:Key="ScrollBarThumbGreen" BasedOn="{StaticResource ScrollBarThumb}" TargetType="Thumb">
<Setter Property="Background" Value="Green"/>
</Style>
I want to apply the ScrollBarThumbGreen style to the Thumb in the ScrollBar of only one specific ComboBox. How can I achieve this without affecting other styles of this ComboBoxes?
Here’s how I am trying to implement to this specific ComboBox:
<StackPanel Orientation="Horizontal" Margin="0,40,0,0">
<Label Style="{DynamicResource LabelStyle1}" Content="Arc Off Profile:" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="18,0,0,0"/>
<ComboBox Style="{DynamicResource RoundedComboBox}" ItemContainerStyle="{DynamicResource RoundedComboBoxItem}" HorizontalAlignment="Left" Margin="22,0,0,0" Text="Select" VerticalAlignment="Center" DisplayMemberPath="Name"
PreviewMouseWheel="ComboBox_PreviewMouseWheel" ItemsSource="{Binding FilteredCameraProflieCollectionView}" IsSynchronizedWithCurrentItem="False" SelectedItem="{Binding ArcOffProfile}">
<ComboBox.Resources>
</ComboBox.Resources>
</ComboBox>
</StackPanel>
I want to retain the original ScrollBar style and only change the color of the Thumb for this specific ComboBox. How can I achieve this?
Thanks!