[Solved] Bubble Series ItemStyle

[Dr.YSG]

I am attempting to convert from the SilverLight Toolkit to Telerik. I have a custom bubble chart marker in Silverlight that with the help of examples in this forum I attempted to convert. However, it is not working. Basically, what I changed was the Bindings to use DataItem and wrapped it in a Canvas.(before I wrapped it it a canvas it was partially working. I got a lot of small 3 pixel lines (not boxes) that were fully interactive.

Now that I wrapped it in a Canvas and use template binding for the size and width, SL4 blows up and the entire screen goes white when the data is loaded. I confirmed that the data is correct, by removing the custom ItemStyle. so the binding is working fine:

Original Silverlight Toolkit:

    <Style x:Key="EventBubble"
           TargetType="ct:BubbleDataPoint">
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ct:BubbleDataPoint">
                    <Border Width="10"
                            Height="10"
                            Tag="{Binding ID}"
                            ToolTipService.ToolTip="{Binding Name}"
                            Opacity="1"
                            UseLayoutRounding="false"
                            CornerRadius="5"
                            BorderBrush="Black"
                            BorderThickness="1"
                            Background="{Binding Selected, Converter={StaticResource Bool2EventBrush}, Mode=OneWay}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <gala:EventToCommand Command="{Binding Source={StaticResource Locator}, Path=ToolPanel.SelectMarker}"
                                                     CommandParameter="{Binding ID}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Modified to work with Telerik:

    <Style x:Key="RadEventBubble"
           TargetType="radChart:Bubble">
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="IsTabStop"
                Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="radChart:Bubble">
                    <Canvas>
                        <Border x:Name="PART_BubbleElement"
                                Canvas.Left="{TemplateBinding Left}"
                                Canvas.Top="{TemplateBinding Top}"
                                Width="{TemplateBinding Diameter}"
                                Height="{TemplateBinding Diameter}"
                                Tag="{Binding DataItem.ID}"
                                ToolTipService.ToolTip="{Binding DataItem.Name}"
                                Opacity="1"
                                UseLayoutRounding="false"
                                CornerRadius="5"
                                BorderBrush="Black"
                                BorderThickness="1"
                                Background="{Binding DataItem.Selected, Converter={StaticResource Bool2EventBrush}, Mode=OneWay}">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonDown">
                                    <gala:EventToCommand Command="{Binding Source={StaticResource Locator}, Path=ToolPanel.SelectMarker}"
                                                         CommandParameter="{Binding DataItem.ID}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Border>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I just tried fixing the width and height to "10" instead of using the template value and now it no longer explodes and works fine. So I am just submitting this as a FYI to you, in case you are looking for bugs...

[Dr.YSG]

I solved the problem, I needed to understand templating a bit better. Thank you.