Custom Bubble style

[Chris]

Hi,

I'm trying to make a simple demo application that includes a 2D bubble chart which needs to have the bubbles coloured differently if the YValue is greater than a certain value. It is basically the bubble equivalent of the MVVM example, but I am having trouble creating the style for the bubble.

Could you please provide an example style for this.

Thanks

[Vladimir Milev]

Hello Chris,

I am guessing you need the template for the bubble. The important thing here is that the bubble has two templates - for a positive value and for a negative value (this has changed however in the branch for the Q2 release). Here is the positive template (which is most probably the one you need)

<Setter Property="PositiveTemplate" >
    <Setter.Value>
        <ControlTemplate TargetType="telerikCharting:Bubble">
            <Canvas RenderTransformOrigin="{TemplateBinding RelativeCenterPoint}">
                <Path x:Name="PART_BubbleElement"
          Data="{TemplateBinding ItemGeometry}"
          Style="{TemplateBinding ItemStyle}"
                    SnapsToDevicePixels="True"
                    <Path Data="{TemplateBinding ItemGeometry2}"
          Fill="{StaticResource BubbleMaskBrush}"
                        SnapsToDevicePixels="True" />
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                        </Canvas.RenderTransform>
                        <Canvas.Triggers>
                            <EventTrigger RoutedEvent="Canvas.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard
                        x:Name="PART_Storyboard"
                        BeginTime="00:00:00.5">
                                            <DoubleAnimation
                            To="1"
                            Storyboard.TargetName="PART_AnimationTransform"
                            Storyboard.TargetProperty="ScaleX"
                            Duration="00:00:00.25"
                            BeginTime="00:00:00.2"/>
                                            <DoubleAnimation
                            To="1"
                            Storyboard.TargetName="PART_AnimationTransform"
                            Storyboard.TargetProperty="ScaleY"
                            Duration="00:00:00.25"
                            BeginTime="00:00:00.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Canvas.Triggers>
            </Canvas>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Let us know if that helps.

Greetings,
Vladimir Milev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Vladimir Milev]

Hi Chris,

The best way to handle these scenarios is to use MVVM pattern and a good view model which will provide coloring according to your specific business logic. Here is a good example demonstrating just that: http://demos.telerik.com/silverlight/#Chart/MVVM

All the best,
Vladimir Milev
the Telerik team