Selection in RangeBarSeries

[Alex]

My objective is to achieve the same selection behavior for RangeBarSeris as documented in here http://www.telerik.com/help/windows-phone/radchart-features-selection.html for BarSeries. In other words, when users tap on a DataPoint I would like them to see a visual indication of the selection action in the form of a change in color for the selected DataPoint.
Unfortunately, I can't seem to reproduce the same behavior for RangeBarSeris using the approach suggested in the documentation (see link above).

Below is the relevant XAML, also attaching my project that illustrates my issue (zip file with jpeg extension).
Just to restate, when users tap on a DataPoint there is no change in the appearance of the selected DataPoint.
Thanks in advance.
Alex.

<telerikChart:RadCartesianChart x:Name="HeartRateZoneChart"
                                        Palette="Warm"
                                        SelectionPalette="WarmSelected"
                                        Margin="0, 30, 15, 50">

                <telerikChart:RadCartesianChart.Behaviors>
                    <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single"/>
                </telerikChart:RadCartesianChart.Behaviors>

                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis 
                        TickThickness="0"
                        LineStroke="#808080"
                        x:Name="HorizontalAxis">
                        <telerikChart:CategoricalAxis.LabelTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" TextWrapping="Wrap" Width="120" />
                            </DataTemplate>
                        </telerikChart:CategoricalAxis.LabelTemplate>
                    </telerikChart:CategoricalAxis>
                </telerikChart:RadCartesianChart.HorizontalAxis>

                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:LinearAxis Maximum="220"
                                         LineThickness="0"
                                         TickThickness="0"
                                         Minimum="90"
                                         MajorStep="20"
                                         x:Name="VerticalAxis"/>
                </telerikChart:RadCartesianChart.VerticalAxis>

                <telerikChart:RangeBarSeries x:Name="BarSeries"
                    CategoryBinding="Name" 
                    ItemsSource="{Binding ElementName=MainApplicationPage, Path=DataPoints}"
                    Canvas.ZIndex="2"
                    HighBinding="High"
                    LowBinding="Low">
                    <telerikChart:RangeBarSeries.PointTemplate>
                        <DataTemplate>
                            <Grid Background="{StaticResource PhoneForegroundBrush}">
                                <Canvas VerticalAlignment="Top">
                                    <TextBlock 
                                            Text="{Binding Path=High}"
                                            Canvas.Left="10"
                                            Canvas.Top="-28"/>
                                </Canvas>
                                <Canvas VerticalAlignment="Bottom">
                                    <TextBlock 
                                            Text="{Binding Path=Low}"
                                            Canvas.Left="7"/>
                                </Canvas>
                            </Grid>
                        </DataTemplate>
                    </telerikChart:RangeBarSeries.PointTemplate>
                </telerikChart:RangeBarSeries>
            </telerikChart:RadCartesianChart>

[Ivaylo Gergov]

Hi Alex,

From the provided project I can see that you set he RangeBarSeries.PointTemplate property which means that the chart ignores its Palette and SelectionPalette properties and that's why the color of the bar does not change.
In case you need to change the PointTemplate property, I can suggest another approach. You can add a bool IsSelected property in your dataitem which will track if the point is selected or not. Then, in the template of the point you can use a ValueConverter for the Grid.Background that will return a color depending on the selection state of the point. For your convenience, I have modified the project to demonstrate the approach.

I hope this helps.

Regards,
Ivaylo Gergov
Telerik

 

 

[Alex]

Ivaylo, 
Thank you so much, especially for taking the time to put together a sample; this is exactly what I was looking for.

If I may suggest: expand the documentation with an example of using SelectionChanged event of the ChartSelectionBehaviors.

Alex

[Ivaylo Gergov]

Hi Alex,

Thank you for your feedback. We will definitely include such example in our documentation in the future releases.

Please, feel free to contact us if you have any other questions or suggestions.

Regards,
Ivaylo Gergov
Telerik