Animation for the FeaturedMeasure

3 posts, 0 answers
  1. mitica
    mitica avatar
    7 posts
    Member since:
    May 2011

    Posted 25 Jun 2011 Link to this post


    is there any way to add animation for the FeaturedMeasure property when the graph is first displayed.
    I have a list with few HorizontalBulletGraphs and I would like to have FeaturedMeasure growing slowly from 0 to the actual value when the graphs are displayed.

    Do you have any sample project with this feature?

    Thank you very much.
  2. Yavor
    Yavor avatar
    401 posts

    Posted 29 Jun 2011 Link to this post

    Hi mitica,

    Currently RadBulletGraph doesn't support animations out of the box. You can add custom animations in Expression Blend easily by retemplating the control and animating the element responsible for drawing the bar (featured measure). Your code can look like this (notice the highlighted areas):

    <ControlTemplate TargetType="telerik:RadHorizontalBulletGraph">
        <Grid x:Name="plotArea">
                <Storyboard x:Name="AppearAnimination">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="barContainer">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="0">
                    <telerik:QualitativeRangeContainer ChildrenSource="{TemplateBinding QualitativeRanges}"/>
                    <telerik:PositioningIndicatorPanel x:Name="PART_AxisPanel"/>
                    <telerik:BarContainer x:Name="barContainer" ChildrenSource="{TemplateBinding MergedFeaturedMeasures}" >
                    <telerik:EllipseContainer ChildrenSource="{TemplateBinding MergedFeaturedMeasures}"/>
                    <telerik:ComparativeMeasuresContainer ChildrenSource="{TemplateBinding MergedComparativeMeasures}"/>
            <telerik:QuantitativeScaleContainer Grid.Row="1" telerik:StyleManager.Theme="{StaticResource Theme}" TextFormatString="{TemplateBinding TextFormatString}" Visibility="{TemplateBinding QuantitativeScaleVisibility}"/>

    When you retepmate the bullet graph (in this case a horizontal one) all you have to do is name the containers and add animation (actually Expression Blend does most of the work for you). Next you have to trigger the animation. Since it is contained within the bullet graph you have to find it like this:
    public MainPage()
        // Required to initialize variables
        this.bulletGraph.SizeChanged += bulletGraph_Loaded;
    void bulletGraph_Loaded(object sender, RoutedEventArgs e)
        Panel plotArea = this.bulletGraph.ChildrenOfType<Panel>().Single(c => c.Name == "plotArea");
        Storyboard AppearAnimination = plotArea.Resources["AppearAnimination"] as Storyboard;

    I have attached a sample project that demonstrates the approach described above.

    Hope this helps!

    Kind regards,
    Yavor Ivanov
    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
  3. mitica
    mitica avatar
    7 posts
    Member since:
    May 2011

    Posted 04 Jul 2011 Link to this post

    Dear Mr. Ivanov,

    Thank you very much for the information provided.
    It is exactly what I was looking for.
    Amazing support.

    Best regards,
Back to Top