This is a migrated thread and some comments may be shown as answers.

Custom selection marker

2 Answers 141 Views

Chart

This is a migrated thread and some comments may be shown as answers.

dpl asked on 16 Aug 2013, 10:59 AM

Hi all,

I have successful customized my bar chart items, but now there is no selection marker visible. Here some code:

<Style x:Key="CustomBarStyle" TargetType="telerikCharting:Bar">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikCharting:Bar">

<Canvas>

<Rectangle

x:Name="PART_DefiningGeometry"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

Fill="Blue" />

<Canvas.RenderTransform>

<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />

</Canvas.RenderTransform>

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

This is the style for my items. Fill is normaly a property of my item class.

<telerik:RadChart

x:Name="Chart" Grid.ColumnSpan="2" ItemsSource="{Binding BarChartList}">

<telerik:RadChart.DefaultView>

<telerikCharting:ChartDefaultView ChartLegendPosition="Bottom">

<telerikCharting:ChartDefaultView.ChartLegend>

<telerikCharting:ChartLegend Header="Legend" UseAutoGeneratedItems="false" ItemsPanelOrientation="Horizontal" >

<telerikCharting:ChartLegend.Items>

<telerikCharting:ChartLegendItem Label="label1" MarkerFill="Green" />

<telerikCharting:ChartLegendItem Label="label2" MarkerFill="Red" />

<telerikCharting:ChartLegendItem Label="label3" MarkerFill="Blue" />

<telerikCharting:ChartLegendItem Label="label4" MarkerFill="Orange" />

</telerikCharting:ChartLegend.Items>

</telerikCharting:ChartLegend>

</telerikCharting:ChartDefaultView.ChartLegend>

<telerikCharting:ChartDefaultView.ChartArea>

<telerikCharting:ChartArea ItemClick="ChartAreaItemClick" Annotations="{Binding BarChartAnnotations}">

<telerikCharting:ChartArea.AxisY>

<telerikCharting:AxisY AutoRange="False" MinValue="0" MaxValue="{Binding BarChartMax}" Step="10" />

</telerikCharting:ChartArea.AxisY>

<telerikCharting:ChartArea.AxisX>

<telerikCharting:AxisX AutoRange="False" MinValue="1" MaxValue="{Binding BarChartList.Count}" Step="1" />

</telerikCharting:ChartArea.AxisX>

</telerikCharting:ChartArea>

</telerikCharting:ChartDefaultView.ChartArea>

</telerikCharting:ChartDefaultView>

</telerik:RadChart.DefaultView>

<telerik:RadChart.AnimationSettings>

<telerikCharting:AnimationSettings ItemDelay="0:0:0" ItemAnimationDuration="0:0:0.2" />

</telerik:RadChart.AnimationSettings>

<telerik:RadChart.DefaultSeriesDefinition>

<telerikCharting:BarSeriesDefinition x:Name="BarSeries" ItemStyle="{StaticResource CustomBarStyle}">

<telerikCharting:BarSeriesDefinition.InteractivitySettings>

<telerikCharting:InteractivitySettings SelectionMode="Single" SelectionScope="Item" />

</telerikCharting:BarSeriesDefinition.InteractivitySettings>

</telerikCharting:BarSeriesDefinition>

</telerik:RadChart.DefaultSeriesDefinition>

<telerik:RadChart.SeriesMappings>

<telerikCharting:SeriesMapping SeriesDefinition="{Binding ElementName=BarSeries}">

<telerikCharting:SeriesMapping.ItemMappings>

<telerikCharting:ItemMapping FieldName="Value" DataPointMember="YValue" />

</telerikCharting:SeriesMapping.ItemMappings>

</telerikCharting:SeriesMapping>

</telerik:RadChart.SeriesMappings>

</telerik:RadChart>

And this is the chart control. I can select each item, ChartAreaItemClicked is fired, but there is noch border around the items. How can I place a csutom style for that?

Kind regards,
dpl

2 Answers, 1 is accepted

answered on 21 Aug 2013, 07:29 AM

Hello Dietmar,

For the Selection/ Hover visual effects to get applied to your bars, you need to copy/paste not only the control template but the visual states for the series as well. Here is the default Bar Series visual states. Feel free to modify them per your scenario needs:

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="HoverStates">

<VisualState x:Name="Normal">

<Storyboard>

<DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Hovered">

<Storyboard>

<DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Hidden">

<Storyboard>

<DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected"/>

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PART_SelectedState">

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#B2000000"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="PART_SelectedState">

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">

<DiscreteObjectKeyFrame.Value>

<System:Double>2</System:Double>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

Regards,
Evgenia
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>