title: Making a custom control based on the ToggleButton that switches content when checked (VisualState problems)
body: <p>This is my <code>ToggleContentButton</code> that adds a <code>CheckedContent</code> to the <code>ToggleButton</code>.</p>
  <pre class="lang-cs prettyprint-override"><code>
      /// &lt;summary&gt;
      /// A &lt;see cref=&quot;ToggleButton&quot;/&gt; that can change content when toggled
      /// &lt;/summary&gt;
      public sealed partial class ToggleContentButton : ToggleButton
      {
          /// &lt;summary&gt;
          /// A &lt;see cref=&quot;DependencyProperty&quot;/&gt; for the &lt;see cref=&quot;CheckedContent&quot;/&gt; property.
          /// &lt;/summary&gt;
          public static readonly DependencyProperty CheckedContentProperty = DependencyProperty.Register(
              nameof(CheckedContent),
              typeof(object),
              typeof(ToggleContentButton),
              new PropertyMetadata(null));
  
          /// &lt;summary&gt;
          /// Initializes a new instance of the &lt;see cref=&quot;ToggleContentButton&quot;/&gt; class.
          /// &lt;/summary&gt;
          public ToggleContentButton()
          {
              this.DefaultStyleKey = typeof(ToggleContentButton);
          }
  
          /// &lt;summary&gt;
          /// The &lt;see cref=&quot;UIElement&quot;/&gt; the &lt;see cref=&quot;ToggleContentButton&quot;/&gt; shows when toggled.
          /// &lt;/summary&gt;
          public object CheckedContent
          {
              get { return (object)GetValue(CheckedContentProperty); }
              set { SetValue(CheckedContentProperty, value); }
          }
      }
  </code></pre>
  <p>This is how I define the default style for my new Control, but the <code>VisualStates</code> are completely broken.</p>
  <pre class="lang-xml prettyprint-override"><code>    &lt;Style x:Key=&quot;DefaultToggleContentButtonStyle&quot; TargetType=&quot;local:ToggleContentButton&quot;&gt;
          &lt;Style.Setters&gt;
              &lt;Setter Property=&quot;Template&quot;&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType=&quot;local:ToggleContentButton&quot;&gt;
                          &lt;Grid&gt;
                              &lt;VisualStateManager.VisualStateGroups&gt;
                                  &lt;VisualStateGroup x:Name=&quot;CommonStates&quot;&gt;
                                      &lt;VisualState x:Name=&quot;Normal&quot;/&gt;
                                      &lt;VisualState x:Name=&quot;MouseOver&quot;&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundAnimation&quot; Storyboard.TargetProperty=&quot;Opacity&quot; To=&quot;1&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)&quot; To=&quot;#F2FFFFFF&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)&quot; To=&quot;#CCFFFFFF&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)&quot; To=&quot;#7FFFFFFF&quot;/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name=&quot;Pressed&quot;&gt;
                                          &lt;Storyboard&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;Background&quot; Storyboard.TargetProperty=&quot;(Border.Background).(SolidColorBrush.Color)&quot; To=&quot;#FF6DBDD1&quot;/&gt;
                                              &lt;DoubleAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundAnimation&quot; Storyboard.TargetProperty=&quot;Opacity&quot; To=&quot;1&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)&quot; To=&quot;#D8FFFFFF&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)&quot; To=&quot;#C6FFFFFF&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)&quot; To=&quot;#8CFFFFFF&quot;/&gt;
                                              &lt;ColorAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)&quot; To=&quot;#3FFFFFFF&quot;/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name=&quot;Disabled&quot;&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;DisabledVisualElement&quot; Storyboard.TargetProperty=&quot;Opacity&quot; To=&quot;.55&quot;/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                  &lt;/VisualStateGroup&gt;
                                  &lt;VisualStateGroup x:Name=&quot;CheckStates&quot;&gt;
                                      &lt;VisualState x:Name=&quot;Checked&quot;&gt;
                                          &lt;VisualState.Setters&gt;
                                              &lt;Setter Target=&quot;checkedContentPresenter.Visibility&quot; Value=&quot;Visible&quot;/&gt;
                                              &lt;Setter Target=&quot;contentPresenter.Visibility&quot; Value=&quot;Collapased&quot;/&gt;
                                          &lt;/VisualState.Setters&gt;
                                          &lt;Storyboard&gt;
                                              &lt;PointAnimation Duration=&quot;0&quot; To=&quot;0.7,1&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(LinearGradientBrush.StartPoint)&quot;/&gt;
                                              &lt;PointAnimation Duration=&quot;0&quot; To=&quot;0.7,0&quot; Storyboard.TargetName=&quot;BackgroundGradient&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(LinearGradientBrush.EndPoint)&quot;/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name=&quot;Unchecked&quot;&gt;
                                          &lt;VisualState.Setters&gt;
                                              &lt;Setter Target=&quot;checkedContentPresenter.Visibility&quot; Value=&quot;Collapased&quot;/&gt;
                                              &lt;Setter Target=&quot;contentPresenter.Visibility&quot; Value=&quot;Visible&quot;/&gt;
                                          &lt;/VisualState.Setters&gt;
                                      &lt;/VisualState&gt;
                                  &lt;/VisualStateGroup&gt;
                                  &lt;VisualStateGroup x:Name=&quot;FocusStates&quot;&gt;
                                      &lt;VisualState x:Name=&quot;Focused&quot;&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation Duration=&quot;0&quot; Storyboard.TargetName=&quot;FocusVisualElement&quot; Storyboard.TargetProperty=&quot;Opacity&quot; To=&quot;1&quot;/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualState&gt;
                                      &lt;VisualState x:Name=&quot;Unfocused&quot; /&gt;
                                  &lt;/VisualStateGroup&gt;
                              &lt;/VisualStateManager.VisualStateGroups&gt;
                              &lt;Border x:Name=&quot;Background&quot; CornerRadius=&quot;3&quot; Background=&quot;White&quot; BorderThickness=&quot;{TemplateBinding BorderThickness}&quot; BorderBrush=&quot;{TemplateBinding BorderBrush}&quot;&gt;
                                  &lt;Grid Background=&quot;{TemplateBinding Background}&quot;  Margin=&quot;1&quot;&gt;
                                      &lt;Border Opacity=&quot;0&quot; x:Name=&quot;BackgroundAnimation&quot; Background=&quot;#FF448DCA&quot; /&gt;
                                      &lt;Rectangle x:Name=&quot;BackgroundGradient&quot; &gt;
                                          &lt;Rectangle.Fill&gt;
                                              &lt;LinearGradientBrush StartPoint=&quot;.7,0&quot; EndPoint=&quot;.7,1&quot;&gt;
                                                  &lt;GradientStop Color=&quot;#FFFFFFFF&quot; Offset=&quot;0&quot; /&gt;
                                                  &lt;GradientStop Color=&quot;#F9FFFFFF&quot; Offset=&quot;0.375&quot; /&gt;
                                                  &lt;GradientStop Color=&quot;#E5FFFFFF&quot; Offset=&quot;0.625&quot; /&gt;
                                                  &lt;GradientStop Color=&quot;#C6FFFFFF&quot; Offset=&quot;1&quot; /&gt;
                                              &lt;/LinearGradientBrush&gt;
                                          &lt;/Rectangle.Fill&gt;
                                      &lt;/Rectangle&gt;
                                  &lt;/Grid&gt;
                              &lt;/Border&gt;
                              &lt;ContentPresenter
                                x:Name=&quot;contentPresenter&quot;
                                Content=&quot;{TemplateBinding Content}&quot;
                                ContentTemplate=&quot;{TemplateBinding ContentTemplate}&quot;
                                VerticalAlignment=&quot;{TemplateBinding VerticalContentAlignment}&quot;
                                HorizontalAlignment=&quot;{TemplateBinding HorizontalContentAlignment}&quot;
                                Margin=&quot;{TemplateBinding Padding}&quot;/&gt;
                              &lt;ContentPresenter
                                x:Name=&quot;checkedContentPresenter&quot;
                                Content=&quot;{TemplateBinding CheckedContent}&quot;
                                ContentTemplate=&quot;{TemplateBinding ContentTemplate}&quot;
                                VerticalAlignment=&quot;{TemplateBinding VerticalContentAlignment}&quot;
                                HorizontalAlignment=&quot;{TemplateBinding HorizontalContentAlignment}&quot;
                                Margin=&quot;{TemplateBinding Padding}&quot;/&gt;
                              &lt;Rectangle x:Name=&quot;DisabledVisualElement&quot; RadiusX=&quot;3&quot; RadiusY=&quot;3&quot; Fill=&quot;#FFFFFFFF&quot; Opacity=&quot;0&quot; IsHitTestVisible=&quot;false&quot; /&gt;
                              &lt;Rectangle x:Name=&quot;FocusVisualElement&quot; RadiusX=&quot;2&quot; RadiusY=&quot;2&quot; Margin=&quot;1&quot; Stroke=&quot;#FF6DBDD1&quot; StrokeThickness=&quot;1&quot; Opacity=&quot;0&quot; IsHitTestVisible=&quot;false&quot; /&gt;
                          &lt;/Grid&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style.Setters&gt;
      &lt;/Style&gt;
  
      &lt;Style BasedOn=&quot;{StaticResource DefaultToggleContentButtonStyle}&quot; TargetType=&quot;local:ToggleContentButton&quot;/&gt;
  </code></pre>
  <p>Is there a proper and better way to do this? How can I implement the <code>VisualStates</code>?</p>