Custom selection marker

[dpl]

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

[Evgenia]

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

[dpl]

Hello Evgenia,

many thanks, I solved the problem with this way.

Regards,
dpl