Splitter

Everything in FirstPanel and SecondPanel is laid out on either side of the gutter, which starts halfway across the splitter. Drag the gutter to move the split, give it the focus and move it with the arrow keys (the whole keyboard is below), or double-click it to put the panels back where the parameters had them. A panel scrolls its own content, so neither side can push the other out of the splitter. A splitter fills whatever box it is given, so the height comes from the page around it - here, from the Style on the splitter itself.

Vertical stacks the two panels instead of placing them side by side, and the gutter becomes a horizontal bar that moves with the up and down arrow keys. Everything else reads the same way round: the panel sizes and their minimums and maximums become heights, and the first panel is the one on top.

FirstPanelSize and SecondPanelSize pin a panel to a size in pixels and let the other one take whatever is left, which is the layout of a sidebar beside a document. They are the size the splitter starts at: from the first drag on the split is held as a percentage, and a double-click on the gutter hands the layout back to them.

The four MinSize and MaxSize parameters, in pixels, are the range the gutter is held to - by the pointer, by the keyboard and by Percent alike. What one panel asks for bounds the other from the far side, so a minimum on the second panel is what keeps the first one from being dragged over it. The range is measured off the panels rather than read back from these parameters, so a minimum or maximum a stylesheet puts on a panel through Classes - as a percentage, or in any other unit - holds the gutter just as firmly.

Percent is the whole layout in one number: the share of the splitter the first panel takes up. Being a share rather than a length, it keeps its proportions while the container is resized, and being bindable it works both ways - every drag, key press and collapse reports back through @bind-Percent, and writing to it moves the gutter. It takes precedence over the two panel sizes while it has a value.

DragStep is a grid, in pixels, that the split comes to rest on: the gutter follows the pointer but lands on the nearest multiple of it rather than wherever the pointer happens to be, which is what lines a panel up with a column of a grid, a tile or a row of text. The keyboard is held to the same multiples, so both ways of moving the gutter agree on where it is allowed to stop.

A splitter lays its content out again on every frame of a drag, which is what makes the panels follow the pointer - and what a panel holding a table of thousands of rows, an editor or a chart cannot keep up with. LazyResize is the way to drag one of those: a line moves instead of the panels, and they are laid out once, where the line was left. Everything else is unchanged - the keyboard, the minimum and maximum sizes, the snap to collapse and the events all behave as they do on any other splitter.

The gutter is a tab stop of its own and behaves as the WAI-ARIA window splitter pattern asks. The arrow keys that lie along the splitter move it by KeyboardStep pixels - ten by default - and hold it inside the minimum and maximum sizes of both panels; Page Up, Page Down and an arrow key held with Shift move it ten steps at once; Home and End take it to the smallest and the largest size the panels allow; Escape abandons a drag that is under way, putting the panels back exactly as it found them. On a collapsible splitter Enter folds the first panel away and brings it back, and so does Ctrl with the arrow key that points at it or away from it. A double-click hands the layout back to the panel size parameters unless NoResetOnDoubleClick takes that away.

Collapsible lets the first panel be folded away: press Enter or Ctrl with an arrow key on the gutter, drag it close enough to the start of the splitter for it to snap shut, or press the gutter of an already folded panel to open it again - and a control on the gutter can offer the same to the pointer. CollapsedSize is the sliver it is left at: a folded panel keeps its content in the DOM and drops the minimum size it holds while it is open, so it can close past a minimum that would otherwise stop it. Collapsed is bindable, so the page always knows, and expanding puts the panel back at the size it had before it was folded rather than at some default.

Without a word on the subject, a drag closes the panel once it has taken it under half of its minimum size - or under a twentieth of the splitter, where there is no minimum. SnapSize names that distance instead: here the panel only shuts inside the first 40 pixels, so the whole of the range above it stays draggable.

CollapseSecondPanel moves all of that to the other side of the gutter, which is what an inspector, a properties pane or a preview at the far end of the splitter needs. Nothing else changes its meaning: Collapsed, CollapsedSize, SnapSize, the keys and the methods all go on describing the one panel that folds, and Percent still describes the first panel - so the split the second panel comes back to is the one it left.

ShowCollapseButton draws the fold on the gutter itself. Without it the only ways in are a key press and a drag that happens to reach the edge, neither of which a reader can see is on offer; with it the gutter says so. The chevron points at what the next press will do and turns with the orientation of the splitter and the writing direction of the page, and CollapseIconName and ExpandIconName - or CollapseIcon and ExpandIcon, for an external icon set - put something else there. It is the pointer's way to what the gutter already answers to from the keyboard, so it stays out of the tab order and out of the accessibility tree: a screen reader is handed the separator and the fold it offers once, not twice.

OnCollapsing is asked before the panel moves, with what is about to happen and what asked for it - the gutter, a drag that snapped it shut, one of the methods, or the remembered position being restored. Setting Cancel on the arguments leaves the panel exactly as it is, which is how a fold is made to wait for a confirmation or a save. The callback is awaited, and nothing else folds the panel while it is running.

Nothing has been folded yet.

A reference to the component gives the same moves to the page: SetPercent puts the gutter at a share of the splitter (clamped to 0-100, and still held to the minimum and maximum sizes of both panels), GetPercent reads the share the first panel takes up at this moment - measured off the panels, so it answers even for a split nobody has moved yet, which Percent does not hold until the first drag - ResetSize hands the layout back to the panel size parameters, Collapse, Expand and ToggleCollapse fold the collapsible panel away and back - none of them turned away by Collapsible, which is about what the reader may do to the gutter - and FocusAsync puts the keyboard on the gutter. A splitter whose Percent or Collapsed the page holds one way keeps what the page gave it: the state is the page's, and these methods do not take it back.

Nothing has been measured yet.

OnResizeStart opens a resize and exactly one of OnResizeEnd and OnResizeCancel closes it - the second of those when Escape, or the browser taking the pointer away, puts the panels back where the resize found them - so whatever a page sets aside for the duration of one always has somewhere to pick it up again. OnResize reports the resize as it happens, one call per frame of a drag and one per key press; each of the four carries the share of the splitter the first panel takes up. OnCollapsedChange reports the panel being folded away and brought back, and OnGutterDoubleClick the gutter being double-clicked, whether or not that also resets the splitter. A splitter with no handler for OnResize makes no call at all while it is being dragged, so leave it unset where only the final position matters.

No resize yet.

PersistKey has the splitter remember where the gutter was left - and whether the first panel was folded away - so the reader finds the layout they arranged the last time they were here. It is kept in the browser's local storage under that key, or in the session storage instead with PersistInSessionStorage, and the key has to be unique to the splitter within the origin: two splitters sharing one key share one position. What comes back is offered the way a drag is, so a page holding Percent or Collapsed one way keeps what it declared. Move the gutter below and reload the page.

ReadOnly is a split that is not up for negotiation: the splitter looks exactly as it does anywhere else, but the gutter cannot be dragged or moved from the keyboard. IsEnabled="false" takes the resize away too and dims the whole component with it. Both leave the gutter out of the tab order and hand it back to a screen reader as the plain rule it then is rather than as a control with a position; the public methods still work in either case.

A splitter is ordinary content, so putting one in a panel of another gives the three-pane layout of an inbox or an editor. Each of them keeps its own sizes and its own gutter.

GutterSize is the thickness of the gutter in pixels. However thin it is drawn, the strip that answers a press is widened evenly on both sides up to GutterHitSize - 24 pixels by default, and 44 wherever the pointer is a coarse one - so a hairline gutter is still something a finger can find, and none of that reaches into the layout: the panels give up no room for it. A gutter already thicker than the floor is left exactly as it is.

GutterIconName puts a built-in Fluent UI icon in the gutter in place of the default grip, which gives the reader something to aim at on a wider gutter.

GutterTemplate replaces what is drawn inside the gutter altogether. The gutter itself is the separator - the thing the pointer drags and the keyboard moves - so what goes in here is decoration: a control of its own in there would be a second tab stop on something a screen reader reports as a single separator.

Use icons from external libraries like FontAwesome and Bootstrap Icons with the GutterIcon parameter (BitIconInfo).

FontAwesome:

Bootstrap:

Style and Class dress the root element - which is where the height of a splitter is set, since it fills whatever box it is put in - while Styles and Classes reach the parts inside it: the two panels, the gutter, the icon or grip drawn in the gutter, the collapse control and its icon, and the line a lazy drag moves. A minimum or maximum a class puts on a panel holds the gutter just as firmly as the parameters do, and in any unit, because the range is measured off the panels rather than read back from C#.

Component's Style & Class:

Styles & Classes:

In a right-to-left splitter the first panel is the one on the right, and the gutter follows: dragging it to the left makes the first panel bigger, and so does the arrow key that points away from it.