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

Animation for the FeaturedMeasure

2 Answers 42 Views
BulletGraph
This is a migrated thread and some comments may be shown as answers.
mitica
Top achievements
Rank 1
mitica asked on 25 Jun 2011, 10:15 AM
Hello,

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 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 29 Jun 2011, 10:39 AM
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">
        <Grid.Resources>
            <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"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="0">
            <Grid>
                <telerik:QualitativeRangeContainer ChildrenSource="{TemplateBinding QualitativeRanges}"/>
                <telerik:PositioningIndicatorPanel x:Name="PART_AxisPanel"/>
                <telerik:BarContainer x:Name="barContainer" ChildrenSource="{TemplateBinding MergedFeaturedMeasures}" >
                    <telerik:BarContainer.RenderTransform>
                        <CompositeTransform/>
                    </telerik:BarContainer.RenderTransform>
                </telerik:BarContainer>
                <telerik:EllipseContainer ChildrenSource="{TemplateBinding MergedFeaturedMeasures}"/>
                <telerik:ComparativeMeasuresContainer ChildrenSource="{TemplateBinding MergedComparativeMeasures}"/>
            </Grid>
        </Border>
        <telerik:QuantitativeScaleContainer Grid.Row="1" telerik:StyleManager.Theme="{StaticResource Theme}" TextFormatString="{TemplateBinding TextFormatString}" Visibility="{TemplateBinding QuantitativeScaleVisibility}"/>
    </Grid>
</ControlTemplate>

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
    InitializeComponent();
    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;
    AppearAnimination.Begin();
}

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
0
mitica
Top achievements
Rank 1
answered on 04 Jul 2011, 12:54 PM
Dear Mr. Ivanov,

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

Best regards,
Mitica
Tags
BulletGraph
Asked by
mitica
Top achievements
Rank 1
Answers by
Yavor
Telerik team
mitica
Top achievements
Rank 1
Share this question
or