Question

I have a custom control that i have derived from the Control class. I want this custom control to have visual states. How do i define these states through Blend? If i have a user control or some other inbuilt control it’s very easy to do so. But how can i define visual states for custom control. I want to use Blend only and do not want to write all that code by myself.

Thanks in advance 🙂

Answer 1

When you create a custom control by extending Control you must give it a style, this style is where you would hold all of your visual states.

If you add a style in you App.xaml that applies to your control, then you can set the ControlTemplate which has the visual states inside of it. Here is some sample XAML that you can add to your page, then edit via Blend to your hearts content.

(Note, untested XAML)

<Style x:Key="myControlFrameStyle" TargetType="ns:MyOwnClass">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ns:MyOwnClass">
         <Border>
           <VisualStateManager.VisualStateGroups>
             ...
           </VisualStateManager.VisualStateGroups>
         </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>