Click here to Skip to main content
13,633,747 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

4.7K views
145 downloads
6 bookmarked
Posted 19 Mar 2018
Licenced CPOL

Switch Type WPF ToggleButton/RadioButton (On/Off) Control

, 19 Mar 2018
Rate this:
Please Sign up or sign in to vote.
A alternative ToggleButton/RadioButton control

Introduction

I was working on a project, and there was a switch type on/off Control. I had trouble porting the Control to another project to be used in a Style and was never really happy with it since it was not designed to be easily resized, so I decided to build a new one. There were a number of challenges to overcome since I wanted to be able to animate. Of course, after all the work, I had trouble with the storyboarding (help please).

The Style

The following is the Style I created:

<Style x:Key="SwitchTypeToggleButton"
       TargetType="{x:Type ToggleButton}">

    <Style.Resources>
        <Color x:Key="Color.Additional.LightGrey">#989EA8</Color>
        <Color x:Key="Color.Additional.MediumGrey">#61656B</Color>
        <Color x:Key="Color.MedtronicBranding.MedtronicBlue">#004B87</Color>
        <Color x:Key="Color.MedtronicBranding.CobaltBlue">#0085CA</Color>

        <Style x:Key="ToggleButtonContentTextbox"
               TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
        </Style>
        <SolidColorBrush x:Key="ToggleButtonFalseBackground"
                         Color="{StaticResource Color.Additional.LightGrey}" />
        <SolidColorBrush x:Key="ToggleButtonTrueBackground"
                         Color="{StaticResource Color.MedtronicBranding.CobaltBlue}" />
        <SolidColorBrush x:Key="ToggleButtonFalseForeground"
                         Color="{StaticResource Color.Additional.MediumGrey}" />
        <SolidColorBrush x:Key="ToggleButtonTrueForeground"
                         Color="{StaticResource Color.MedtronicBranding.MedtronicBlue}" />
        <TextBlock x:Key="OffContent"
                   Style="{StaticResource ToggleButtonContentTextbox}"
                   Text="Off" />
        <Style x:Key="OnContentControl"
               TargetType="ContentControl">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <TextBlock FontFamily="Wingdings 2"
                                   FontSize="24"
                                   FontWeight="Bold"
                                   Foreground="White"
                                   Style="{StaticResource ToggleButtonContentTextbox}"
                                   Text="P" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
        </Style>
        <Style x:Key="OffContentControl"
               TargetType="ContentControl">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <TextBlock FontSize="24"
                                   Foreground="White"
                                   Style="{StaticResource ToggleButtonContentTextbox}"
                                   Text="X" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
        </Style>

    </Style.Resources>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid x:Name="MainRow">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding ElementName=TopRow,
                        Path=ActualHeight}" />
                            <ColumnDefinition />
                            <ColumnDefinition Width="{Binding ElementName=TopRow,
                        Path=ActualHeight}" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="TopRow" />
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <Ellipse x:Name="BackgroundEllipse1"
                                 Grid.RowSpan="2"
                                 Grid.Column="0"
                                 Grid.ColumnSpan="3"
                                 Width="{Binding ElementName=MainRow,
                                                 Path=ActualHeight}"
                                 Height="{Binding ElementName=MainRow,
                                                  Path=ActualHeight}"
                                 HorizontalAlignment="Left"
                                 Fill="{StaticResource ToggleButtonTrueBackground}" />
                        <Ellipse x:Name="BackgroundEllipse2"
                                 Grid.Row="0"
                                 Grid.RowSpan="2"
                                 Grid.Column="0"
                                 Grid.ColumnSpan="3"
                                 Width="{Binding ElementName=MainRow,
                                                 Path=ActualHeight}"
                                 Height="{Binding ElementName=MainRow,
                                                  Path=ActualHeight}"
                                 HorizontalAlignment="Right"
                                 Fill="{StaticResource ToggleButtonFalseBackground}" />
                        <Border x:Name="BackgroundBorder"
                                Grid.Row="0"
                                Grid.RowSpan="2"
                                Grid.Column="1"
                                Background="{StaticResource ToggleButtonTrueBackground}" />
                    </Grid>
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="AnimationWidth" />
                            <ColumnDefinition Width="{Binding ElementName=MainRow,
                        Path=ActualHeight}" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="AnimationSizeBorder"
                                Grid.Column="0" />
                        <ContentControl Grid.Column="0"
                                        Style="{StaticResource OnContentControl}" />
                     </Grid>
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding ElementName=MainRow,
                Path=ActualHeight}" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <ContentControl Grid.Column="1"
                                        Style="{StaticResource OffContentControl}" />
                    </Grid>
                    <Grid Background="Transparent">
                        <StackPanel HorizontalAlignment="Left"
                                    Orientation="Horizontal">
                            <Border Width="{Binding ElementName=AnimationSizeBorder,
                Path=ActualWidth}" />
                            <Ellipse x:Name="ForegroundEllipse"
                                     Width="{Binding ElementName=MainRow,
                                                     Path=ActualHeight}"
                                     Height="{Binding ElementName=MainRow,
                                                      Path=ActualHeight}"
                                     HorizontalAlignment="Right"
                                     Fill="{StaticResource ToggleButtonTrueForeground}" />
                        </StackPanel>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="BackgroundBorder" Property="Background"
                Value="{StaticResource ToggleButtonFalseBackground}" />
                        <Setter TargetName="ForegroundEllipse" Property="Fill"
                Value="{StaticResource ToggleButtonFalseForeground}" />
                        <!--<Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName
                        ="AnimationSizeBorder"
                        Storyboard.TargetProperty="(Border.Width)"
                        To="0" Duration="0:0:3"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>

                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName=
                        "AnimationSizeBorder"
                        Storyboard.TargetProperty="(Border.Width)"
                        From="0" Duration="0:0:3"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>-->
                        <Setter TargetName="AnimationSizeBorder" Property="Width" Value="0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

It uses a number of Grid controls overlaid. The bottom most creates the rectangle with the rounded ends, and consists of two Ellipse controls and a Border, the Ellipse Height and Width are controlled by the ActualHeight of the control, and the Grid below it consisting of two rows and three columns, the row Height being used to control the width of the left and right columns. This is needed to properly place the Border below. The two Ellipse controls are above the Border control between them so that their Brush does not need to be changed when the background changes as the ToggleButton IsChecked value changes. Only the Brush of the Border between them changes.

The two Grid controls above this grid are used to determine the width of the ContentControl controls to the left and right that display the appropriate text for the IsChecked property's true and false states. One Grid contains the true state text and the other the false state text. Since the size is controlled by a ColumnDefinition GridLength, it was not possible to directly set the ContentControl Width through Binding.

Finally, the top most Grid contains a StackPanel with a Border that is collapsed to move the foreground Ellipse to its left that is the same size as the other Ellipse controls that form the background.

The Trigger for the ControlTemplate changes the Background Brush of the Border on the bottom most Grid, the Fill Brush of the Ellipse on the top most Grid, and the location of size of the Border on the top most Grid so as to move the top most Ellipse the right or left side.

All for the brushes used for the foreground and background and the content (text) for the true and false states are specified within the Resources of the Style so that they can be easily customized.

You will notice that I use a ContentControl for the text that is displayed for the true and false conditions with a Template that contains the text. This is because if I just specified a TextBlock, the first instance of the control would not contain this content if another instance is displayed.

Using the Code

Using this Style is like using any Style:

<ToggleButton Width="70"
              Height="35"
              Margin="10"
              Style="{StaticResource SwitchTypeToggleButton}" />

Notes

I was originally going to animate the control, but had trouble getting the animation to work, and it really seemed like it was unnecessary since the eye was effectively fooled anyway (the original control had a 200 millisecond animation, which is so short).

This right now only works horizontally, and would be best if it would change orientation, but just did not seem like it was worth the effort since I have mostly seen only horizontal switches, and I only needed horizontal for my application.

History

  • 03/19/2018: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Clifford Nelson
Software Developer (Senior) Clifford Nelson Consulting
United States United States
Has been working as a C# developer on contract for the last several years, including 3 years at Microsoft. Previously worked with Visual Basic and Microsoft Access VBA, and have developed code for Word, Excel and Outlook. Started working with WPF in 2007 when part of the Microsoft WPF team. For the last eight years has been working primarily as a senior WPF/C# and Silverlight/C# developer. Currently working as WPF developer with BioNano Genomics in San Diego, CA redesigning their UI for their camera system. he can be reached at qck1@hotmail.com.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
SuggestionAlternate solution Pin
Graeme_Grant19-Mar-18 6:36
mvpGraeme_Grant19-Mar-18 6:36 
GeneralRe: Alternate solution Pin
Bill S22-Mar-18 8:05
memberBill S22-Mar-18 8:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.180712.1 | Last Updated 19 Mar 2018
Article Copyright 2018 by Clifford Nelson
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid