Can't apply different resources brushes for checked/unchecked state for checkbox ? RRS feed

  • Question

  • Hi,

    What I want to achieve is pretty simple. Please note that I'm just starting expression blend (SP1) and I may have missed something, but I find this issue pretty strange.

    Here is what I want to to : I want to completely restyle a check box, getting rid of everything, and it will be just a rectangle with a different color gradient for checked/unchecked state.
    It's working just fine when I set the gradient brush manually for checked/unchecked state (Fill of the rectangle), however when I try to apply a local ressource gradient brush rather than doing it manually, I can't put one for Checked state, and another one for Unchecked state ... As soon as I use one for a state, it is common to both states ...
    Is there something I'm doing wrong ? I really would like to be able to apply two different gradient brushes from ressources for my two states, so that I can change it more easily if needed, but I can't make it work !

    Thanks a lot for your answers.

    Friday, February 6, 2009 10:12 AM

All replies

  • I'm sure there's a better way to do this, but my workaround when I initially started working with checkboxes was to:

    • duplicate the rectangle on top of the existing one
    • set it to the checkedBrush (or whatever you've named it)
    • set the transparency to zero

    Now create a new timeline called boxChecked and set the transparency of your hidden rectangle to 100% at a tenth of a second into it. Then make one called boxUnchecked and have it fade back to 0% at a tenth of a second. The last part is to assing these timelines to the checked/unchecked states, then you're all done.

    The other way to do it is by animating the individual gradiant stops, which I really don't like doing. If you go this route, your code will end up looking like this:

    <Storyboard x:Key="RecentMenu.MouseOnlyAnimation">  
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" 
                                      Value="0.595" /> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
                <SplineColorKeyFrame KeyTime="00:00:00.2000000" 
                                     Value="#39FFFFFF" /> 
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
                <SplineColorKeyFrame KeyTime="00:00:00.2000000" 
                                     Value="#36000000" /> 
    • Proposed as answer by VLTII Friday, February 6, 2009 5:22 PM
    Friday, February 6, 2009 5:21 PM