background color change in stackpanel - wpf

I have stack panel in hyperlink button on button click i have to change stack panel background
<HyperlinkButton Name="WhereToStayButton" Margin="0,0,0,0" Grid.Row="5" Click="WhereToStayButton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock Text="{Binding Path=LocalizedResources.menu_where_stay, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>

Try this
use this name space using System.Windows.Media; and in button click event write this
private void WhereToStayButton_Click(object sender, RoutedEventArgs e)
{
stackpanelname.Background = new SolidColorBrush(Colors.Red);
}

You can do that by applying Storyboard on Click event trigger:
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock />
</StackPanel>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Green" Storyboard.TargetName="sp1"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
For Windows Phone 7, use Visual State:
<ControlTemplate TargetType="HyperlinkButton">
<ControlTemplate.Resources>
<SolidColorBrush x:Key="PhoneBackgrounBrush" Color="Green"/>
</ControlTemplate.Resources>
<StackPanel Orientation="Horizontal" x:Name="sp1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="sp1">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PhoneBackgrounBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock />
</StackPanel>
</ControlTemplate>

As Rohit said, Make use of Visual states to achive your requirement..,
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="sp1">
<EasingColorKeyFrame KeyTime="0" Value="#FFE91818"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock />
</StackPanel>
</ControlTemplate>

Related

Custom Tooltip in WPF Charting ScatterSeries

I'm trying to set a custom tooltip using the WPF charting toolkit. Using the demonstration code from here. The code for the custom tooltip looks like this (sorry verbose):
<Grid>
<Grid.Resources>
<Style
x:Key="MyScatterDataPointStyle"
TargetType="chartingToolkit:ScatterDataPoint">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:ScatterDataPoint">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0"
x:Name="Root">
<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>
<Grid
Background="{TemplateBinding Background}">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop
Color="#77ffffff"
Offset="0"/>
<GradientStop
Color="#00ffffff"
Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border
BorderBrush="#ccffffff"
BorderThickness="1">
<Border
BorderBrush="#77ffffff"
BorderThickness="1"/>
</Border>
<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl
Content="Custom ToolTip"
FontWeight="Bold"/>
<ContentControl
Content="{TemplateBinding FormattedDependentValue}"/>
</StackPanel>
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
The "Data" I'm binding to is a Dictionary, hence the DependentValuePath="Value.X" and IndependentValuePath="Value.Y".
My chart code looks like this:
<chartingToolkit:Chart Name="MyChart">
<chartingToolkit:Chart.Series>
<chartingToolkit:ScatterSeries
ItemsSource="{Binding Data}"
DependentValuePath="Value.X"
IndependentValuePath="Value.Y"
DataPointStyle="{StaticResource MyScatterDataPointStyle}">
<chartingToolkit:ScatterSeries.IndependentAxis>
<chartingToolkit:LinearAxis Name="XAxis" Title="Area Under ROC Curve" Orientation="X" Minimum="0" />
</chartingToolkit:ScatterSeries.IndependentAxis>
<chartingToolkit:ScatterSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis Name="YAxis" Title="Calibration Error" Orientation="Y" Minimum="0" />
</chartingToolkit:ScatterSeries.DependentRangeAxis>
</chartingToolkit:ScatterSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
I would like the tooltip to be of the form String.Format("{0}: {1}, {2}", Key, Value.X, Value.Y); (i.e the key followed the value). Any idea how to do this? Currently the tooltip just shows the dependent value.
I think this question has the answer you are looking for
WPF toolkit charting : Customize datapoint label
Basically you want to add more entries to your ToolTipService.ToolTip declaration
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl
Content="Custom ToolTip"
FontWeight="Bold"/>
<ContentControl
Content="{TemplateBinding Key}"/><!--I am not sure what the correct property will be Key is a guess-->
<ContentControl
Content="{TemplateBinding IndependentValue}"/>
<ContentControl
Content="{TemplateBinding DependentValue}"/>
</StackPanel>
</ToolTipService.ToolTip>

Silverlight custom button

I've create a style for a button:
<Style x:Key="TicketOnBizOptionsButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0" To="#FFC0C0C0" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF14548C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderThickness="1" Background="#FFF2F2F2" CornerRadius="8" BorderBrush="#FFD5D5D5">
<Border.Effect>
<DropShadowEffect Direction="285" ShadowDepth="2" Color="#FFDFDFDF" BlurRadius="2"/>
</Border.Effect>
<Button Content="" Margin="-1" Width="105" BorderBrush="{x:Null}" Foreground="White" Background="{x:Null}" Opacity="0"/>
</Border>
<TextBlock x:Name="Content" Margin="5,5,5,5" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The style works correctly and the button to.
But i've notice some erratic behavior when i click on the button.
Sometimes only works when clicking directly above the text other times only on the border...
The border that i've added has any effect on this??
Thanks in advance!
<Style x:Key="TicketOnBizOptionsButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0" To="#FFC0C0C0" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" RepeatBehavior="1x" To="#FF14548C" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"/>
<ColorAnimation Duration="0" RepeatBehavior="1x" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderThickness="1" Background="#FFF2F2F2" CornerRadius="8" BorderBrush="#FFD5D5D5">
<Border.Effect>
<DropShadowEffect Direction="285" ShadowDepth="2" Color="#FFDFDFDF" BlurRadius="2"/>
</Border.Effect>
</Border>
<TextBlock x:Name="Content" Margin="5,5,5,5" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem was that you were using a button in your template, so once you fired the pressed state it was causing some problems probably with the other button inside the template. I just removed the one inside de border and it worked well.
Hope it helps.

Reuse of the same style with changes in template in Silverlight 5

I have a lot of styles for hiperlink button that are quite the same, just a different path in the template.
Here is the XAML fragment
<Style x:Key="HeatmapLinkStyle" TargetType="HyperlinkButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid Margin="4,2" Height="40" VerticalAlignment="Top">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="element" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.2" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="element" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LinkStates">
<VisualState x:Name="ActiveLink">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ActiveLinkBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InactiveLink"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Width="32" Height="32" VerticalAlignment="Top">
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FF3FA9F5" Visibility="Visible" />
<Path x:Name="element" Data="F1M-1834.73,-354.432L-1772.06,-354.432 -1772.06,-417.099 -1834.73,-417.099 -1834.73,-354.432z M-1832.68,-385.765L-1803.39,-385.765 -1803.39,-415.052 -1774.11,-415.052 -1774.11,-385.765 -1803.39,-385.765 -1803.39,-356.484 -1832.68,-356.484 -1832.68,-385.765z" Stretch="Uniform" Fill="#FF3FA9F5" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform ScaleY="1" ScaleX="1"/>
</Path.RenderTransform>
</Path>
<Ellipse x:Name="container" Fill="Transparent" Cursor="Hand" Height="32" Width="32"/>
</Grid>
<Border x:Name="ActiveLinkBorder" Width="32" Height="4" VerticalAlignment="Bottom" Opacity="0.5" Background="#FF3FA9F5" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The only changing part is the Data of "element" Path.
Is there a way to use just one base style and change the Path in the others?
Thanks everyone!
You can create a base style an inherit it.
here is an nice example :
basedOn Style
Hope it helps

BackButtonStyle (Part of StandardStyles.xaml in metro app) causes other elements to be disabled

I have used BackButtonStyle which is created in StandardStyles.xaml (while creating new metro project).
Problem is that it disables other controls. Button, and Slider are disabled and cannot be invoked.
When i remove the BackButtonStyle, the other Button/Slider works as normal.
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Style="{StaticResource BackButtonStyle}"-->
<Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Margin="10" >Back</Button>
<TextBlock Grid.Column="1" Text="Application settings" Foreground="White" FontSize="24" HorizontalAlignment="Center" Margin="10"/>
</Grid>
<StackPanel Grid.Row="1">
<TextBlock Grid.Row="1" FontSize="14" Text="Toast Notification Interval (minutes) " Margin="10"/>
<Slider Grid.Row="2" x:Name="NotificationIntervalSlider" Minimum="1" Maximum="10"/>
<TextBlock Grid.Row="3" FontSize="14" x:Name="lblIntervalInfo" Margin="10"/>
<Button Grid.Row="4">Text</Button>
BackButtonStyle is below (it is large, provided by default)
<Style x:Key="BackButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Width" Value="48"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Margin" Value="36,0,36,36"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="56"/>
<Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
<Setter Property="AutomationProperties.Name" Value="Back"/>
<Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid">
<Grid Margin="-1,-16,0,0">
<TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{StaticResource BackButtonBackgroundBrush}"/>
<TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{StaticResource BackButtonGlyphBrush}"/>
<TextBlock x:Name="ArrowGlyph" Text="" Foreground="{StaticResource BackButtonPressedGlyphBrush}" Opacity="0"/>
</Grid>
<Rectangle
x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualWhiteStrokeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5"/>
<Rectangle
x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualBlackStrokeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonHoverBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonHoverGlyphBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonGlyphBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Storyboard.TargetName="ArrowGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="NormalGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I can see some IsHitTestVisible=false, which i have manually removed and tested, and then also same result.
You can try getting rid of the Margin and Content here:
<Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Margin="10" >Back</Button>
To make it
<Button
Click="GoBack"
Style="{StaticResource BackButtonStyle}" />

How to turn off animations in WPF Toolkit charts

Is there a way to turn off the animations in Xaml directly? The animations are really sluggish as my chart has many points.
i have downloaded the latest source code at http://wpf.codeplex.com/SourceControl/list/changesets
my idea is, to remove the animation by changing the style for the different chart series (chart points, DataPointStyle)
example for charting:PieDataPoint
try to remove the animation for the shown data and take your own style with a given key (x:key="myStyle" -> DataPointStyle="{StaticResource myStyle}")
and remove Opacity="0" at <Grid x:Name="Root" Opacity="0">
remove this visual state group from your style
<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>
EDIT
This is the changed style.
<!-- charting:PieDataPoint -->
<Style TargetType="charting:PieDataPoint">
<Setter Property="Background" Value="Orange" />
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="RatioStringFormat" Value="{}{0:p2}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting: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>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Slice" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeMiterLimit="1">
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
<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>
After my first attempt to remove the animation, I wanted to give up, because it has not worked.
But then I looked upon me with the reflector to the source code and have found a way that it still works.
Setting the DataPointStyle unfortunately is not enough, I think it's a bug.
<chartingToolkit:Chart Margin="8">
<chartingToolkit:Chart.Series>
<chartingToolkit:BarSeries x:Name="barSeries"
Title="Experience"
DataPointStyle="{StaticResource myBarStyle}">
</chartingToolkit:BarSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
In the constructor of the control where the chart is included simply execute the following.
this.barSeries.RefreshStyles();
hope this helps

Resources