Skip to content

OutlinePanel

317jamtay317 edited this page Jul 23, 2026 · 2 revisions

OutlinePanel

The Navigation Panel: the presentation-only panel along the left edge of the Workspace that lists the Active Session's Outline — every Section Heading as a clickable Outline Entry, indented by heading level. It is presented as a tab of the Side Dock (alongside the Folder Panel, so the two share one column) and is hidden until the user toggles it on (SideDockViewModel.IsNavigationTabVisible, INV-046).

  • Class: UI.Controls.OutlinePanel (derives from System.Windows.Controls.ListBox)
  • Default style: src/UI/Controls/OutlinePanel.xaml (merged in App.xaml)

Authored as a custom Control (a ListBox subclass plus a ResourceDictionary for its look), per the project's Control exception to the zero-code-behind rule — the same pattern as the EditorGutter. The panel is view-only: it reads the editor's Outline and drives Navigation, and never mutates the document — so it cannot change the Markdown source (INV-012).

How it works

The panel mirrors the editor through its Editor dependency property (bound the same way as the gutter):

  • Listing — on MarkdownRichEditor.OutlineChanged it sets its ItemsSource to MarkdownRichEditor.Outline, the ordered list of every Section Heading (including ones inside a Folded Section Body, so the whole document is always represented). Each Outline Entry is indented by HeadingLevelToIndentConverter so subsections nest under their parents.
  • Navigating — selecting an Outline Entry (a click) calls MarkdownRichEditor.Navigate, which reveals the heading (Unfolding its enclosing Section if hidden), selects it, and scrolls it into view.
  • Collapse / Expand — an Outline Entry that leads nested entries shows a chevron (▾ Expanded, ▸ Collapsed). Clicking it Collapses or Expands that entry, hiding or showing the nested Outline Entries beneath it. Which entries are hidden under a Collapsed ancestor is computed by the pure UI.Wysiwyg.OutlineView. Collapse state is panel-only (it never changes the document or any Fold — INV-012) and is preserved across edits, keyed by heading block. The chevron is a Button, so clicking it toggles the Collapse without selecting the row or Navigating.
  • Highlighting the Current Section — on MarkdownRichEditor.CurrentSectionChanged it selects the Outline Entry of MarkdownRichEditor.CurrentSection, so the entry for the Section under the caret stays highlighted as the user edits and scrolls. These self-made selections are guarded so they never trigger Navigation back into the editor.

Properties

Property Type Description
Editor MarkdownRichEditor? The editor whose Outline this panel lists and Navigates. Setting it wires the Outline/Current-Section subscriptions.

Usage

<!-- Hosted in the Side Dock's Outline tab, shown while that tab is the Selected one. -->
<controls:OutlinePanel Editor="{Binding ElementName=Editor}" />
...
<controls:MarkdownRichEditor x:Name="Editor"
                             Markdown="{Binding ActiveSession.Markdown, UpdateSourceTrigger=PropertyChanged}" />

Clone this wiki locally