BubbleSeriestDefinition Bubble Template

[Xoma]

Hi I am trying to apply custom Bubble Series Style through BubbleSeriesDefinition, using ItemStyle property. However, when I apply default (Blend generated) bubble template, bubble data points are not visible at all. The visual tree contains the series and the Bubble with my custom style however the bubble points are not visible on the chart area. I tried to apply the template declarative (XAML) as well as in code behind - no success.
My team and I are using WPF Telerik Controls Versioin 2011.1.419.35

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" >
   <UserControl.Resources>
     <Style x:Key="CustomBubbleStyle" TargetType="{x:Type telerik:Bubble}">
          <Setter Property="Diameter" Value="80"/>
          <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type telerik:Bubble}">
            <Canvas x:Name="PART_MainContainer" RenderTransformOrigin="{TemplateBinding RelativeCenterPoint}">
                              <Canvas.RenderTransform>
                   <ScaleTransform ScaleY="0" ScaleX="0"/>
                </Canvas.RenderTransform>
                <Path x:Name="PART_BubbleElement" Fill="Green" Data="{TemplateBinding ItemGeometry}" />

                                <Path Data="M108.5,54.25C108.5,84.211448 84.211448,108.5 54.25,108.5 24.288552,108.5 0,84.211448 0,54.25 0,24.288552 24.288552,0 54.25,0 84.211448,0 108.5,24.288552 108.5,54.25z" Height="{TemplateBinding Diameter}" Canvas.Left="{TemplateBinding Left}" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Transparent" StrokeThickness="0" Canvas.Top="{TemplateBinding Top}" Width="{TemplateBinding Diameter}">
                                             <Path.Fill>
                                                   <RadialGradientBrush GradientOrigin="0.5,0.5">
                                                         <GradientStop Color="#66FFFFFF" Offset="0.86"/>
                             <GradientStop Color="Transparent" Offset="0.85"/>
                             <GradientStop Color="#26FFFFFF"/>
                            </RadialGradientBrush>
                                </Path.Fill>
                 </Path>
            </Canvas>
        </ControlTemplate>
    </Setter.Value>
    </Setter>
</Style>
</UserControl.Resources>

<telerik:RadChart SnapsToDevicePixels="True" FontSize="9" Height="200" Width="400"
     ItemsSource="{Binding Source={StaticResource SampleDataSource}, Path=Collection}">
<telerik:RadChart.DefaultView>
       <telerik:ChartDefaultView>
           <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea NoDataString="Isufficient Information" Style="{StaticResource ChartAreaStyle}">
                   <telerik:ChartArea.AxisY>
                       <telerik:AxisY TextBlock.Foreground="LightGray"  MinorTickPointMultiplier="5" ExtendDirection="Up" MajorGridLinesVisibility="Visible"
                           MinorTicksVisibility="Hidden" DefaultLabelFormat="0">
                       </telerik:AxisY>
                   </telerik:ChartArea.AxisY>
                       <telerik:ChartArea.AxisX>
                                <telerik:AxisX MinValue="0" TextBlock.Foreground="LightGray" IsZeroBased="True" LayoutMode="Auto" TextBlock.FontSize="5" MajorGridLinesVisibility="Visible"
                           MinorTicksVisibility="Hidden">
                       </telerik:AxisX>
                   </telerik:ChartArea.AxisX>
               </telerik:ChartArea>
           </telerik:ChartDefaultView.ChartArea>
       </telerik:ChartDefaultView>
   </telerik:RadChart.DefaultView>
             <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping>
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:BubbleSeriesDefinition BubbleSizeRelative="False" ItemStyle="{StaticResource CustomBubbleStyle}"/>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping DataPointMember="XValue" FieldName="XValue"/>
                        <telerik:ItemMapping DataPointMember="YValue" FieldName="YValue"/>
                        <telerik:ItemMapping DataPointMember="Label" FieldName="ID"/>
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>

                <!-- Regression Line -->
                <telerik:SeriesMapping ItemsSource="{Binding Source={StaticResource RegressionLine}, Path=Collection}">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping DataPointMember="XValue" FieldName="Property1"/>
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Property2"/>
                </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
                </telerik:RadChart>

</UserControl>

[Evgenia]

Hi Andrey,

Could you please send us a runnable version of your project so that we can debug it locally and get back to you with our findings?

Greetings,
Evgenia
the Telerik team

[Xoma]

Sorry for the late response, but I figured out why I did not see the points, the default bubble template generated through Blend 4 contains PART_MainContainer (the root of the template) where the ScaleTransform contains ScaleX & ScaleY  properties which are set to zero, therefore essentially setting the height/width of the element to zero, as ScaleX & ScaleY are multipliers to width/height respectively.

Removing the ScaleTransform on PART_MainContainer fixes the issue (I have no need to scale the bubble points -> I am using it like scatter series with most num of points being equal to 6). No need to zoom either. 

Guys, every single Telerik WPF control I worked with plays very nicely with Blend. Blend is the first tool I use to see the structure of any new WPF control. However, for some reason the RadChart does not nicely play with Blend. It feels like you had some WinForms developers design this control and WPF "support" was added later in dev. cycle. Even your docs describe some UI customization that could ONLY be set in code --> WPF is all about creating lookless controls through declarative programming, not code behind settings that will modify the "look" of the control. Other than that I am extremely happy with WPF control suite. We are using and have used a bunch of them in a dozen of our projects.

<Style x:Key="CustomBubbleStyle" TargetType="{x:Type telerik:Bubble}">

            <Setter Property="Diameter" Value="80"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type telerik:Bubble}">

                        <Canvas x:Name="PART_MainContainer" RenderTransformOrigin="{TemplateBinding RelativeCenterPoint}">

                            <Canvas.RenderTransform>

                                <ScaleTransform ScaleY="0" ScaleX="0"/>

                            </Canvas.RenderTransform>

 

                                .........

 

                          </Canvas>

                      </ControlTemplate>

                  </Setter.Value>

               </Setter>

</Style>


[Evgenia]

Hi Xoma,

We tried to reproduce your problem but to no avail - everything works as expected on our side. If you want we can send you a video demonstrating what we see on our side. 
However it seems that  there is a problem in Blend - it ommits an important part name:

<Style x:Key="BubbleStyle1" TargetType="telerikCharting:Bubble">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="telerikCharting:Bubble">
                       <Canvas x:Name="PART_MainContainer" RenderTransformOrigin="{TemplateBinding RelativeCenterPoint}">
                           <Canvas.RenderTransform>
                               <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" ScaleX="0"/>
                           </Canvas.RenderTransform>
                           <Path x:Name="PART_BubbleElement" Data="{TemplateBinding ItemGeometry}" Style="{TemplateBinding ItemStyle}"/>
                           <Path Data="M108.5,54.25 C108.5,84.211448 84.211448,108.5 54.25,108.5 C24.288552,108.5 0,84.211448 0,54.25 C0,24.288552 24.288552,0 54.25,0 C84.211448,0 108.5,24.288552 108.5,54.25 z" Fill="{StaticResource BubbleMaskBrush}" Height="{TemplateBinding Diameter}" Canvas.Left="{TemplateBinding Left}" Stretch="Fill" Canvas.Top="{TemplateBinding Top}" Width="{TemplateBinding Diameter}"/>
                       </Canvas>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

That could cause your issue.

Kind regards,
Evgenia
the Telerik team