Removing 3D plastic effect from doughnut chart.

5 posts, 1 answers
  1. Martin
    Martin avatar
    7 posts
    Member since:
    Apr 2011

    Posted 02 May 2011 Link to this post

    Hello,

    I apologize for this question up front, but I can't find any solution.

    I'm building doughnut chart and the last issue I still have with appearance is that I can't get rid of that plastic, pseudo-3D effect over the chart as shown on the screenshot. I don't even know how is it called (for searching).

    Thank you for any advise.
    ~Martin
  2. Answer
    Sia
    Admin
    Sia avatar
    765 posts

    Posted 05 May 2011 Link to this post

    Hello Martin,

    You need to set custom style to your doughnut as the one below:
    <Style  x:Key="CustomDoughnut" TargetType="telerik:Doughnut">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:Doughnut">
                    <Canvas x:Name="PART_MainContainer" >
                        <Ellipse Clip="{TemplateBinding FigurePath}"
                                Width="{TemplateBinding ItemActualWidth}"
                                Height="{TemplateBinding ItemActualHeight}"
                                StrokeThickness="0"
                                Style="{TemplateBinding ItemStyle}"/>
                        <Path x:Name="PART_DefiningGeometry"
                            Data="{TemplateBinding FigurePath2}"
                            Fill="Transparent"
                            Style="{TemplateBinding ItemStyle}" />
                        <Canvas.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                                <TranslateTransform x:Name="PART_ExplodeTransform" />
                            </TransformGroup>
                        </Canvas.RenderTransform>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="HoverStates">
                                <vsm:VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Hovered">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation To="0.6" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="SelectionStates">
                                <vsm:VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="X" To="0" />
                                        <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="Y" To="0" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="X" />
                                        <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="Y" />
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Regards,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Martin
    Martin avatar
    7 posts
    Member since:
    Apr 2011

    Posted 05 May 2011 Link to this post

    Hi Sia,

    thank you, this solution achieved the desired effect.

    So this is the default template, just with that one bit removed? Is there somewhere a list of all default templates, in case I will need to do this with a different type of chart?

    Regards,
    ~Martin
  4. Sia
    Admin
    Sia avatar
    765 posts

    Posted 05 May 2011 Link to this post

    Hi Martin,

    Yes, this is the default template of the Doughnut series having one rectangle removed (which represents the mask overlay). You can extract the latest templates through Blend.

    Best wishes,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Martin
    Martin avatar
    7 posts
    Member since:
    Apr 2011

    Posted 05 May 2011 Link to this post

    Thank you, Sia.
    ~Martin
Back to Top