Pane Layout

May 28, 2021
5 minutes to read

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.

Specify Pane Orientation

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

Orientation	Example
PaneOrientation = Vertical (default)
PaneOrientation = Horizontal

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:

XAML

xaml

<dxc:XYDiagram2D.PaneLayout>
    <dxc:GridLayout>
        <dxc:GridLayout.ColumnDefinitions>
            <dxc:LayoutDefinition/>
            <dxc:LayoutDefinition/>
        </dxc:GridLayout.ColumnDefinitions>
        <dxc:GridLayout.RowDefinitions>
            <dxc:LayoutDefinition/>
            <dxc:LayoutDefinition/>
        </dxc:GridLayout.RowDefinitions>
    </dxc:GridLayout>
</dxc:XYDiagram2D.PaneLayout>
<dxc:XYDiagram2D.DefaultPane>
    <dxc:Pane dxc:GridLayout.Column="0"
              dxc:GridLayout.Row="0"
              dxc:GridLayout.RowSpan="2"
              x:Name="temperaturePane"/>
</dxc:XYDiagram2D.DefaultPane>
<dxc:XYDiagram2D.Panes>
    <dxc:Pane dxc:GridLayout.Column="1" 
              dxc:GridLayout.Row="0" 
              x:Name="pressurePane"/>
    <dxc:Pane dxc:GridLayout.Column="1" 
              dxc:GridLayout.Row="1" 
              x:Name="humidityPane"/>
</dxc:XYDiagram2D.Panes>

The code above uses the following API members:

Member	Description
XYDiagram2D.PaneLayout	Gets or sets the pane layout configuration.
GridLayout	The settings that configure a chart’s panes in a grid layout.
GridLayout.ColumnDefinitions	Returns the grid layout’s columns.
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:

XAML

xaml

<dxc:XYDiagram2D.DefaultPane>
    <dxc:Pane x:Name="temperaturePane"/>
</dxc:XYDiagram2D.DefaultPane>
<dxc:XYDiagram2D.Panes>
    <dxc:Pane x:Name="pressurePane"/>
    <dxc:Pane x:Name="humidityPane"/>
</dxc:XYDiagram2D.Panes>

C#
VB.NET

csharp

GridLayout gridLayout = new GridLayout();
gridLayout.ColumnDefinitions.Add(new LayoutDefinition());
gridLayout.ColumnDefinitions.Add(new LayoutDefinition());
gridLayout.RowDefinitions.Add(new LayoutDefinition());
gridLayout.RowDefinitions.Add(new LayoutDefinition());
diagram.PaneLayout = gridLayout;

GridLayout.SetColumn(temperaturePane, 0);
GridLayout.SetRow(temperaturePane, 0);
GridLayout.SetRowSpan(temperaturePane, 2);

GridLayout.SetColumn(pressurePane, 1);
GridLayout.SetRow(pressurePane, 0);

GridLayout.SetColumn(humidityPane, 1);
GridLayout.SetRow(humidityPane, 1);

Dim gridLayout As GridLayout = New GridLayout
gridLayout.ColumnDefinitions.Add(New LayoutDefinition)
gridLayout.ColumnDefinitions.Add(New LayoutDefinition)
gridLayout.RowDefinitions.Add(New LayoutDefinition)
gridLayout.RowDefinitions.Add(New LayoutDefinition)
diagram.PaneLayout = gridLayout

GridLayout.SetColumn(temperaturePane, 0)
GridLayout.SetRow(temperaturePane, 0)
GridLayout.SetRowSpan(temperaturePane, 2)

GridLayout.SetColumn(pressurePane, 1)
GridLayout.SetRow(pressurePane, 0)

GridLayout.SetColumn(humidityPane, 1)
GridLayout.SetRow(humidityPane, 1)

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 instance to XYDiagram2D.PaneLayout, and do not populate the GridLayout.ColumnDefinitions and GridLayout.RowDefinitions collections with items.

XAML

xaml

<dxc:XYDiagram2D.PaneLayout>
    <dxc:GridLayout/>
</dxc:XYDiagram2D.PaneLayout>

<dxc:XYDiagram2D.DefaultPane>
    <dxc:Pane x:Name="temperaturePane"/>
</dxc:XYDiagram2D.DefaultPane>
<dxc:XYDiagram2D.Panes>
    <dxc:Pane x:Name="pressurePane"/>
    <dxc:Pane x:Name="humidityPane"/> 
</dxc:XYDiagram2D.Panes>

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:

XAML

xaml

<dxc:XYDiagram2D.PaneLayout>
    <dxc:GridLayout>
        <dxc:GridLayout.ColumnDefinitions>
            <dxc:LayoutDefinition Size="200"/>
            <dxc:LayoutDefinition Size="1*"/>
        </dxc:GridLayout.ColumnDefinitions>
        <dxc:GridLayout.RowDefinitions>
            <dxc:LayoutDefinition Size="100"/>
            <dxc:LayoutDefinition Size="2*"/>
            <dxc:LayoutDefinition Size="3*"/>
        </dxc:GridLayout.RowDefinitions>
    </dxc:GridLayout>
</dxc:XYDiagram2D.PaneLayout>

Specify Pane Sizes at Runtime

The code below specifies column and row sizes at runtime:

C#
VB.NET

csharp

private void Window_Loaded(object sender, RoutedEventArgs e) {
    GridLayout gridLayout = new GridLayout();
    gridLayout.ColumnDefinitions.Add(new LayoutDefinition { Size = new LayoutSizeValue(200, LayoutSizeValueType.Absolute)});
    gridLayout.ColumnDefinitions.Add(new LayoutDefinition { Size = new LayoutSizeValue(1, LayoutSizeValueType.Weight)});
    gridLayout.RowDefinitions.Add(new LayoutDefinition { Size = new LayoutSizeValue(100, LayoutSizeValueType.Absolute)});
    gridLayout.RowDefinitions.Add(new LayoutDefinition { Size = new LayoutSizeValue(2, LayoutSizeValueType.Weight)});
    gridLayout.RowDefinitions.Add(new LayoutDefinition { Size = new LayoutSizeValue(3, LayoutSizeValueType.Weight)});
    diagram.PaneLayout = gridLayout;
}

Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim gridLayout As GridLayout = New GridLayout()
    gridLayout.ColumnDefinitions.Add(New LayoutDefinition With {
        .Size = New LayoutSizeValue(200, LayoutSizeValueType.Absolute)
    })
    gridLayout.ColumnDefinitions.Add(New LayoutDefinition With {
        .Size = New LayoutSizeValue(1, LayoutSizeValueType.Weight)
    })
    gridLayout.RowDefinitions.Add(New LayoutDefinition With {
        .Size = New LayoutSizeValue(100, LayoutSizeValueType.Absolute)
    })
    gridLayout.RowDefinitions.Add(New LayoutDefinition With {
        .Size = New LayoutSizeValue(2, LayoutSizeValueType.Weight)
    })
    gridLayout.RowDefinitions.Add(New LayoutDefinition With {
        .Size = New LayoutSizeValue(3, LayoutSizeValueType.Weight)
    })
    diagram.PaneLayout = gridLayout
End Sub

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

Member	Description
LayoutDefinition.Size	Specifies a layout item’s size.
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 :

XAML

xaml

<dxc:XYDiagram2D.PaneLayout>
    <dxc:GridLayout>
        <dxc:GridLayout.ColumnDefinitions>
            <dxc:LayoutDefinition/>
        </dxc:GridLayout.ColumnDefinitions>
    </dxc:GridLayout>
</dxc:XYDiagram2D.PaneLayout>

<dxc:XYDiagram2D.DefaultPane>
    <dxc:Pane x:Name="temperaturePane" 
              dxc:GridLayout.RowSpan="5"/>
</dxc:XYDiagram2D.DefaultPane>
<dxc:XYDiagram2D.Panes>
    <dxc:Pane x:Name="pressurePane" 
              dxc:GridLayout.RowSpan="3"/>
    <dxc:Pane x:Name="humidityPane" 
              dxc:GridLayout.RowSpan="4"/>
</dxc:XYDiagram2D.Panes>

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

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.