Problem modifying Chart ControlTemplate on style

Aug 27, 2010 at 5:02 PM
This is a post from Nande on Unity forum, I have move it to here since I´m having a similar problem with Stack bar charts and styling BarDataPoint to have animation and my custom tooltips. 

Hi below is the code I used to custom ToolTip for pie chart...ToolTip comes but piechart won't display .... If i remove opacity for Grid it will display Pie chart but doesn't show any effect for mouseover and selected effect..... <!--Blue-->
  <chartToolKit:PieSeries.Palette>
<visual:ResourceDictionaryCollection>
<ResourceDictionary>
<!--Blue-->
<Style x:Key="DataPointStyle" TargetType ="chartToolKit:PieDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819" />
<TranslateTransform X="-0.425" Y="-0.486" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFB9D6F7" />
<GradientStop Color="#FF284B70" Offset="1" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartToolKit:PieDataPoint">
<Grid x:Name="Root" Opacity="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Slice" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeMiterLimit="1">
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content="{TemplateBinding IndependentValue}" />
<ContentControl Content="{TemplateBinding FormattedDependentValue}"
ContentStringFormat="Counts {0:###,###,###}"/>
<ContentControl Content="{TemplateBinding FormattedRatio}" />
</StackPanel>
</ToolTipService.ToolTip>
</Path>
<Path x:Name="SelectionHighlight" Data="{TemplateBinding GeometrySelection}" Fill="Red" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" />
<Path x:Name="MouseOverHighlight" Data="{TemplateBinding GeometryHighlight}" Fill="White" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>

<!-- <Setter Property="Background"> <Setter.Value> <RadialGradientBrush> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819" /> <TranslateTransform X="-0.425" Y="-0.486" /> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#FFB9D6F7" /> <GradientStop Color="#FF284B70" Offset="1" /> </RadialGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="chartToolKit:PieDataPoint"> <Grid x:Name="Root" Opacity="0"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.1" /> </VisualStateGroup.Transitions> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.1" /> </VisualStateGroup.Transitions> <VisualState x:Name="Unselected" /> <VisualState x:Name="Selected"> <Storyboard> <DoubleAnimation Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="RevealStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.5" /> </VisualStateGroup.Transitions> <VisualState x:Name="Shown"> <Storyboard> <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> </Storyboard> </VisualState> <VisualState x:Name="Hidden"> <Storyboard> <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Path x:Name="Slice" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeMiterLimit="1"> <ToolTipService.ToolTip> <StackPanel> <ContentControl Content="{TemplateBinding IndependentValue}" /> <ContentControl Content="{TemplateBinding FormattedDependentValue}" ContentStringFormat="Counts {0:###,###,###}" /> <ContentControl Content="{TemplateBinding FormattedRatio}" /> </StackPanel> </ToolTipService.ToolTip> </Path> <Path x:Name="SelectionHighlight" Data="{TemplateBinding GeometrySelection}" Fill="Red" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" /> <Path x:Name="MouseOverHighlight" Data="{TemplateBinding GeometryHighlight}" Fill="White" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> -->


Sep 3, 2010 at 9:15 PM

Hi I found Solution  add below

xmlns

:visual="clr-namespace:System.Windows;assembly=WPFToolkit"   

 

 

 

 

while using any Visual~ tag use visual:Visual~ then it will work... Example is below

		<visual:VisualStateManager.VisualStateGroups>
                                                <visual:VisualStateGroup x:Name="CommonStates">
                                                    <visual:VisualStateGroup.Transitions>
                                                        <visual:VisualTransition GeneratedDuration="0:0:0.2" />
                                                    </visual:VisualStateGroup.Transitions>
                                                    <visual:VisualState x:Name="Normal" />
                                                    <visual:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFDF00" />
                                                            </ColorAnimationUsingKeyFrames>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.24" />
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </visual:VisualState>
                                                </visual:VisualStateGroup>
                                                <visual:VisualStateGroup x:Name="SelectionStates">
                                                    <visual:VisualStateGroup.Transitions>
                                                        <visual:VisualTransition GeneratedDuration="0:0:0.2" />
                                                    </visual:VisualStateGroup.Transitions>
                                                    <visual:VisualState x:Name="Unselected" />
                                                    <visual:VisualState x:Name="Selected">
                                                        <Storyboard>
                                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.18" />
                                                            </DoubleAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </visual:VisualState>
                                                </visual:VisualStateGroup>
                                                <visual:VisualStateGroup x:Name="RevealStates">
                                                    <visual:VisualStateGroup.Transitions>
                                                        <visual:VisualTransition GeneratedDuration="0:0:0.5" />
                                                    </visual:VisualStateGroup.Transitions>
                                                    <visual:VisualState x:Name="Shown">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" />
                                                        </Storyboard>
                                                    </visual:VisualState>
                                                    <visual:VisualState x:Name="Hidden">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" />
                                                        </Storyboard>
                                                    </visual:VisualState>
                                                </visual:VisualStateGroup>
                                            </visual:VisualStateManager.VisualStateGroups>

Sep 14, 2010 at 8:48 PM

I tried this aprroach but didn´t help, still having the same problem. Any idea?

Oct 24, 2010 at 4:48 PM

@Nande, Thanks!

It would have taken me ages to figure this one out... I had it working and then I moved the files into different projects and the pie chart wouldn't show up..

No compile errors or runtime exceptions, they've broken or muddied the guideline of not having types with the same names and namespaces in different assemblies. Adding a visual xmlns namespace pointing to the right types in WPFToolkit did the trick.

 

Nov 1, 2010 at 4:14 PM

Hi I pie chart which itemsource is updated dynamically based on database value...

piechart Palette ResourceDictionary is changed when Chart is loaded.... for every record it will have different ResourceDictionary based on binded itemsource.... when record selected from list it suppose to display piechart with particular selected record set and with respective Palette Resourcedictionary...

Problem I am facing is refresh issue of Pie chart.... previous pie chart displayed for record is displaying along with new pie chart for current records..... everytime piechart is loaded it is displaying new one with previous all piechart....it doesn't clear previously painted pie chart, it repaint new Piechart onthe top of previous pie chart.....

it is like random...it doesn't does it evrytime, it happens randomly but very frequently....Thanks