Toggle Switch Color

[Erik]

The Silverlight Toolkit version of toggleswitch has a attribute for switchforeground, is there a way we can get this implemented in a future release?

[Georgi]

Hi Erik,

Thank you for contacting us.

RadToggleSwitch exposes a property named ButtonStyle, which you may use to alter the appearance of the aggregated ToggleSwitchButton instance:

<telerik:RadToggleSwitch IsChecked="True">
    <telerik:RadToggleSwitch.ButtonStyle>
        <Style TargetType="telerikToggleSwitch:ToggleSwitchButton">
            <Setter Property="CheckBackground" Value="Red"/>
        </Style>
    </telerik:RadToggleSwitch.ButtonStyle>
</telerik:RadToggleSwitch>

You will also need to add the following namespace definition in XAML:

xmlns:telerikToggleSwitch="clr-namespace:Telerik.Windows.Controls.ToggleSwitch;assembly=Telerik.Windows.Controls.Primitives"

I hope this helps. Let me know if I can assist you in some other way.

Greetings,
Georgi
the Telerik team

[Pat]

Is there anyway way to set the unchecked colour,. which seems to be set to black (or presumably white if it is light theme).

[Todor]

Hi Pat,

You can use the ButtonStyle property of RadToggleSwitch again. Just in the style you have to add a setter to the property Background:

<Style TargetType="telerikToggleSwitch:ToggleSwitchButton">
    <Setter Property="CheckBackground" Value="Red"/>
    <Setter Property="Background" Value="Green"/>
</Style>

I hope this helps. Let me know if you need additional assistance.

Regards,
Todor
the Telerik team

[Pat]

Thanks that fixed that, so I am now trying to set the Foreground for the header in the control.

Pat

[Todor]

Hi Pat,

The visual representation of RadToggleSwitch consists of ContentControl, ContentPresenter and ToggleSwitchButton. The ContentControl is the header text that is displayed on the top. The ContentPresenter is the Content, which by default is the On/Off text and the ToggleSwitchButton is the switch itself.
To change the Foreground of the header, you can use the HeaderStyle property of RadToggleSwitch:

<telerikPrimitives:RadToggleSwitch.HeaderStyle>
    <Style TargetType="ContentControl">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</telerikPrimitives:RadToggleSwitch.HeaderStyle>

If you want to change the color of the other element: the On/Off notification, you have to edit the ContentTemplate:

<telerikPrimitives:RadToggleSwitch.ContentTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}" Foreground="Green" />
    </DataTemplate>
</telerikPrimitives:RadToggleSwitch.ContentTemplate>

I hope this information helps. Let me know if you need additional assistance.

Greetings,
Todor
the Telerik team

[Matthew]

Is there a way to bind the 'CheckboxBackground' color style?

I know the typical silverlight way(hack) of binding setters in styles is with attached properties; I'm not seeing a property on the base control like you guys usually expose.

[Todor]

Hello Matthew,

Thank you for your question.

You can bind the ButtonStyle property of RadToggleSwitch to a property from your ViewModel and this property can contain the setters for the CheckBackgroundProperty and any other ToggleSwitchButton properties that you need to modify. We decided that it is not necessary to expose all the properties of ToggleSwitchButton when we can have just one.

Let me know if you need additional assistance here.

All the best,
Todor
the Telerik team

[bento]

Do you know how to use this Button Style as Application Resources ? apply for all ToggleSwitch ? For example  :

<Application.Resources>
    <Style x:Key="ToggleSwitchButtonStyle" TargetType="telerikToggleSwitch:ToggleSwitchButton">
        <Setter Property="CheckBackground"
                Value="Blue" />
        <Setter Property="Background"
                Value="Gray" />
        <Setter Property="BorderBrush"
                Value="Gray" />
        <Setter Property="ThumbBackground"
                Value="White" />
        <Setter Property="CheckMargin"
                Value="3" />
    </Style>
</Application.Resources>

But I can't implement it using

 <telerikPrimitives:RadToggleSwitch IsChecked="False" Style="ToggleSwitchButtonStyle" >

[Todor]

Hi,

When you add the style to the resources, it can be used as a static resource. The other thing that you need to have in mind is that you can apply a style through the Style property of RadToggleSwitch which targets the RadToggleSwitch itself. Since the style that you have defined targets only the toggle switch button, you need to use the ButtonStyle property:

<telerikPrimitives:RadToggleSwitch ButtonStyle="{StaticResource ToggleSwitchButtonStyle}"/>

I hope this information helps.

 

Regards,
Todor
Telerik