Bug in the majority of themes?

Jun 2, 2009 at 3:23 AM

Hi, I've been trying out the themes release, and unless my eyes deceive me, is there a bug in the majority of the themes?

The visual state of the checkbox and radio buttons do not display correctly on initialization -

So, if you have a checkbox with checked=true, it initially displays *without* a check mark.  If the user then clicks two times (in the case of a two-state checkbox), so that the state transitions to unchecked and then back to checked, it now displays correctly with the check mark.

The same can actually be achieved within the designer - if you alter the xaml from IsChecked="True" to IsChecked="False" and then back again, the designer will update to show the checkmark.

It seems a bit of a glaring bug though, so am I missing something?

Thanks.

Regards,

Phil

Jun 2, 2009 at 4:12 AM

On taking a further look at one of the themes (ShinyBlue), it looks like it's because of the way that a trigger on the IsChecked property is setup combined with the default opacity value for the check icon.

If, on this theme, you take a look at the style with targettype of CheckBox, you can see within the control template, the following for the check icon:

<Path x:Name="CheckIcon" Opacity="0" Stretch="Fill" Data="M102.03442,598.79645 L105.22962,597.78918 L106.95686,599.19977 C106.95686,599.19977 113.77958,590.53656 113.77958,590.53656 C113.77958,590.53656 107.40649,603.79431 107.40649,603.79431 z" Fill="#FFFFFFFF" Height="10" Width="11" Stroke="{StaticResource CheckIconBrush}" StrokeThickness="0"/>

Notice the opacity is set to default to zero, so the check icon would be invisible.

If we then take a look at the trigger for the IsChecked property we have the following:

                        <Trigger Property="IsChecked" Value="false">
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource CheckedTrue}" x:Name="CheckedTrue_BeginStoryboard"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource CheckedFalse}"/>
                            </Trigger.EnterActions>
                        </Trigger>

So, if I understand the problem correctly (I'm just learning WPF :) ), the issue is that the 'CheckedTrue' storyboard which sets the opacity to 1 is not called since the IsChecked property has never transitioned from false to true, meaning in turn that the trigger's exit actions are never executed and that leaves the opacity at it's default inital value of zero.

What I've found which would tend to confirm this hypothesis is that if we invert the trigger by triggering on Value="true" and switching the enter/exit actions, the theme seems to work correctly.

So, replacing the above trigger with the following fixes it:

                        <Trigger Property="IsChecked" Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource CheckedTrue}" x:Name="CheckedTrue_BeginStoryboard"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource CheckedFalse}"/>
                            </Trigger.ExitActions>
                        </Trigger>

Since opacity default to zero, in the case that the IsChecked property is initialized to false it doesn't matter that this trigger's exit actions are not triggered.  However, it does appear that the entry actions are triggered correctly.

I don't know if this is the same bug in the rest of the themes - the majority seem to have this issue.   But, I will take a look.

There also is a similar issue with radio buttons on the majority of themes.

Regards,
Phil

Jun 2, 2009 at 4:19 AM

Note, that only fixes the theme as far as two-state checkboxes, if you have a three state checkbox, there are another set of triggers which have the same issue - incorrect display of the checked state.

I'll take a look at those as well, but they look a bit more complicated, particularly given my limited experience with WPF.

Regards,

Phil

 

Jun 2, 2009 at 4:40 AM

Ok, so fixing the three state checkbox and radio buttons on the theme were also straightforward:

There is a MultiTrigger for the checkbox based on properties IsChecked = True and IsThreeState = True, if this is changed so that it triggers on IsChecked=False and IsThreeState=True and has it's exit and enter actions flipped, it fixes the three state checkbox.

For radio buttons, changing the trigger on IsChecked=true to IsChecked=false and flipping it's entry/exit actions fixes it.

 

I'm left wondering if this is a bug caused by a difference between silverlight and WPF - it's my understanding that these themes were based on some silverlight themes.  I'd be surprised if noone had noticed this issue, so I'm wondering if it's something that was missed in the conversion.

Regards,

Phil

 

Jun 2, 2009 at 4:56 AM

Ok, after a bit more testing it appears the fix didn't work for the multitrigger for three-state checkboxes.  The radio button and two-state checkbox do seem to be fixed by that.

It's getting late so I might take another look at it tomorrow, work permitting.

I'm hoping that the theme authors and other users can chime in on whether they've seen the same issues.

Thanks.

Regards,

Phil

Mar 29, 2010 at 7:54 AM
Edited Mar 29, 2010 at 7:56 AM
<ControlTemplate.Triggers>
    <Trigger Property="IsChecked" Value="True">
       <Setter Property="Opacity" Value="1" TargetName="CheckIcon"/>
       <!--<Trigger.ExitActions>
           <BeginStoryboard Storyboard="{StaticResource CheckedTrue}" x:Name="CheckedTrue_BeginStoryboard"/>
           </Trigger.ExitActions>
           <Trigger.EnterActions>
           <BeginStoryboard Storyboard="{StaticResource CheckedFalse}"/>
       </Trigger.EnterActions>-->
    </Trigger>
</ControlTemplate.Triggers>

I had to remove storyboard from the control template and use simple setter instead (shinyBlue)

 

 

Jul 9, 2010 at 10:21 PM
Thank you ashes_onfire, that fixed my problem with the Radio buttons.