[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Providing Data
    [Collapse]Chart Elements
       Pane Layout
       Pane Titles
      Chart Titles
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Pane Layout

This document explains how to arrange Panes within a Diagram. You can sequentially position panes or configure the table layout to arrange panes in a grid of rows and columns.

Expanded Specify Pane Orientation

The Chart control can sequentially arrange panes. The XYDiagram2D.PaneOrientation property defines whether panes are orientated vertically or horizontally.

Orientation Example
XYDiagram2D.PaneOrientation = Vertical (default)
XYDiagram2D.PaneOrientation = Horizontal

Expanded Specify Pane Position

The Chart control can arrange panes using a grid of columns and rows. Use row and column indices to specify a pane's position. The following image shows three panes in a grid with two columns and two rows:

Specify Pane Layout at Design Time

The following markup allows you to specify the pane layout at design time:

The code above uses the following API members:

Member Description
XYDiagram2D.PaneLayout Gets or sets the pane layout configuration.
GridLayout (see GridLayout) The settings that configure a chart's panes in a grid layout.
GridLayout.ColumnDefinitions Returns the grid layout's columns.
LayoutDefinition (see LayoutDefinition) A layout element (row or column) used to arrange panes.
GridLayout.RowDefinitions Returns the grid layout's rows.
GridLayout.Column Gets or sets the index of the grid column the pane occupies.
GridLayout.Row Gets or sets the index of the grid row the pane occupies.
GridLayout.ColumnSpan Gets or sets the number of the grid columns the pane occupies.
GridLayout.RowSpan Gets or sets the number of grid rows that the pane occupies.

Specify Pane Layout at Runtime

The following code allows you to specify pane layout at runtime:

You can use the following methods to specify a pane's position:

Method Description
GridLayout.SetColumn Specifies the index of the grid column the pane occupies.
GridLayout.SetRow Specifies the index of the grid row the pane occupies.
GridLayout.SetColumnSpan Sets the number of columns that the pane occupies.
GridLayout.SetRowSpan Sets the number of rows that the pane occupies.

Enable Auto Arrangement in a Grid

The Chart control determines panes' position and size if you assign a new GridLayout (see GridLayout) instance to XYDiagram2D.PaneLayout, and do not populate the GridLayout.ColumnDefinitions and GridLayout.RowDefinitions collections with items.

Expanded Specify Panes Size

A pane's size depends on the size of the column and row that define this pane's position.

You can specify column/row size as an absolute value in pixels. In this case, a row or column size does not change when an end user resizes the Chart control. You can define a pane's size relative to the chart's size using weights. In this case, a row or column is resized proportionally to a diagram when an end user resizes the Chart control.

The images below illustrate how pane sizes are changed when a chart is resized:

  • 480x270 pixels

  • 560x360 pixels

Specify Panes Size at Design Time

In XAML, you can use a numeric value with an asterisk to specify a column's or row's relative size. In this case, the value defines which portion of the available chart space this column or row should occupy. Use a value without an asterisk to specify column or row size in pixels.

The following markup specifies the layout's column and row sizes using the LayoutDefinition.Size property:

Specify Pane Sizes at Runtime

The code below specifies column and row sizes at runtime:

The following table lists the API members that the code above uses:

Member Description
LayoutDefinition.Size Specifies a layout item's size.
LayoutSizeValueType (see LayoutSizeValueType) Lists types of measurement units in which the diagram layout measures its items' sizes.

Specify Sizes of Sequentially Arranged Panes

You can use the ~Span properties to specify relative sizes of panes that are vertically or horizontally arranged:

Use the following code to configure panes' size when XYDiagram2D.PaneOrientation is Vertical:

Use the GridLayout.RowDefinitions and GridLayout.ColumnSpan properties instead of GridLayout.ColumnDefinitions and GridLayout.RowSpan when XYDiagram2D.PaneOrientation is Horizontal.

Expanded Expand and Collapse Panes

End users can click the pane title or its expand button to expand or collapse panes at runtime. The Chart control recalculates other panes' sizes to occupy all the available place within the diagram when an end user collapses the pane. The XYDiagram2D.RuntimePaneCollapse property allows you to enable collapsing panes. Use the Pane.RuntimeCollapse property to specify whether end users can collapse or expand an individual pane.

You can use the Pane.Collapsed property to specify whether the pane is collapsed.

Is this topic helpful?​​​​​​​