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

Add Checkable items to custom example

2 Answers 47 Views
Menu
This is a migrated thread and some comments may be shown as answers.
weisenbr00
Top achievements
Rank 1
weisenbr00 asked on 28 Oct 2010, 10:41 PM
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 Answers, 1 is accepted

Sort by
0
weisenbr00
Top achievements
Rank 1
answered on 29 Oct 2010, 07:18 PM
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?
0
Pana
Telerik team
answered on 04 Nov 2010, 07:31 AM
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
Tags
Menu
Asked by
weisenbr00
Top achievements
Rank 1
Answers by
weisenbr00
Top achievements
Rank 1
Pana
Telerik team
Share this question
or