Maintain Control.Opacity with animation according to it's "Disabled" visual state?

Question

I have a custom button.

I want that when it goes to "Disabled" state, it's Opacity property should swap to 65% or so, over a time frame of a around a second, when it leaves the "Disabled" state, it should turn the Opacity back to 100% (animated).

How is this done?

How is this done?

Answer 1

This short video answered all my question in minutes!

Here is all I needed:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="CommonStates">
    <VisualStateGroup.Transitions>
      <VisualTransition GeneratedDuration="0:0:0.3" To="Disabled"/>
      <VisualTransition From="Disabled" GeneratedDuration="0:0:0.3"/>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="Normal"/>
    <VisualState x:Name="MouseOver"/>
    <VisualState x:Name="Pressed" />
    <VisualState x:Name="Disabled">
      <Storyboard>
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="(UIElement.Opacity)"
            Storyboard.TargetName="LayoutRoot">
          <EasingDoubleKeyFrame KeyTime="0" Value="0.55"/>
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
    </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>