Checkbox mode doesn't work anymore after upgrading project to WP8

[Bernhard König]

Hi,

I updated my WP7 project to WP8 (and also removed all WP7 Telerik refernces by the WP8 ones ... by the way, when will the cool Telerik tools from VS2010 to automatically upgrade assemblies to new versions be available in VS2012?) and now I started to get Exceptions whenever I use CheckboxMode.

I can check 1 item and no crash appears ... but as far as I check a 2nd item or I start scrolling in the JumpList, an exception is raised. What I noticed is that in my project only the check icon is displayed but not the square border around it.

Here's the exception and StackTrace. As none of my code is involved directly here, I don't know exactly where to start looking for the problem. I removed my custom Checkbox style from the control but it didn't help.

I was not able to reproduce this with a small sample project, there everything's fine (also the square around the icon appears). So if you need a sample project, let me know and I send you my project in a support ticket.

Error HRESULT E_FAIL has been returned from a call to a COM component.

   at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)
   at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
   at Telerik.Windows.Controls.RadDataBoundListBoxItem.UpdateCheckBoxVisualState(String newState)
   at Telerik.Windows.Controls.RadDataBoundListBoxItem.OnManipulationStarted(ManipulationStartedEventArgs e)
   at System.Windows.Controls.Control.OnManipulationStarted(Control ctrl, EventArgs e)
   at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)

[Deyan]

Hello Bernhard,

Thanks for writing.

This is an expected exception if you are using a custom style for the checkboxes which is based on the style previously used in Windows Phone 7.x, as there are different visual states in the native check box control in Windows Phone 8.

I am pasting here the updated style for the item check box in RadDataBoundListBox for your convenience:

<Style TargetType="telerikPrimitives:ItemCheckBox">
    <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBorderBrush}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed" >
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxPressedBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked" />
                            <VisualState x:Name="Indeterminate">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="CheckBox">
                        <Border x:Name="CheckBackground" IsHitTestVisible="False" VerticalAlignment="Center" HorizontalAlignment="Left" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{StaticResource PhoneBorderThickness}" Height="32" Width="32"/>
                        <Rectangle x:Name="IndeterminateMark" IsHitTestVisible="False" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" Visibility="Collapsed" Grid.Row="0"/>
                        <Path x:Name="CheckMark" IsHitTestVisible="False" Visibility="Collapsed" Width="24" Height="18" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}"
          Data="M0,119 L31,92 L119,185 L267,0 L300,24 L122,250 z" StrokeLineJoin="Round" StrokeThickness="2"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

Greetings,
Deyan
the Telerik team

[Bernhard König]

Hi Deyan,

thanks for your fast response!

I already tried to remove the custom style from the CheckBoxStyle but it didn't help ... but your reply put me in the right direction anyway: for some reason, I had references to the WP7.1 libraries in my WP8 solution. I'm sure I replaced them but anyhow ... my fault ... thanks a lot!

Bernhard

[Bernhard König]

Now I came across another issue while testing this - I use PivotBlocker like you do in your sample project when CheckBoxMode is enabled in a list within a pivot control.

In WP8, the headers for the other pivot items get disabled as expected, but I still can swipe to the left and switch to the next pivot item. If checkbox mode is enabled there also I get an exception as blocking was already initiated by the other control.

Is this fixable?

When comparing this behavior to WP7, swiping is not possible there.

Thanks,

Bernhard

[Deyan]

Hi Bernhard,

Thanks for writing and for reporting this issue.

We are aware of this issue. It happens because of some upgrades which Microsoft have introduced in the Pivot control. Now this control uses optimized manipulation routing technique which makes interaction with it smoother. This is done my offloading the manipulation handling on another thread, just like in the ScrollViewer component coming from the Mango version of Windows Phone.

This, however, changes the way manipulation events are fired for the control. Since we have been using them to prevent the pivot from changing items when the CheckMode in the list box is active, now this functionality is broken. We are still investigating the case and try to find out another approach for blocking the pivot. In the Silverlight Toolkit for Windows Phone there is a LockablePivot component which uses different approach to achieve this. It seems to also not work as expected on Windows Phone 8.

Theoretically you should be able to turn off the optimized manipulation routing for the Pivot control by setting the UseOptimizedManipulationRouting to false but with the official Wp8 SDK this seems to not work.

We hope that we will be able to find a workaround for this for our upcoming Service Pack.

Let me know if you have further questions or need assistance.

Greetings,
Deyan
the Telerik team

[Deyan]

Hello Bernhard,

This is a quick follow up with an update on this case.

We just found out that the native Pivot control has a new property which can be used to lock or unlock it. In other words, the PivotBlocker functionality is already natievly implemented and we will be dropping the PivotBlocker component.

The property is called IsLocked and you can simply set it to true when the check box mode is active, and reset it to false when the check box mode is inactive.

I hope this helps.

Greetings,
Deyan
the Telerik team

[Bernhard König]

Hi Deyan,

fantastic, thanks very much!

b.