Page 1 of 1

How to Change Slider Control Colours in Noesis Unity

Posted: 14 Mar 2018, 13:26
by ianh

I've searched the forums and google for a way to change the slider control colours but I've not found a way to do this yet. I've tried by using the slider controls default template, but I get errors saying 'static members not supported' amongst other errors. I've tried setting colorbrushes in the <slider.resources> element, but nothing seems to change the slider from it's default dark colour.

How can I do this?

Unity 2017.3.0f3
Noesis 2.1.0rc2
<Slider x:Name="AssetTrackTimeline" Background="{DynamicResource SliderThumbBackground}">
                            <SolidColorBrush x:Key="SliderSelectionBackground" Color="Green" />
                            <SolidColorBrush x:Key="SliderSelectionBorder" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBackground" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBorder" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Green" />
                            <SolidColorBrush x:Key="SliderThumbBorderHover" Color="Green" />
Works in blend, but not in noesis unity.

Re: How to Change Slider Control Colours in Noesis Unity

Posted: 14 Mar 2018, 18:26
by sfernandez

First of all you should read the tutorial about Style and Templates, and take a look at how Slider template is defined in one of the included Themes under the ControlGallery sample.

A Slider template is at least composed of a Track element, that includes a Thumb control with its own style and template.
Depending on how these templates are designed (if useing template bindings or not), the control visual appearance could be changed from outside the control or not.

The default Slider template supplied by Noesis does not provide bindings to the templated parent properties, so colors cannot be changed from outside the template. Perhaps we can improve that in a future release.
Works in blend, but not in noesis unity.
Is this xaml from a WPF project?
Anyway, that piece of xaml will only work if the Slider's template uses DynamicResources with that specific names to configure template elements.

I suggest you start with the following basic styles and templates and customize them as you want:
        <!-- ============== SLIDER ============== -->
        <!-- SliderButton Style -->
        <Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="ClickMode" Value="Press"/>
            <Setter Property="Delay" Value="250"/>
            <Setter Property="Interval" Value="100"/>
            <Setter Property="Template">
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Padding="{TemplateBinding Padding}" Background="Transparent">
                            <Border Background="{TemplateBinding Background}"/>
        <!-- SliderThumb Style -->
        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
        <!-- HorizontalSlider Template -->
        <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="{TemplateBinding MinHeight}"/>
                    <RowDefinition Height="Auto"/>
                <TickBar x:Name="TopTick"
                    Visibility="Collapsed" Margin="0,0,0,1"/>
                <TickBar x:Name="BottomTick"
                    Visibility="Collapsed" Margin="0,1,0,0"/>
                <Rectangle x:Name="TrackBg"
                    RadiusX="1" RadiusY="1"
                    Fill="{TemplateBinding Background}"
                    Stroke="{TemplateBinding BorderBrush}"/>
                <Track Grid.Row="1" x:Name="PART_Track">
                        <RepeatButton x:Name="DecBtn"
                            Style="{StaticResource SliderButtonStyle}"
                            Background="{TemplateBinding Foreground}"
                        <Thumb x:Name="SliderThumb"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Style="{StaticResource SliderThumbStyle}"/>
                            Style="{StaticResource SliderButtonStyle}"
                <Trigger Property="IsDirectionReversed" Value="True">
                    <Setter TargetName="DecBtn" Property="Padding" Value="1,8,5,8"/>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
        <!-- Slider Style -->
        <Style TargetType="{x:Type Slider}">
            <Setter Property="Background" Value="Silver"/>
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="Foreground" Value="DodgerBlue"/>
            <Setter Property="MinHeight" Value="20"/>
            <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
    <Slider Width="200" VerticalAlignment="Center"/>

Re: How to Change Slider Control Colours in Noesis Unity

Posted: 15 Mar 2018, 23:45
by ianh
OK that's perfect. That's exactly the code I needed to look at. Much appreciated.

Re: How to Change Slider Control Colours in Noesis Unity

Posted: 16 Mar 2018, 00:49
by jsantos
Also important to note that our default theme, the embedded one being used when no theme is specified, is also available at ... Theme.xaml

Thanks for your feedback! Marking this as solved.