Getting Started

Getting Started

This guide walks you through running the IDE and embedding the HexEditor control in your own project.

---

Option A — Run the Full IDE

1. Clone

git clone https://github.com/abbaye/WpfHexEditorIDE.git

2. Open in Visual Studio 2022+

Open WpfHexEditorControl.sln.

3. Set Startup Project

Right-click WpfHexEditor.App → Set as Startup Project.

4. Run

Press F5. The IDE opens with the Welcome Panel.

flowchart LR
    Clone["git clone"] --> Open["Open .sln\nVisual Studio 2022"]
    Open --> Startup["Set WpfHexEditor.App\nas Startup Project"]
    Startup --> Run["F5 → IDE launches"]
    Run --> Welcome["Welcome Panel\nwith recent files and changelog"]

Loading

---

IDE Quick Tour

Open a File

File → Open File (Ctrl+O) or drag any binary file onto the editor area.

The IDE auto-detects the format from 400+ .whfmt definitions and routes it to the best editor:

• Binary / unknown → Hex Editor
• JSON / XML / source code → Code Editor
• .xaml files → XAML Visual Designer (split-pane: code + live canvas)
• Image (PNG, BMP, JPEG…) → Image Viewer
• ZIP / archive → Structure Editor

Open a Project

File → Open Project / Solution supports:

• .whsln / .whproj — native WpfHexEditor format
• .sln / .csproj — Visual Studio solutions (via SolutionLoader.VS)
• Any folder → creates a .whfolder marker (open-folder mode)

The Solution Explorer populates with the project tree. You can also drag files directly onto the IDE.

Create a New File

File → New File → choose a template (Binary, TBL, JSON, XAML, Text).

---

IDE Layout

┌────────────────────────────────────────────────────────────────┐
│  Menu bar  │  Toolbar  │                               │ Status │
├────────────┴───────────┴───────────────────────────────┴───────┤
│ Solution   │                                                     │
│ Explorer   │           Document / Editor Area                    │
│  (left)    │         (tabs, floating windows)                    │
│            │                                                     │
├────────────┤─────────────────────────────────────────────────────┤
│ Properties │    Terminal / Output / Error / Plugin panels        │
│  (bottom)  │              (bottom dock group)                    │
└────────────┴─────────────────────────────────────────────────────┘

All panels can be dragged, floated, auto-hidden, or tabbed anywhere in the layout.

---

Key Shortcuts

Shortcut	Action
Ctrl+O	Open file
Ctrl+S	Save active file
Ctrl+Z / Ctrl+Y	Undo / Redo
Ctrl+Shift+Z	Redo (alternate)
Ctrl+F	Quick search bar (inline)
Ctrl+Shift+F	Advanced search dialog
Ctrl+``	Toggle terminal
F4	Toggle Properties panel
Ctrl+Shift+P	Plugin Manager
Ctrl+Shift+B	Build solution
F7	Toggle Code/Design view (XAML Designer)
Ctrl+1/2/3	XAML Designer zoom levels
Ctrl+Shift+L	Cycle XAML Designer layout modes
Alt+Drag	Rect selection (Code Editor / Text Editor)
Ctrl+Click	Go-to-definition (Code Editor)

---

Option B — Embed the HexEditor Control

1. Add Project References

<ItemGroup>
  <ProjectReference Include="..\WpfHexEditor.Core\WpfHexEditor.Core.csproj" />
  <ProjectReference Include="..\WpfHexEditor.HexEditor\WpfHexEditor.HexEditor.csproj" />
</ItemGroup>

2. Add to XAML

<Window xmlns:hex="clr-namespace:WpfHexEditor.HexEditor;assembly=WpfHexEditor.HexEditor">
  <hex:HexEditor x:Name="HexEdit" FileName="data.bin" />
</Window>

3. Code-Behind Basics

// Open file
HexEdit.FileName = @"C:\data\myfile.bin";

// Read a byte
byte value = HexEdit.GetByte(0x100);

// Modify a byte
HexEdit.ModifyByte(0xFF, 0x100);

// Save
HexEdit.Save();

// Undo
if (HexEdit.CanUndo) HexEdit.Undo();

4. Async Open (large files)

var progress = new Progress<double>(p => progressBar.Value = p);
await HexEdit.OpenAsync("large.bin", progress);

---

Write Your First Plugin

1. Create a class library targeting net8.0-windows

dotnet new classlib -n MyPlugin -f net8.0-windows

2. Reference the SDK

<ProjectReference Include="..\WpfHexEditor.SDK\WpfHexEditor.SDK.csproj" />

3. Implement the plugin

using WpfHexEditor.SDK;

public class MyPlugin : IWpfHexEditorPluginV2
{
    public string Id          => "com.example.myplugin";
    public string Name        => "My Plugin";
    public string Version     => "1.0.0";
    public string? Description => "My first plugin";
    public int    LoadPriority => 50;

    private IIDEHostContext? _ctx;

    public void Init(IIDEHostContext context)
    {
        _ctx = context;
        context.UIRegistry.RegisterPanel("my-panel", "My Panel", () => new MyPanelView());
        context.OutputService.WriteLine("My Plugin loaded.");
    }

    public void Activate()   => _ctx?.UIRegistry.ShowDockablePanel("my-panel");
    public void Deactivate() => _ctx?.UIRegistry.HideDockablePanel("my-panel");
    public void Dispose()    { }
}

4. Create manifest.json

{
  "id":           "com.example.myplugin",
  "name":         "My Plugin",
  "version":      "1.0.0",
  "entryPoint":   "MyPlugin.dll",
  "loadPriority": 50
}

5. Copy to plugin folder and run

Copy the output folder to %AppData%\WpfHexEditor\Plugins\com.example.myplugin\ and restart the IDE.

👉 See Plugin System for full packaging with whxpack CLI.

---

Use the Terminal

Open the terminal (Ctrl+`` ) and try:

help                        # list all commands
list-files                  # list files in current directory
open-file C:\data\test.bin  # open a file
search DE AD BE EF          # search in active HexEditor
read-hex 0x0 16             # read 16 bytes at offset 0
plugin-list                 # list loaded plugins
status                      # IDE status summary

👉 See Terminal for the full command reference.

---

Use the XAML Designer

1. Open a .xaml file — the IDE auto-routes to the XAML Designer
2. The split-pane shows: code editor (one side) + live canvas (other side)
3. Edit code → canvas updates in real-time (150 ms debounce)
4. Drag/resize elements on canvas → code updates automatically
5. Toggle views: F7 (code only / split / design only)
6. Change layout: Ctrl+Shift+L cycles through 4 split modes
7. Undo/Redo: Ctrl+Z / Ctrl+Y — up to 200 steps

---

Next Steps

• Architecture — understand how the IDE is built
• Plugin System — build and package plugins
• Terminal — commands, scripting, plugin API
• Plugin Monitoring — monitor plugin performance
• API Reference — complete HexEditor control API
• FAQ — common questions and troubleshooting