Add Checkable items to custom example

3 posts, 0 answers
  1. weisenbr00
    weisenbr00 avatar
    8 posts
    Member since:
    Jul 2010

    Posted 28 Oct 2010 Link to this post

    I have been tasked with creating a menu that looks exactly like the one that is used on the top of the Telerik silverlight page.  I am using the custum example provided by Telerik.  I need to make one of my menu items checkable Is there an example of how to do this? 
  2. weisenbr00
    weisenbr00 avatar
    8 posts
    Member since:
    Jul 2010

    Posted 29 Oct 2010 Link to this post

    I figured out how to make the items checkable but how do I add the check that displays to the left of the menu item?
  3. DevCraft banner
  4. Pana
    Admin
    Pana avatar
    748 posts

    Posted 04 Nov 2010 Link to this post

    Hello,

    I am sorry for the late reply.
    In the default theme there is a 'tick' visual defined like that:

    <Path x:Name="Tick" Margin="0 0 4 0" Grid.Column="0" Visibility="Collapsed"
        VerticalAlignment="Center" Fill="{TemplateBinding Foreground}"
        Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" />

    And its visibility is animated in the VisualStateManager like that:

    <vsm:VisualStateGroup x:Name="CheckStates">
        <vsm:VisualState x:Name="Checked">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Tick"
                        Storyboard.TargetProperty="Visibility" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                        Storyboard.TargetProperty="Visibility" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </vsm:VisualState>
        <vsm:VisualState x:Name="Unchecked" />
        <vsm:VisualState x:Name="HideIcon">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                        Storyboard.TargetProperty="Visibility" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </vsm:VisualState>
    </vsm:VisualStateGroup>

    You can move these 2 code snippets in your custom styles and modify the Path's Data to suite your design.

    Sincerely yours,
    Panayot
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top