Toggle Switch Color

10 posts, 0 answers
  1. Erik
    Erik avatar
    22 posts
    Member since:
    May 2011

    Posted 14 Feb 2012 Link to this post

    The Silverlight Toolkit version of toggleswitch has a attribute for switchforeground, is there a way we can get this implemented in a future release?
  2. Georgi
    Admin
    Georgi avatar
    296 posts

    Posted 15 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Pat
    Pat avatar
    31 posts
    Member since:
    Mar 2009

    Posted 26 Feb 2012 Link to this post

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

  5. Todor
    Admin
    Todor avatar
    778 posts

    Posted 27 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Pat
    Pat avatar
    31 posts
    Member since:
    Mar 2009

    Posted 27 Feb 2012 Link to this post

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

    Pat
  7. Todor
    Admin
    Todor avatar
    778 posts

    Posted 28 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. Matthew
    Matthew avatar
    32 posts
    Member since:
    Oct 2011

    Posted 24 Aug 2012 Link to this post

    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.
  9. Todor
    Admin
    Todor avatar
    778 posts

    Posted 28 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. bento
    bento avatar
    35 posts
    Member since:
    Aug 2013

    Posted 24 Aug 2013 Link to this post

    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" >
  11. Todor
    Admin
    Todor avatar
    778 posts

    Posted 28 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner