Check box, checked state not working

May 26, 2009 at 8:08 PM

Hi, I'm using the expression dark style and the check box, checked state does not appear to be working...:

A simple xaml declaration:

                <CheckBox IsChecked="True" Content="Hello"/>


Results in display of an unchecked checkbox.

It only after the user unchecks and re-checks the checkbox that the check state is correctly displayed.

The same happens for code - if your code sets the IsChecked property to true, this only results in the correct display of a checked icon *IF* the IsChecked property is currently == false.

So, it appears that the checked icon state is only correctly updated upon a transition from one state to another, but does not correctly display the checked state upon initialization.

Anyone else seen this?  Am I doing something wrong?

Thanks in advance,
Phil

Sep 24, 2009 at 12:30 AM

Yes, I noticed this problem too and came here looking to see if they're planning on addressing the issue.  The checkbox control is unusable until it is fixed.  I also can't believe no one replied to your post yet for such a basic problem.

If anyone knows of a work around please share it. Or if you know when this'll be fixed, please let us know.

thanks,

Kathy

Sep 25, 2009 at 3:15 AM

Hi All,

The radio button also has this issue.

<RadioButton Content="RadioButton" IsChecked="True"/>

Anyone can help?

Thanks,

Tony

Sep 25, 2009 at 3:25 AM

I'm afraid my advice would basically be don't use them, they're way too buggy.

If you want to pursue getting them fixed, you might want to try posting on the msdn forums (I think there's one for WPF).

This posting has a bit more info on the problem:

http://wpf.codeplex.com/Thread/View.aspx?ThreadId=58152

Sorry, I don't have a better answer,

Phil

 

Sep 25, 2009 at 3:37 AM

Hi All,

I find a work around to solve the CheckBox and Radio Button problem. Use the theme from Sliverlight toolkit. But the design view is not work in VS  (ExpressionBlend 3 is OK).

<!--CheckBox-->
    <Style TargetType="CheckBox">
        <Setter Property="Background" Value="{StaticResource NormalBrush}" />
        <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Padding" Value="4,1,0,0" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver" />
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed" />
                                    <vsm:VisualTransition From="Normal" GeneratedDuration="00:00:00.3000000" To="MouseOver" />
                                    <vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.5000000" To="Normal" />
                                    <vsm:VisualTransition From="Pressed" GeneratedDuration="00:00:00.5000000" To="MouseOver" />
                                    <vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.3000000" To="Pressed" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="CheckStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition From="Checked" GeneratedDuration="00:00:00.5000000" To="Unchecked" />
                                    <vsm:VisualTransition From="Unchecked" GeneratedDuration="00:00:00.3000000" To="Checked" />
                                    <vsm:VisualTransition From="Checked" GeneratedDuration="00:00:00.3000000" To="Indeterminate" />
                                    <vsm:VisualTransition From="Indeterminate" GeneratedDuration="00:00:00.5000000" To="Unchecked" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unchecked" />
                                <vsm:VisualState x:Name="Indeterminate">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition From="Focused" GeneratedDuration="00:00:00.5000000" To="Unfocused" />
                                    <vsm:VisualTransition From="Unfocused" GeneratedDuration="00:00:00.3000000" To="Focused" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused" />
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="16" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                            <Rectangle Height="14" Margin="1" x:Name="Background" Width="14" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
                            <Rectangle Height="14" Margin="1" x:Name="BackgroundOverlay" Width="14" Opacity="0" Fill="{x:Null}" Stroke="{StaticResource HoverBrush}" StrokeThickness="2" />
                            <Rectangle Height="16" x:Name="PressedRectangle" Width="16" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource HoverBrush}" StrokeThickness="1" />
                            <Path Height="10" Margin="1,1,0,1.5" x:Name="CheckIcon" Width="10.5" Opacity="0" Fill="{StaticResource GlyphBrush}" Stretch="Fill" Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z" />
                            <Rectangle Height="8" x:Name="IndeterminateIcon" Width="10" Opacity="0" Fill="{StaticResource GlyphBrush}" />
                            <Rectangle Height="14" x:Name="DisabledVisualElement" Width="14" Opacity="0" Fill="{StaticResource DisabledBackgroundBrush}" />
                            <Rectangle Height="16" x:Name="ContentFocusVisualElement" Width="16" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource HoverShineBrush}" StrokeThickness="1" />
                            <Rectangle Height="12" x:Name="ShineRectangle" Width="14" IsHitTestVisible="false" Opacity="1" Stroke="{x:Null}" StrokeThickness="1" Fill="{StaticResource ShineBrush}" Margin="2,2,2,2" />
                        </Grid>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--RadioButton -->
    <Style TargetType="RadioButton">
        <Setter Property="Background" Value="{StaticResource NormalBrush}" />
        <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Padding" Value="4,1,0,0" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="16" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver" />
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed" />
                                    <vsm:VisualTransition From="Normal" GeneratedDuration="00:00:00.3000000" To="MouseOver" />
                                    <vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.5000000" To="Normal" />
                                    <vsm:VisualTransition From="Pressed" GeneratedDuration="00:00:00.5000000" To="MouseOver" />
                                    <vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.3000000" To="Pressed" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PressedEllipse" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="CheckStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition From="Checked" GeneratedDuration="00:00:00.5000000" To="Unchecked" />
                                    <vsm:VisualTransition From="Unchecked" GeneratedDuration="00:00:00.3000000" To="Checked" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unchecked" />
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition From="Focused" GeneratedDuration="00:00:00.5000000" To="Unfocused" />
                                    <vsm:VisualTransition From="Unfocused" GeneratedDuration="00:00:00.3000000" To="Focused" />
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0.5" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused" />
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                            <Ellipse Height="14" Margin="1" x:Name="Background" Width="14" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
                            <Ellipse Height="14" Margin="1" x:Name="BackgroundOverlay" Width="14" StrokeThickness="2" Stroke="{StaticResource HoverBrush}" Opacity="0" />
                            <Ellipse Height="14" Margin="1" x:Name="PressedEllipse" Width="14" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{StaticResource HoverBrush}" Opacity="0" />
                            <Ellipse Height="6" x:Name="CheckIcon" Width="6" Opacity="0" Fill="{StaticResource GlyphBrush}" />
                            <Ellipse Height="14" x:Name="DisabledVisualElement" Width="14" Opacity="0" Fill="{StaticResource DisabledBackgroundBrush}" />
                            <Ellipse Height="16" x:Name="ContentFocusVisualElement" Width="16" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource GlyphBrush}" StrokeThickness="1" />
                            <Ellipse Height="12" Margin="2,2,2,2" x:Name="ShineEllipse" Width="12" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{x:Null}" Fill="{StaticResource ShineBrush}" />
                        </Grid>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Coordinator
Sep 25, 2009 at 11:00 AM

I have to appoligize for the LONG delay in fixing these issues... I have checked in the fix for BureauBlack, BureauBlue, ExpressionDark, ExpressionLight, ShinyBlue, ShinyRed & WhistlerBlue. Will address the other themes as soon as I have time!!!

Rudi

Sep 25, 2009 at 7:25 PM

Thanks a lot Rudi, thats great news.

Phil

 

Oct 22, 2009 at 3:31 PM

I just tried both of the Sep 25 checked in codes, and neither seems to fix the Radiobutton issue. Even the demo has the same issue.

I found that if I set isChecked to false, then to true after the initialization, it shows correctly.

This seems consistent across all the themes, so maybe the base code has an issue?

I'm not a Theme expert, but it seems that the animation maybe at issue?

Thanks for all your work!

Nov 3, 2011 at 6:07 PM

Hi,

I've also tried the latest version of ExpressionDark theme and the RadioButton issue persists.

I'm trying to edit it using Expression Blend 4 without success.

rudigrobler, do you know the root cause of this bug?

Thanks!

-Kin

Jul 27, 2012 at 10:01 AM
Should it becoz there isnt trigger action defined

  <Trigger Property="IsChecked" Value="True"/>

Then, just change it by copying the one from isChecked =false, and it become

  <Trigger Property="IsChecked" Value="True">
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="CheckedOff_BeginStoryboard2" Storyboard="{StaticResource CheckedOff}" />
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="CheckedOn_BeginStoryboard2" Storyboard="{StaticResource CheckedOn}" />
                </Trigger.EnterActions>
            </Trigger>

it looks alright here in my code

kinjinng wrote:

Hi,

I've also tried the latest version of ExpressionDark theme and the RadioButton issue persists.

I'm trying to edit it using Expression Blend 4 without success.

rudigrobler, do you know the root cause of this bug?

Thanks!

-Kin

 


Jul 27, 2012 at 10:01 AM
Should it becoz there isnt trigger action defined

  <Trigger Property="IsChecked" Value="True"/>

Then, just change it by copying the one from isChecked =false, and it become

  <Trigger Property="IsChecked" Value="True">
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="CheckedOff_BeginStoryboard2" Storyboard="{StaticResource CheckedOff}" />
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="CheckedOn_BeginStoryboard2" Storyboard="{StaticResource CheckedOn}" />
                </Trigger.EnterActions>
            </Trigger>

it looks alright here in my code

kinjinng wrote:

Hi,

I've also tried the latest version of ExpressionDark theme and the RadioButton issue persists.

I'm trying to edit it using Expression Blend 4 without success.

rudigrobler, do you know the root cause of this bug?

Thanks!

-Kin