Home / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Custom Bubble style

• Chris

  Posted on Jun 24, 2009 (permalink)

  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

  Reply

• Vladimir Milev Vladimir Milev

  Posted on Jun 26, 2009 (permalink)

  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.

  Reply


• Kumar

  Posted on Mar 10, 2011 (permalink)

  Hello Vlad,
  
  I have a similar issue and after searching around for a long time in the documentation or the forums I could not get an answer.
  
  I tried the following code but the XAML is not well formed and I am not able to figure out the Negative template as this sample just talks about the positive template for the bubble.
  
  What I am trying to do is show negative bubbles in red and positive in green and I think I need your help in templating the  bubble based on the Binding value.
  
  Can you please provide me with a sample of the template with the positive and negative bubble colors please?
  
  I am using the latest WPF controls (RadControls for WPF Q3 2010 SP1)
  
  Regards,
  Kumar Ramdurgkar

  Reply

• Vladimir Milev Vladimir Milev

  Posted on Mar 15, 2011 (permalink)

  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

  Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Custom Bubble style