Pane Titles

• Aug 24, 2023
• 2 minutes to read

The Pane Title accompanies the pane, provides meta information about the pane’s series, and allows end users to hide/show the pane. The pane title consists of a content control and a expand/collapse indicator:

Note

The Chart Control can hide its elements if there is insufficient space to display them. Elements are hidden in the following order:

1. Legends
2. Axis Titles
3. Series Titles
4. Pane Titles
5. Axes
6. Chart Title
7. Breadcrumbs

To make the Chart Control always display its elements, disable the ChartControl.AutoLayout property.

How to: Show the Pane Title

A pane shows a custom title when you assign a PaneTitle object to the pane, or the default title when you do not specify the title and collapse the pane.

The markup below produces the pane titles in the previous image.

Xaml

<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.DefaultPane>
        <dxc:Pane>
            <dxc:Pane.Title>
                <dxc:Pane.Title>
                    <dxc:PaneTitle Content="Temperature">
                        <dxc:PaneTitle.ContentTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{dx:SvgImageSource Uri=/Icons/thermometer.svg}" 
                                           Width="24" Height="24"/>
                                    <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                                </StackPanel>
                            </DataTemplate>
                        </dxc:PaneTitle.ContentTemplate>
                    </dxc:PaneTitle>
                </dxc:Pane.Title>
            </dxc:Pane.Title>
        </dxc:Pane>
    </dxc:XYDiagram2D.DefaultPane>
    <dxc:Panes>
        <!-- A collapsed pane displays its default title. -->
        <dxc:Pane Collapsed="True">
    </dxc:Panes>
</dxc:XYDiagram2D>

Use the following classes and properties to show the Pane Title:

Symbol	Description
Pane.Title	Returns the pane title settings.
PaneTitle	The pane title.
TitleBase.Content	Gets or sets the title’s content. This is a dependency property.
TitleBase.ContentTemplate	Gets or sets the template that defines the presentation of the title’s content, represented by the TitleBase.Content property. This is a dependency property.

Note

To display a pane title, use the Collapsed property instead of the Visibility property to collapse a pane.

How to: Manage the Pane’s Collapse Capability

End users can click a pane’s title to show/hide this pane if its RuntimeCollapse property set to true.

Note

• The XYDiagram2D.RuntimePaneCollapse property specifies whether all the diagram’s panes can be collapsed at runtime.
• The Pane Title does not display a expand/collapse indicator when the RuntimeCollapse property is set to false.

The following image displays a Chart Control that allows end users to show/hide only the ‘Visitors’ pane:

The markup below produces the same Chart Control as in the previous image.

Xaml

<dxc:XYDiagram2D RuntimePaneCollapse="False">
    <dxc:XYDiagram2D.DefaultPane>
        <dxc:Pane x:Name="visitorsPane" RuntimeCollapse="True">
            <dxc:Pane.Title>
                <dxc:PaneTitle Content="Visitors"/>
            </dxc:Pane.Title>
        </dxc:Pane>
    </dxc:XYDiagram2D.DefaultPane>
    <dxc:XYDiagram2D.Panes>
        <dxc:Pane x:Name="responsePane">
            <dxc:Pane.Title>
                <dxc:PaneTitle Content="User Traffic / Average Response Time"/>
            </dxc:Pane.Title>
        </dxc:Pane>
        <dxc:Pane x:Name="pageLoadPane">
            <dxc:Pane.Title>
                <dxc:PaneTitle Content="Average Page Load Time"/>
            </dxc:Pane.Title>
        </dxc:Pane>
    </dxc:XYDiagram2D.Panes>
</dxc:XYDiagram2D> 

Important

Even if you allow to collapse every pane, the Chart Control always keeps at least one of them expanded.