SliceAndDiceLayoutAlgorithm Class
A class representing the Slice and Dice layout algorithm.
Namespace: DevExpress.Xpf.TreeMap
Assembly: DevExpress.Xpf.TreeMap.v24.1.dll
NuGet Package: DevExpress.Wpf.TreeMap
Declaration
Remarks
This algorithm calculates the layout using the following principle. For each tree map level the layout direction is selected depending on the width/height ratio (for SliceAndDiceLayoutAlgorithm.LayoutMode = SliceAndDiceLayoutMode.Auto), and for all children items at a given level, the display area is divided amongst the children, where each child item obtains a slice proportional to its value.
The following image demonstrates the country area tree map with a layout calculated using this algorithm.
Example
To customize the layout algorithm, do the following.
- Assign a newly created TreeMapLayoutAlgorithmBase class descendant object to the TreeMapControl.LayoutAlgorithm property.
- Optionally, for all predefined layout algorithms, it is possible to specify a layout’s fill direction using the TreeMapLayoutAlgorithm.Direction property.
- In addition to the layout direction, for the
SliceAndDiceLayoutAlgorithm
you can change its mode using the SliceAndDiceLayoutAlgorithm.LayoutMode property.
<dxtm:TreeMapControl x:Name="treeMap"
LayoutAlgorithm="{Binding ElementName=lbLayoutAlgorithm, Path=SelectedValue}">
<!-- endregion #LayoutAlgorithm-->
<dxtm:TreeMapControl.Colorizer>
<dxtm:TreeMapPaletteColorizer/>
</dxtm:TreeMapControl.Colorizer>
<dxtm:TreeMapItemStorage>
<dxtm:TreeMapItem Label="Americas">
<dxtm:TreeMapItem Label="United States" Value="17.418"/>
<dxtm:TreeMapItem Label="Brazil" Value="2.353"/>
</dxtm:TreeMapItem>
<dxtm:TreeMapItem Label="Europe">
<dxtm:TreeMapItem Label="Germany" Value="3.859"/>
<dxtm:TreeMapItem Label="United Kingdom" Value="2.945"/>
<dxtm:TreeMapItem Label="France" Value="2.846"/>
<dxtm:TreeMapItem Label="Italy" Value="2.147"/>
<dxtm:TreeMapItem Label="Russia" Value="1.857"/>
</dxtm:TreeMapItem>
<dxtm:TreeMapItem Label="Asia">
<dxtm:TreeMapItem Label="China" Value="10.380"/>
<dxtm:TreeMapItem Label="Japan" Value="4.616"/>
<dxtm:TreeMapItem Label="India" Value="2.049"/>
</dxtm:TreeMapItem>
</dxtm:TreeMapItemStorage>
<!--region #CloseTag-->
</dxtm:TreeMapControl>
<!--endregion #CloseTag-->
<Grid Grid.Column="1" Margin="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Margin="0,0,0,4"
Text="Layout Algorithm:"/>
<!--region #LayoutAlgorithmList-->
<ListBox x:Name="lbLayoutAlgorithm"
Grid.Row="1"
DisplayMemberPath="LayoutAlgorithmName"
SelectedValuePath="LayoutAlgorithm"
SelectedIndex="0">
<local:LayoutAlgorithmWarapper LayoutAlgorithmName="Slice and Dice">
<dxtm:SliceAndDiceLayoutAlgorithm/>
</local:LayoutAlgorithmWarapper>
<local:LayoutAlgorithmWarapper LayoutAlgorithmName="Squarified">
<dxtm:SquarifiedLayoutAlgorithm/>
</local:LayoutAlgorithmWarapper>
<local:LayoutAlgorithmWarapper LayoutAlgorithmName="Striped">
<dxtm:StripedLayoutAlgorithm/>
</local:LayoutAlgorithmWarapper>
</ListBox>