Version

Configuring Selection and Explosion (XamDoughnutChart)

Topic Overview

Purpose

This topic explains how to configure selection and explosion for the slices of the XamDoughnutChart™ .

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic gives an overview of the XamDoughnutChart™ control and its main features.

This topic explains using a code example how to add the XamDoughnutChart control to a WPF application.

In this topic

This topic contains the following sections:

Slice Selection Configuration Summary

Control configuration summary chart

The following table lists the configurable aspects of the XamDoughnutChart control related to slice selection.

Configurable aspect Details Properties / Events

Enable/disable slice selection

You can enable or disable the ability to select slices or not.

Configuring the look of the selected slices

You can define how the selected slices will look by defining a style with a TargetType of Slice and assigning it to the SelectedStyle property of the XamDoughnutChart .

Changing the selection state upon slice click

If you attach an event handler for the SliceClick event, it supplies a reference to the clicked slice in the event arguments allowing you to modify its selection state.

Setting the IsSelected property

The XamDoughnutChart holds references to all the slices allowing you to modify their IsSelected property directly.

Modifying the contents of the SelectedSlices collection

You can change the selected slice by changing the contents of the SelectedSlices collection.

Enable/Disable Slice Selection

Overview

You can enable (default setting) or disable slice selection in the XamDoughnutChart .

Note
Note:

You must perform all the remaining slice selection configurations in this topic with slice selection enabled.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this property: And set it to:

Enable/Disable slice selection

True or False

Configuring the Look of the Selected Slices

Overview

The XamDoughnutChart exposes a SelectedStyle property that determines the look of the selected slices. By default, no style is applied, and selecting a slice will not alter its appearance in any way. In order to apply your own style to the selected slices you need to define a Style with TargetType of Slice and set it as the value of the SelectedStyle property.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this property: And set it to:

Configure the look for selected slices.

A Style with TargetType of Slice

Example

The screenshot below demonstrates how the selected slice (the slice at the top) of the XamDoughnutChart looks as a result of the following settings:

Property Value

In XAML:

<ig:XamDoughnutChart>
  <ig:XamDoughnutChart.SelectedStyle>
    <Style TargetType="ig:Slice">
      <Setter Property="Background" Value="DarkGray"/>
      <Setter Property="BorderBrush" Value="Black"/>
      <Setter Property="BorderThickness" Value="3"/>
    </Style>
  </ig:XamDoughnutChart.SelectedStyle>
...
XamDoughnutChart Selection Explosion 1.png

Changing the Selection State upon Slice Click

Overview

The XamDoughnutChart exposes a SliceClick event used to change the selected/unselected state of a slice.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this event / property: What to do:

Set the IsSelected property

SliceClick

SliceClickEventArgs.IsSelected

Set the IsSelected property of the SliceClickEventArgs to True or False

Example

The following code example demonstrates how to toggle the selection state of slices upon click.

In XAML:

<ig:XamDoughnutChart SliceClick="DoughnutSliceClicked">
…

In C#:

private void DoughnutSliceClicked(object sender, SliceClickEventArgs e)
{
    e.IsSelected = !e.IsSelected;
}

In Visual Basic:

Private Sub DoughnutSliceClicked(sender As Object, e As SliceClickEventArgs)
      e.IsSelected = Not e.IsSelected
End Sub

Setting the IsSelected Property

Overview

The XamDoughnutChart holds references to all the slices allowing you to modify their IsSelected property directly to the Slice objects.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this event / property: What to do:

Change the selection state upon slice click

Set the IsSelected property of the Slice to True or False

Example

The following code example demonstrates how to obtain a reference to the first slice of the XamDoughnutChart in order to set its IsSelected property. Note that the execution of this code must occur after loading the particular ring series.

In XAML:

<ig:XamDoughnutChart x:Name="doughnutChart">
    <ig:RingSeries Loaded="SeriesLoaded">
…

In C#:

private void SeriesLoaded(object sender,  RoutedEventArgs    e)
{
    var firstSlice = ((RingSeries)this.doughnutChart.Series[0]).Ring.ArcItems[0].SliceItems[0].Slice;
    firstSlice.IsSelected = true;
}

In Visual Basic:

Private Sub SeriesLoaded(sender As Object, e As  RoutedEventArgs   )
      Dim firstSlice = DirectCast(Me.doughnutChart.Series(0), RingSeries).Ring.ArcItems(0).SliceItems(0).Slice
      firstSlice.IsSelected = True
End Sub

Modifying the Contents of the SelectedSlices Collection

Overview

Another approach for managing the selected slices is to modify the contents of the SelectedSlices collection of the XamDoughnutChart . To do this, you need to obtain a reference to one or more Slice objects that you want to select and add them to the SelectedSlices. If you want to unselect slices, remove them from the collection.

Property settings

The following table maps the desired behaviors to property settings.

In order to: Use this event / property: What to do:

Modify the contents of the SelectedSlices collection

Add or Remove the respective SliceItem from the SelectedSlices collection.

Example

The following code example demonstrates how to obtain a reference to the first slice of the XamDoughnutChart in and add it to the collection with selected slices. An example of removing an item is also available. Note, execution of this code must occur after loading the particular ring series.

In XAML:

<ig:XamDoughnutChart x:Name="doughnutChart">
    <ig:RingSeries Loaded="SeriesLoaded">
…

In C#:

private void SeriesLoaded(object sender,  RoutedEventArgs    e)
{
     var firstSlice = ((RingSeries)this.doughnutChart.Series[0]).Ring.ArcItems[0].SliceItems[0].Slice;     {}; "]
 // To add a selected item:
this.doughnutChart.SelectedSlices.Add(3);
    // To remove a selected item:
     this.doughnutChart.SelectedSlices.RemoveAt(3);
}

In Visual Basic:

Private Sub SeriesLoaded(sender As Object, e As  RoutedEventArgs   )
       Dim firstSlice = DirectCast(Me.doughnutChart.Series(0), RingSeries).Ring.ArcItems(0).SliceItems(0).Slice
 ' To add a selected item:
Me.doughnutChart.SelectedSlices.Add(firstSlice)
 ' To remove a selected item:
       Me.doughnutChart.SelectedSlices.RemoveAt(0)
End Sub

Slice Explosion Configuration Summary

Control configuration summary chart

The following table lists the configurable aspects of the XamDoughnutChart control related to slice explosion.

Configurable aspect Details Properties / Events

Enable/disable slice explosion

You can enable or disable the ability to explode slices.

Changing the exploded state of a slice upon slice click

If you attach an event handler for the SliceClick event, a reference to the clicked slice is supplied in the event arguments and you can modify its exploded state.

Setting the IsExploded property

The XamDoughnutChart holds references to all the slices allowing you to modify their IsExploded property directly.

Modifying the contents of the ExplodedSlices collection

You can change the exploded slices by changing the contents of the ExplodedSlices collection.

Enable/ Disable Slice Explosion

Overview

You can enable (default setting) or disable slice explosion in the XamDoughnutChart .

Note
Note:

You must perform all the remaining slice explosion configurations in this topic with slice explosion enabled.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this property: And set it to:

Enable/Disable slice explosion

True or False

Example

The following screenshot demonstrates a XamDoughnutChart with 1 slice exploded.

XamDoughnutChart Selection Explosion 2.png

Changing the Explosion State upon Slice Click

Overview

The XamDoughnutChart exposes a SliceClick event used to change whether a slice is exploded.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this event / property: What to do:

Set the IsExploded property

SliceClick

SliceClickEventArgs.IsExploded

Set the IsExploded property of the SliceClickEventArgs to True or False

Example

The following code example demonstrates how to toggle the explosion state of slices upon click.

In XAML:

<ig:XamDoughnutChart SliceClick="DoughnutSliceClicked">
…

In C#:

private void DoughnutSliceClicked(object sender,  SliceClickEventArgs e)
{
    e.IsExploded = !e.IsExploded;
}

In Visual Basic:

Private Sub DoughnutSliceClicked(sender As Object, e As RoutedEventArgs)
      e.IsExploded = Not e.IsExploded
End Sub

Setting the IsExploded Property

Overview

The XamDoughnutChart exposes a SliceClick event used to change whether a slice is exploded.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this event / property: What to do:

Change the explosion state upon slice click

Set the IsExploded property of the Slice to True or False

Example

The following code example demonstrates how to obtain a reference to the first slice of the XamDoughnutChart in order to set its IsExploded property. Note that execution of this code must occur after loading the particular ring series.

In XAML:

<ig:XamDoughnutChart x:Name="doughnutChart">
    <ig:RingSeries Loaded="SeriesLoaded">
        …
    </ig:RingSeries>
    …
</ig:XamDoughnutChart>

In C#:

private void SeriesLoaded(object sender, RoutedEventArgs e)
{
    var firstSlice = ((RingSeries)this.doughnutChart.Series[0]).Ring.ArcItems[0].SliceItems[0].Slice;
    firstSlice.IsExploded = true;
}

In Visual Basic:

Private Sub SeriesLoaded(sender As Object, e As RoutedEventArgs)
      Dim firstSlice = DirectCast(Me.doughnutChart.Series(0), RingSeries).Ring.ArcItems(0).SliceItems(0).Slice
      firstSlice.IsExploded = True
End Sub

Modifying the Contents of the ExplodedSlices Collection

Overview

Another approach for managing the exploded slices is to modify the contents of the ExplodedSlices collection of the XamDoughnutChart . To do this, you need to obtain a reference to one or more Slice objects that you want to be able to explode and add them to the ExplodedSlices. If you want to set the non-exploded state of slices, remove them from the collection.

Property settings

The following table maps the desired behavior to property settings.

In order to: Use this event / property: What to do:

Modify the contents of the ExplodedSlices collection

Add or Remove the respective SliceItem from the ExplodedSlices collection.

Example

The following code example demonstrates how to obtain a reference to the first slice of the XamDoughnutChart in and add it to the collection with exploded slices. An example for removing an item is also available. Note, execution of this code must occur after loading the particular ring series.

In XAML:

<ig:XamDoughnutChart x:Name="doughnutChart">
    <ig:RingSeries Loaded="SeriesLoaded">
        …
    </ig:RingSeries>
    …
</ig:XamDoughnutChart>

In C#:

private void SeriesLoaded(object sender, RoutedEventArgs e)
{
    var firstSlice = ((RingSeries)this.doughnutChart.Series[0]).Ring.ArcItems[0].SliceItems[0].Slice;
    // To add an exploded item:
    this.doughnutChart.ExplodedSlices.Add(firstSlice);
    // To remove an exploded item:
    this.doughnutChart.ExplodedSlices.RemoveAt(0);
}

In Visual Basic:

Private Sub SeriesLoaded(sender As Object, e As  RoutedEventArgs   )
    Dim firstSlice = DirectCast(Me.doughnutChart.Series(0), RingSeries).Ring.ArcItems(0).SliceItems(0).Slice
    ' To add an exploded item:
    Me.doughnutChart.ExplodedSlices.Add(firstSlice)
    ' To remove an exploded item:
    Me.doughnutChart.ExplodedSlices.RemoveAt(0)
End Sub