Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Windows Phone 7 > DataBoundListBox > CheckBoxes What Changed?!?

Not answered CheckBoxes What Changed?!?

Feed from this thread
  • Posted on Jun 6, 2012 (permalink)

    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.

    Reply

  • Deyan Deyan admin's avatar

    Posted on Jun 6, 2012 (permalink)

    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 >>

    Reply

  • Posted on Jun 6, 2012 (permalink)

    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!

    Reply

  • Deyan Deyan admin's avatar

    Posted on Jun 7, 2012 (permalink)

    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 >>

    Reply

  • Posted on Jun 13, 2012 (permalink)

    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>

    Reply

  • Deyan Deyan admin's avatar

    Posted on Jun 13, 2012 (permalink)

    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 >>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Windows Phone 7 > DataBoundListBox > CheckBoxes What Changed?!?