CheckBoxes What Changed?!?

6 posts, 0 answers
  1. Matthew
    Matthew avatar
    32 posts
    Member since:
    Oct 2011

    Posted 06 Jun 2012 Link to this post

    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.
  2. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 06 Jun 2012 Link to this post

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

  3. DevCraft banner
  4. Matthew
    Matthew avatar
    32 posts
    Member since:
    Oct 2011

    Posted 06 Jun 2012 Link to this post

    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!
  5. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 07 Jun 2012 Link to this post

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

  6. Matthew
    Matthew avatar
    32 posts
    Member since:
    Oct 2011

    Posted 13 Jun 2012 Link to this post

    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>
  7. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 13 Jun 2012 Link to this post

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

Back to Top
DevCraft banner