Hello Michael,
You could skip using the selection behavior and just change the styling of the slices to increase the border thickness and color to make it clear that slice appears "focused".
Review the
Custom Chart Palette article to see how to define your own palette colors. These palette objects have both a Fill and Stroke color properties. The stroke is the border brush and can be used to visually distinguish it from the rest of the slices.
Because palette colors are applied in order (and loops back to the beginning if there are more data points than colors), you can match it up to the palette color that slice will receive and modify that palette item's border property. Note that you may need to reload the chart in order for palette changes to be observed after it's been initially rendered.
Example
Here's an example to get you started on the concept, this logic is based off the original "RadListView as Legend" example:
Due to the complexity and customization level of such an approach, I ask that you open a support ticket if you have any further trouble with implementation. Share the code so that the developers can reproduce the problem and provide you with a directly applicable solution.
private void LegendListView_OnSelectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
// Pick the slice that you want to highlight
if (e.NewItems?.Count > 0 && e.NewItems[0] is LegendItem selectedItem)
{
// Find the item in the series that matches that legend item
var itemToHighlight = ViewModel.PieSeriesItems.FirstOrDefault(si => si.Category == selectedItem.Title);
// Get the index of that series item
var indexToHighlight = ViewModel.PieSeriesItems.IndexOf(itemToHighlight);
// Highlight that slice to make it appear selected
HighlightSlice(indexToHighlight);
}
}
private void HighlightSlice(int indexToHighlight)
{
// In order to update the chart visually, an easy trick is to remove it from the UI and then add it back after modifications have been made
var pieChart = MyPieChart;
RootGrid.Children.Remove(MyPieChart);
// make changes
for (int i = 0; i < MyPieChart.Palette.Entries.Count; i++)
{
var originalFillColor = MyPieChart.Palette.Entries[i].FillColor;
MyPieChart.Palette.Entries.RemoveAt(i);
if (i == indexToHighlight)
{
MyPieChart.Palette.Entries.Insert(i, new PaletteEntry(originalFillColor, Color.Red));
}
else
{
MyPieChart.Palette.Entries.Insert(i, new PaletteEntry(originalFillColor, Color.Transparent));
}
}
// Add it back
RootGrid.Children.Add(pieChart);
}
<Grid x:Name="RootGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<telerikChart:RadPieChart x:Name="MyPieChart" >
<telerikChart:RadPieChart.Palette>
<telerikChart:ChartPalette>
<telerikChart:ChartPalette.Entries>
<telerikChart:PaletteEntry StrokeColor="Transparent" FillColor="LightBlue" />
<telerikChart:PaletteEntry StrokeColor="Transparent" FillColor="LightGreen" />
<telerikChart:PaletteEntry StrokeColor="Transparent" FillColor="LightCoral" />
</telerikChart:ChartPalette.Entries>
</telerikChart:ChartPalette>
</telerikChart:RadPieChart.Palette>
<telerikChart:RadPieChart.Series>
<telerikChart:PieSeries x:Name="MyPieSeries"
AllowSelect="True"
ItemsSource="{Binding PieSeriesItems}"
ValueBinding="Value"
ShowLabels="True"
RadiusFactor="0.8" />
</telerikChart:RadPieChart.Series>
</telerikChart:RadPieChart>
<!-- The custom legend -->
<dataControls:RadListView x:Name="LegendListView" SelectionChanged="LegendListView_OnSelectionChanged" Grid.Row="1">
<dataControls:RadListView.LayoutDefinition>
<listView:ListViewLinearLayout Orientation="Horizontal" HorizontalItemSpacing="2" />
</dataControls:RadListView.LayoutDefinition>
<dataControls:RadListView.ItemTemplate>
<DataTemplate>
<listView:ListViewTemplateCell>
<StackLayout Orientation="Horizontal">
<Grid BackgroundColor="{Binding SeriesPaletteEntry.FillColor}" Margin="5" Padding="5,0">
<Label Text="{Binding Title}" TextColor="White" VerticalOptions="Center" />
</Grid>
</StackLayout>
</listView:ListViewTemplateCell>
</DataTemplate>
</dataControls:RadListView.ItemTemplate>
</dataControls:RadListView>
</Grid>
Important Note: The main problem you might encounter is there are
more slices than palette entries. When you highlight it, you'll get the highlight on all the slices that use that palette entry. Therefore, I recommend you always have more palette colors that expected slices to avoid this situation.
Here's the result at runtime:
Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items