ianh
Topic Author
Posts: 2
Joined: 25 Jan 2018, 13:06

How to Change Slider Control Colours in Noesis Unity

14 Mar 2018, 13:26

Hi,

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}">
                        <Slider.Resources>
                            <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" />
                        </Slider.Resources>
                    </Slider>
Works in blend, but not in noesis unity.
 
User avatar
sfernandez
Site Admin
Posts: 1918
Joined: 22 Dec 2011, 19:20

Re: How to Change Slider Control Colours in Noesis Unity

14 Mar 2018, 18:26

Hi,

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:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <!-- ============== 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">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Padding="{TemplateBinding Padding}" Background="Transparent">
                            <Border Background="{TemplateBinding Background}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <!-- SliderThumb Style -->
        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1"
                            CornerRadius="1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <!-- HorizontalSlider Template -->
        <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="{TemplateBinding MinHeight}"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TickBar x:Name="TopTick"
                    Placement="Top"
                    Fill="Black"
                    Height="4"
                    Visibility="Collapsed" Margin="0,0,0,1"/>
                <TickBar x:Name="BottomTick"
                    Grid.Row="2"
                    Fill="Black"
                    Placement="Bottom"
                    Height="4"
                    Visibility="Collapsed" Margin="0,1,0,0"/>
                <Rectangle x:Name="TrackBg"
                    Grid.Row="1"
                    RadiusX="1" RadiusY="1"
                    Margin="3,6"
                    Fill="{TemplateBinding Background}"
                    Stroke="{TemplateBinding BorderBrush}"/>
                <Track Grid.Row="1" x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton x:Name="DecBtn"
                            Style="{StaticResource SliderButtonStyle}"
                            Background="{TemplateBinding Foreground}"
                            Padding="5,8,1,8"
                            Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb x:Name="SliderThumb"
                            Width="10"
                            MinHeight="20"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Style="{StaticResource SliderThumbStyle}"/>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton
                            Style="{StaticResource SliderButtonStyle}"
                            Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsDirectionReversed" Value="True">
                    <Setter TargetName="DecBtn" Property="Padding" Value="1,8,5,8"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        
        <!-- 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}" />
        </Style>
    </Grid.Resources>
    
    <Slider Width="200" VerticalAlignment="Center"/>
    
</Grid>
 
ianh
Topic Author
Posts: 2
Joined: 25 Jan 2018, 13:06

Re: How to Change Slider Control Colours in Noesis Unity

15 Mar 2018, 23:45

OK that's perfect. That's exactly the code I needed to look at. Much appreciated.
 
User avatar
jsantos
Site Admin
Posts: 2906
Joined: 20 Jan 2012, 17:18
Contact:

Re: How to Change Slider Control Colours in Noesis Unity

16 Mar 2018, 00:49

Also important to note that our default theme, the embedded one being used when no theme is specified, is also available at

https://github.com/Noesis/Tutorials/blo ... Theme.xaml

Thanks for your feedback! Marking this as solved.

Who is online

Users browsing this forum: Google [Bot] and 1 guest