This is a migrated thread and some comments may be shown as answers.

CheckBoxes What Changed?!?

5 Answers 55 Views
DataBoundListBox
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Matthew
Top achievements
Rank 1
Matthew asked on 06 Jun 2012, 11:19 AM
OK, so I had a custom style for my checkboxes, posted below, that brought the top margin down in line with the top margin of the text in my list (kinda like how the native email app looks). When I upgraded to 2012.2.509.2040 from the old 2011 version my margin fixes don't work anymore.

I did notice that you guys changed your checkboxes from the native silverlight ones to ItemCheckBox from the telerik primatives (and I changed my xaml as well to reflect that). But now for the life of me I can't get my margins back right. The only property setter it seems to honor is the vertical alignment (and putting at the top is terrible, center is not what I want, and I don't wanna do negative margins on my text like the example apps).

What else changed? Really, I'm 4 hours down now on something that was working yesterday.

<Style x:Key="ItemCheckBoxStyle" TargetType="telerikPrimitives:ItemCheckBox">
            <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}" />
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}" />
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Margin" Value="24,15,0,0" />
            <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="CheckBackground" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxPressedBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <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 PhoneRadioCheckBoxCheckDisabledBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}" />
                                            </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" Width="32" Height="32" HorizontalAlignment="Left" VerticalAlignment="Center" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Background}" BorderThickness="{StaticResource PhoneBorderThickness}" IsHitTestVisible="False" />
                                <Rectangle x:Name="IndeterminateMark" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" IsHitTestVisible="False" Visibility="Collapsed" />
                                <Path x:Name="CheckMark" Width="24" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,119 L31,92 L119,185 L267,0 L300,24 L122,250 z" Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}" IsHitTestVisible="False" Stretch="Fill" StrokeLineJoin="Round" StrokeThickness="2" Visibility="Collapsed" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Or rather, i just want my check boxes to line up with the tip of the text in my list. If you could just point me in that direction I'd be happy as well.

5 Answers, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 06 Jun 2012, 01:00 PM
Hello Matthew,

Thanks for writing.

Indeed, we have updated the layout of RadDataBoundListBoxItem with a custom ItemCheckBox type and additionally have changed the way checkboxes are positioned. We needed to do this because of the newly introduced horizontal scrolling and Wrap Mode layout modes in RadDataBoundListBox that had to also support checkboxes. The issue that you are experiencing is related to the fact that there are now visual states which, according to the scrolling mode (horizontal or wrap), set margins to the checkbox that override your custom settings in the style. This behavior is not correct and we would like to apologize for the caused inconvenience.

We have already come up with some ideas how to address this and we are going to provide a fix for the upcoming Q2 2012 release (due to in a week). With this version you will no longer need to provide the whole style for the checkbox, but simply define one with the additional settings you need (the Margin in your case) and nothing more.

Let us know if you are alright with this schedule or you need a workaround (the new styles) earlier.

Thanks for your understanding.

Regards,
Deyan
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Matthew
Top achievements
Rank 1
answered on 06 Jun 2012, 05:10 PM
Wrap Mode for the DataboundListBox? When did that happen? I've wanted that feature for a while. Do we have that currently or is it in a future build? That's so awesome!

Back to the subject, I reverted this morning before my build and I'm testing that one now; it'll probably go to market so I don't need anything quicker than next week. I'm just a few updates behind your current build and I decided it was time to bite the bullet and catch up.

Either way, sorry for the rant, and thank you so much for the quick reply!
0
Deyan
Telerik team
answered on 07 Jun 2012, 06:31 AM
Hi Matthew,

The Wrap Mode for RadDataBoundListBox has been introduced as of Q1 2012. You can find a lot of useful information about it here:

http://www.telerik.com/help/windows-phone/raddataboundlistbox-features-virtualizationstrategies.html

and here:

http://blogs.telerik.com/windowsphoneteam/posts/12-02-20/wrap-layout-ui-virtualization-raddataboundlistbox-for-wp.aspx

Let us know in case of further questions or feedback.

All the best,
Deyan
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Matthew
Top achievements
Rank 1
answered on 13 Jun 2012, 12:19 PM
We have already come up with some ideas how to address this and we are going to provide a fix for the upcoming Q2 2012 release (due to in a week). With this version you will no longer need to provide the whole style for the checkbox, but simply define one with the additional settings you need (the Margin in your case) and nothing more. 

OK, I pulled the new version this morning. This works now. MUCH BETTER!

<Style x:Key="ItemCheckBoxStyle" TargetType="telerikPrimitives:ItemCheckBox">
    <Setter Property="Margin" Value="0,15,0,0" />
</Style>
0
Deyan
Telerik team
answered on 13 Jun 2012, 01:30 PM
Hi Matthew,

Good to hear that everything is alright.

Do not hesitate to get back to us whenever you need.

Regards,
Deyan
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
DataBoundListBox
Asked by
Matthew
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or