Pane Titles

  • 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:

Pane Title Sample

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.

Different title samples

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

<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 following image displays a Chart Control that allows end users to show/hide only the 'Visitors' pane:

Pane Title Elements

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

<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.