Bubble Series ItemStyle

2 posts, 0 answers
  1. Dr.YSG
    Dr.YSG avatar
    213 posts
    Member since:
    Dec 2009

    Posted 20 Jan 2010 Link to this post

    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...
  2.
  3. Dr.YSG
    Dr.YSG avatar
    213 posts
    Member since:
    Dec 2009

    Posted 21 Jan 2010 Link to this post

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


Back to Top