Custom selection marker

3 posts, 0 answers
  1. dpl
    dpl avatar
    6 posts
    Member since:
    Feb 2012

    Posted 16 Aug 2013 Link to this post

    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. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 21 Aug 2013 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. dpl
    dpl avatar
    6 posts
    Member since:
    Feb 2012

    Posted 21 Aug 2013 Link to this post

    Hello Evgenia,

    many thanks, I solved the problem with this way.

    Regards,
    dpl
Back to Top