Question

I have a label control where I use a converter to switch its styles based on a bool property, IsCheckedOut on my viewmodel, like so:

    <UserControl.Resources>
      <Converters:BooleanStyleConverter 
       x:Key="BooleanStyleConverter " 
       StyleFalse="{StaticResource HeaderLabelStyle}" 
       StyleTrue="{StaticResource HeaderLabelHighlightedStyle}" />
     </UserControl.Resources>

    <Label Style="{Binding Path=IsCheckedOut, 
Converter={StaticResource BooleanStyleConverter}}">
    some content here
    </Label>

The converter simply returns one of the two styles:

public class BooleanStyleConverter : IValueConverter 
    {
        public Style StyleFalse { get; set; }
        public Style StyleTrue { get; set; }
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if ((bool)value)
            {
                return StyleTrue;
            }
            return StyleFalse;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

And the styles look something like this:

<Style x:Key="HeaderLabelHighlightedStyle" TargetType="{x:Type Label}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="Label">
    <Border Background="{StaticResource RedGradient}">
     <ContentPresenter />
    </Border>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style x:Key="HeaderLabelHighlightedStyle" TargetType="{x:Type Label}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="Label">
    <Border Background="{StaticResource BlueGradient}">
     <ContentPresenter />
    </Border>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

So when IsCheckedOut is true the label gets a red background, and when it’s false it gets a blue background (well, the styles are a bit more complicated, but you get the idea).
Now, I’d like to have a transition between the styles, so that the new colors fade in when IsCheckedOut changes.
Does anyone know how I can accomplish this?

Answer 1

Sorry, but you’re doing it wrong.

You do get bonus points for being extremely creative and ambitious in your solution. But you’ve taken the proverbial 5kg hammer down on a thumbtack.

The correct solution in this situation is to use Storyboards nested in VSM States.
It looks like you essentially have 2 States for your UI: One where some business logic value is true and another state for when it’s false. Note that the aforementioned distinction is 100% technology independent. In any technology, whatever it is you’re trying to achieve would be considered 2 states for your UI.

In Silverlight/WPF, instead of hacking together something that mimics UI states, you could actually create VisualStateManager states.

Technically it would work in the following way:
1. Your UserControl would have 1 VisualStateGroup that has 2 VisualStates (one for true and another for false).
2. Those VSM states each represent 1 storyboard.
3. That storyboard would change the template or any other properties you feel are appropriate.

To learn the basics of VSM I strongly suggest you spend the next 30 minutes watching the following VSM videos: http://expression.microsoft.com/en-us/cc643423.aspx (Under “How Do I?”)
Seriously, these videos are phenomenally successful in explaining VSM. The one that most pertinent to your dilemma is “Add States to a Control” but I’ll suggest you watch all of them.

In WPF, you could use the VisualStateManager from the WPF Toolkit.