---
name: ShareX-indeling editor
overview: "Een tweede editor-indeling toevoegen in de stijl van ShareX: bovenaan de bewerkgereedschappen met daaronder de eigenschappenbalk, onderaan een aparte balk met zoom en de opslag-, upload- en kopieerknoppen. De indeling is te kiezen in Instellingen (tab Editor) en via het rechtsklikmenu van de werkbalk. Uitbrengen als versie 1.1.5."
todos:
  - id: settings
    content: EditorLayout-enum, EditorLayout- en SplitToolbarOrder-instelling toevoegen aan AppSettings
    status: completed
  - id: xaml
    content: ActionBar met ActionItems (ToolbarPanel) toevoegen aan EditorWindow.xaml
    status: completed
  - id: code
    content: "Werkbalkcode ombouwen: items verdelen over twee panelen, labels/vergrendelen/verbergen/volgorde/omwisselen per paneel, menu Indeling, bijsnijden, OnActivated"
    status: completed
  - id: settingsui
    content: Radioknoppen voor de indeling in de Editor-tab van Instellingen plus herstellen naar standaard
    status: completed
  - id: version
    content: Versie 1.1.5 in csproj, build.ps1 en Kniip.iss en een CHANGELOG-regel
    status: completed
  - id: verify
    content: Bouwen en beide indelingen handmatig testen
    status: completed
isProject: false
---

# ShareX-achtige editor-indeling (versie 1.1.5)

## Indeling

- **Eén werkbalk** (standaard, zoals nu): alles in `ToolbarItems`, positie Boven/Onder/Links/Rechts blijft werken.
- **Gesplitst (zoals ShareX)**:
  - Boven, gecentreerd: Selecteren, Rechthoek ... Vervagen, Bijsnijden, met daarnaast Wissen, Ongedaan maken, Opnieuw en Verwijderen. Direct daaronder de bestaande eigenschappenbalk `PropsBar` (die al gecentreerd is).
  - Onder, boven de statusbalk: links Nieuw en Screencast, in het midden Uitzoomen / 100% / Inzoomen, rechts Instellingen, Opslaan, Uploaden en Kopiëren (met tekstlabels, want daar is ruimte).

```mermaid
flowchart TB
    topBar["Boven: gereedschappen + ongedaan maken"]
    props["Eigenschappenbalk: kleur, dikte, lijnstijl"]
    canvas["Canvas"]
    bottomBar["Onder: Nieuw, Screencast | Zoom | Instellingen, Opslaan, Uploaden, Kopiëren"]
    status["Statusbalk"]
    topBar --> props --> canvas --> bottomBar --> status
```

## Wijzigingen

**[src/Kniip/Settings/AppSettings.cs](src/Kniip/Settings/AppSettings.cs)**
- Nieuwe enum `EditorLayout { Single, Split }` en `public EditorLayout EditorLayout { get; set; } = EditorLayout.Single;`
- Aparte `List<string> SplitToolbarOrder`, zodat versleepte volgordes van beide indelingen elkaar niet overschrijven. `ToolbarHidden` blijft gedeeld.

**[src/Kniip/Editor/EditorWindow.xaml](src/Kniip/Editor/EditorWindow.xaml)**
- Een tweede `Border x:Name="ActionBar" DockPanel.Dock="Bottom"` (na de statusbalk gedeclareerd, dus erboven) met `local:ToolbarPanel x:Name="ActionItems"`, dezelfde `ContextMenuOpening`- en `OrderChanged`-handlers en standaard `Collapsed`.
- De knoppen zelf blijven op één plek in de XAML staan; de code verdeelt ze over de panelen.

**[src/Kniip/Editor/EditorWindow.xaml.cs](src/Kniip/Editor/EditorWindow.xaml.cs)** (rond regels 141-362 voor de werkbalk)
- In `InitializeToolbar` alle items één keer in een dictionary `_toolbarItems` (id naar element) vastleggen, plus een vaste set id's die in de gesplitste indeling onderaan komen: `New, Screencast, Spacer, ZoomOut, Zoom, ZoomIn, Spacer2, Settings, Save, Upload, Copy` (plus de bijbehorende scheidingslijnen).
- `ApplyToolbarOrder` ombouwen tot `ApplyToolbarLayout()`: beide panelen leegmaken en de items volgens de opgeslagen volgorde (`ToolbarOrder` of `SplitToolbarOrder`) verdelen over `ToolbarItems` en `ActionItems`. De logica voor nieuwe items die na hun standaardvoorganger komen, blijft hetzelfde. In de gesplitste indeling krijgt het bovenste paneel `HorizontalAlignment=Center`, `Toolbar` vast `Dock.Top` en wordt `ActionBar` getoond.
- Alle plekken die nu `ToolbarItems.Items` gebruiken, laten werken op beide panelen: `SelectTool` (regel 368), "Knoppen tonen", `ResetToolbar`, de vergrendeling (`IsLocked` op beide panelen, achtergrondkleur op beide balken) en `OrderChanged` (de volgorde van boven + onder samen opslaan in `SplitToolbarOrder`).
- `UpdateToolbarLayout` en `SetActionLabelsVisible` per paneel laten rekenen, zodat de labels op de onderbalk zichtbaar blijven, ook als de bovenbalk vol is. De lus op regel 236 stopt bij het `ToolbarPanel` waarin het label staat, in plaats van alleen bij `ToolbarItems`.
- `SwapToolbarGroups` werkt op het paneel waarop is rechtsgeklikt.
- Rechtsklikmenu: een nieuw submenu "Indeling" met "Eén werkbalk" en "Gesplitst (zoals ShareX)". "Positie" alleen tonen bij Eén werkbalk.
- Op regel 935, waar `Toolbar` tijdens bijsnijden wordt verborgen, ook `ActionBar` verbergen (alleen als de gesplitste indeling aanstaat).
- In `OnActivated` (regel 1508) `ApplyToolbarLayout()` aanroepen als de indeling is veranderd, zodat een wijziging in Instellingen meteen zichtbaar is in een open editor (zoals dat nu ook gebeurt met `ApplySaveButton`).

**[src/Kniip/Settings/SettingsWindow.xaml](src/Kniip/Settings/SettingsWindow.xaml) en [.xaml.cs](src/Kniip/Settings/SettingsWindow.xaml.cs)**
- In de tab Editor (regel 252) een kopje "Werkbalk" met twee radioknoppen `LayoutSingleRadio` / `LayoutSplitRadio` en een korte uitleg, op dezelfde manier geladen en opgeslagen als `SaveOnlyRadio` / `SaveAndCopyRadio`.
- Bij het herstellen van de standaardinstellingen (regel 466) ook `EditorLayout` en `SplitToolbarOrder` meenemen.

**Versie 1.1.5**
- `<Version>1.1.5</Version>` in [src/Kniip/Kniip.csproj](src/Kniip/Kniip.csproj), de standaardwaarde in [build.ps1](build.ps1) (regel 16) en `#define AppVersion` in [installer/Kniip.iss](installer/Kniip.iss).
- In [CHANGELOG.md](CHANGELOG.md) bovenaan `## 1.1.5 - 2026-11-09`, onder `### Nieuw`: **Werkbalkindeling zoals ShareX.**

## Controle
- Bouwen met `build.ps1`, daarna beide indelingen uitproberen: wisselen via Instellingen en via het rechtsklikmenu, knoppen verslepen en verbergen, bijsnijden, een smal venster (de balken moeten netjes doorlopen naar een nieuwe regel) en "Standaard herstellen".