Visitar URL original
Feature: Re-design user interface by BornToBeRoot · Pull Request #3702 · BornToBeRoot/NETworkManager · GitHub
Skip to content

Feature: Re-design user interface - #3702

Open
BornToBeRoot wants to merge 180 commits into
mainfrom
feature/design-refresh
Open

BornToBeRoot wants to merge 180 commits into
mainfrom
feature/design-refresh

Conversation

@BornToBeRoot

Copy link
Copy Markdown
Owner

Description

Complete re-design of the userinterface.

See commits.

Related issue

#3609

Close #3055

Type of change

  • 🐛 Bug fix
  • ✨ New feature / improvement
  • 📖 Documentation / website
  • 🧹 Refactoring / maintenance (no functional change)
  • Design

BornToBeRoot and others added 30 commits November 9, 2026 22:46
MahApps draws DisabledVisualElement over a disabled ComboBox, TextBox,
PasswordBox and NumericUpDown, filled with MahApps.Brushes.Control.Disabled
(#A5FFFFFF in every theme) - a light gray veil, worst in the dark theme
(e.g. inputs disabled while a scan runs). The default styles hide the
overlay (brush transparent in Style.Resources, also for custom themes)
and set Opacity 0.55 instead, like DisabledTextBlock and the MahApps
DropDownButton.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DefaultButton (and HighlightedButton, ImageButton, ... based on it) set
the background to Gray8 when disabled, a highlighted button lost its
accent and MahApps Flat set the text to Gray2. Keep background and
foreground and dim the button (Opacity 0.55), like the inputs (D1.1).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…oBox (D1.3)

The title bar ComboBox overrode MahApps.Brushes.Control.Disabled with
Gray8 to soften the overlay. DefaultComboBox now hides the overlay and
dims the control (D1.1), the override would bring the gray veil back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
AppearanceManager sets Brushes.Control.MouseOver / Brushes.Control.Pressed
on every theme change (also custom themes): the theme foreground with
8 % / 12 % opacity. DefaultButton uses them instead of Gray10 / Gray9
(Gray9 = #5EC9C9C9, a light gray when a button is clicked in the dark
theme).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Not editable: mouse over uses Brushes.Control.MouseOver instead of Gray9
(style trigger, wins over the template trigger). The drop-down toggle
(copy of MahApps.Styles.ToggleButton.ComboBoxDropDown 2.4.11 in the
Style.Resources of DefaultComboBox) uses the subtle brushes instead of
Gray5 (arrow mouse over), Gray3 / Gray7 (pressed).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…g (D1.8)

About 25 inputs set IsReadOnly="{Binding IsRunning}" (IP Scanner, Port
Scanner, Ping Monitor, Traceroute, DNS Lookup, SNMP, Whois, ...).
IsReadOnly only blocks typing: the history could still be selected via
the drop-down, Up/Down, Page Up/Down, F4 or Alt+Up/Down, and on a
non-editable ComboBox (SNMP version / mode) it had no effect at all.

New ComboBoxReadOnlyBehavior (enabled in DefaultComboBox) blocks these
keys and typing to select (not editable) while read-only and closes the
drop-down if it is opened anyway. The drop-down toggle is not hit-test
visible while read-only (arrow dimmed), the mouse over background is
not shown. The ComboBox keeps the focus, the text can be selected and
copied; Tab, Enter and Esc (cancel) still work.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…boBox (D1.8)

An editable ComboBox selects the next / previous entry in its own
OnPreviewKeyDown, which runs before handlers added to the instance.
Block the keys in a class handler of ComboBox (runs before it), only for
ComboBoxes with PreventSelectionWhenReadOnly.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
AppearanceManager sets Brushes.Status.Success / Warning / Error on every
theme change (also custom themes, by their base color scheme). Dark
keeps the colors of the application (#badc58, #f1b856, #b95353), light
uses a darker green (#558b16) and orange (#b06d00) - the old ones had a
contrast of 1.6:1 / 1.8:1 on white. Error stays #b95353 (4.75:1 / 3.2:1).

Replaces the hard-coded colors in the styles (status / help rectangles,
error text), the validation template, the views (IP Scanner, Port
Scanner, Ping Monitor, WiFi, Firewall, profile import, language, run
command), the close button / menu item of the main window and the
notification window. Chart / map colors are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ack (D2.2)

New Resources/Styles/Theme.xaml (theme-independent design resources,
merged before the styles) with Fonts.Family.Mono = "Cascadia Mono,
Consolas": Cascadia Mono ships with Windows 11, Windows 10 falls back to
Consolas. Used instead of the hard-coded Consolas (ConsoleTextBlock,
ConsoleTextBox, run command, Network Interface). The fonts of PowerShell
and PuTTY (console settings) are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ds (D2.3)

IP / MAC addresses, hostnames, ports, BSSID, OIDs, servers, subnets,
DNS records and RDAP ranges / digests use Fonts.Family.Mono (Cascadia
Mono, Consolas) in the grids of IP Scanner, Port Scanner, Traceroute,
DNS Lookup, SNTP Lookup, WiFi, Connections, Listeners, Neighbor Table,
Firewall, Hosts File Editor, Subnet Calculator, Lookup, SNMP, RDAP,
profiles, profile import result and the settings (DNS / SNTP servers,
port profiles, OID profiles). Names, descriptions, vendors, states and
times stay in the UI font.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Inputs for hosts, IP / MAC addresses, subnets, gateways, DNS servers,
ports, servers, OIDs, URLs and DNS suffixes use Fonts.Family.Mono -
every input whose watermark is such an example (StaticStrings.Example*)
in the tools, connect dialogs, profile / group dialogs and settings,
plus the RDAP query, the SNMP OID and the Whois domain. Usernames,
domains of credentials, paths, names, SSIDs and baud rates stay in the
UI font. Raw output of Whois and RDAP (JSON) uses it too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Network Interface (MAC, IPv4 / IPv6 addresses, gateways, DHCP and DNS
servers, CIDR), Dashboard network connection (IPv4 / IPv6 / DNS of
computer, router, internet), Subnet Calculator results (calculator and
wide subnet), Discovery Protocol (port, IP address, management), IP
Geolocation (queried IP) and WiFi BSSID (details, channel tooltip) use
Fonts.Family.Mono.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Inputs without a technical watermark that were missed: Web Console URL,
DNS server of DNS Lookup (tool, profile, group), SNMP OID (profile,
group, OID profile), LDAP server of the AD import, DNS suffix of Network
Interface, server / port of the server profile dialog, the IP addresses
of the Dashboard widgets (IP geolocation, DNS resolver). Credential
domains (Windows, Remote Desktop, WiFi, RD gateway) and the interface
name of Discovery Protocol stay in the UI font.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Theme.xaml: CornerRadius.Control (4), CornerRadius.Control.Inner (3,
element inside a 1 px border) and CornerRadius.Overlay (8, menus).
DefaultButton (and all buttons based on it), DropDownButton (+ inner
button), ComboBox, TextBox, BrowseFolderTextBox, PasswordBox and
NumericUpDown use mah:ControlsHelper.CornerRadius = 4. The search box
(underline only) stays square.

The mouse over background of the ComboBox arrow (Border instead of Grid)
and the validation error triangle follow the rounded top / right corner.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…s (D3.3)

TextBox (default, search, browse folder), ComboBox, PasswordBox and
NumericUpDown: the border is the accent color while the input has the
focus (was Gray8 = no change, or the theme foreground in MahApps) and
Brushes.Control.Border.MouseOver (theme foreground with 35 % opacity,
set by AppearanceManager) when the mouse is over it (was white / black
for ComboBox, TextBox).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
FocusVisual.Ring (Theme.xaml): 2 px accent ring with a 1 px gap around
the control, rounded like the controls. Used by DefaultButton (instead
of the dotted rectangle of MahApps Flat), the DropDownButton and as
system default focus visual (SystemParameters.FocusVisualStyleKey) for
the controls that use it (e.g. RadioButton, list items, clean buttons
of the main window). Only shown for keyboard focus (Tab).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
DefaultToolTip uses the MahApps template (2.4.11) with
CornerRadius.Control (4), WrapToolTip (help / warning / error) too.
DefaultContextMenu (all context menus and the menus of the drop-down
buttons) uses the MahApps template with CornerRadius.Overlay (8) for the
border and the shadow, and a padding of 4 above / below the items.
Submenus and the drop-down list of the ComboBox keep the square popup
of MahApps (would need a copy of the MenuItem / ComboBox template).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tooltip (D3.5)

Hard-coded radii (2: tables in help tooltips, 3: navigation tooltip and
run command chips, 5: tags in the profile dialog) use
CornerRadius.Control (4) like the controls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…g (D3)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Primary (HighlightedButton): accent fill, unchanged.
- Secondary (DefaultButton, ImageWithTextButton): subtle fill instead of
  a 1 px Gray8 border (Brushes.Button.Background / MouseOver / Pressed,
  theme foreground with 6 / 10 / 14 % opacity, set by AppearanceManager).
  MinWidth 150 -> 100 (padding 10 of MahApps Flat).
- Icon-only (ImageButton, DropDownButton): transparent without border,
  Brushes.Control.MouseOver / Pressed on mouse over / click. The inner
  button of the drop-down button uses the full corner radius (no outer
  border anymore).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
FocusVisual.Ring uses Gray5 - the accent color was too prominent.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The padding of 4 above / below the items looked like empty space. Without padding the square highlight of the first / last item would stick out of a radius of 8, the menu uses CornerRadius.Control (4) like the tooltips.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Chart tooltips (bandwidth, ping time, speed test, WiFi channel) and
  the validation error popup: CornerRadius.Control (4), the popup of the
  validation error allows transparency (no black corners).
- Profile filter (tags) popup in the tools and in the profiles settings:
  AllowsTransparency + CornerRadius.Overlay (8).
- Title bar "Run command..." box and the key hints of the run command
  dialog: CornerRadius.Control.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
TextBox (default, search, browse folder), ComboBox, PasswordBox and NumericUpDown use Gray5 while they have the focus, like the keyboard focus ring (D3.4).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The scrollbar went from 25 % to 100 % opacity on mouse over and the
MahApps thumb (Gray5) got a white overlay of 60 % (mouse over) / 80 %
(drag) - almost white in the dark theme. Mouse over now 60 % opacity,
own thumb style (MahApps.Styles.Thumb.ScrollBar in the Style.Resources,
used by the MahApps template via DynamicResource): rounded
(CornerRadius.Control), 80 % opacity, 100 % on mouse over / drag, no
overlay.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
BornToBeRoot and others added 23 commits November 10, 2026 23:17
…icrosoft Store

User: the PowerShell profile isn't updated with the path
...\AppData\Local\Microsoft\WindowsApps\Microsoft.PowerShell_8wekyb3d8bbwe\pwsh.exe.
The console (conhost) reads its settings from HKCU\Console\<title>, the
title is the path of the started executable. This path is an App
Execution Alias of the Store app, which starts the real executable in
C:\Program Files\WindowsApps\Microsoft.PowerShell_7.x.x.0_x64__8wekyb3d8bbwe\pwsh.exe
- the key written for the alias is not used. The workaround of #3223
only handles the general alias ...\WindowsApps\pwsh.exe.

PowerShell.WriteDefaultProfileToRegistry now also writes the profile for
the real path of an alias (any path in %LocalAppData%\Microsoft\WindowsApps):
resolved once per start of the application by starting the alias with
"(Get-Process -Id $PID).Path" (the real path contains the version and
changes with updates, so it is not saved), cached. The host view model
writes the profile in the background (the alias start takes a moment).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ft Store

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The library was removed in acf231c (own progress styles), but its license file was
still copied to the output and shipped.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The icons of the application come from five MahApps icon packs (Material, Modern,
FontAwesome, MaterialLight, Octicons) with different styles. They will be replaced by
Lucide (https://lucide.dev), modern line icons with one stroke weight. The Lucide pack of
MahApps is older and has the strokes converted to fixed filled shapes, so the original
SVG files are imported instead:

- Scripts/Create-LucideIcons.ps1 downloads lucide-static (npm, version as parameter),
  converts the used icons (path, circle, rect, line, polyline, polygon, ellipse) to one
  WPF path geometry each and creates LucideIcons.cs (enum LucideIconKind + data). Custom
  icons: Wi-Fi signal levels with lock from the parts of wifi-lock, GitHub / X logos from
  Simple Icons (CC0, Lucide has no brand icons). It also copies the license.
- LucideIcon (NETworkManager.Controls) draws the lines with a pen (round caps / joins,
  default 1.75 instead of 2 units, calmer at 16 px) in the foreground, scaled from 24 x 24.
  The whole box is part of the drawing, so every icon has the same size and position in a
  VisualBrush (opacity mask of a rectangle, used everywhere). {icons:Lucide Kind=...}
  creates it in XAML like {iconPacks:Material Kind=...}.
- License: ISC (incl. MIT for the icons derived from Feather), shipped as
  Licenses/Lucide.txt, listed on the About page and in the README.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The 166 icons of five MahApps icon packs (Material, Modern, FontAwesome, MaterialLight,
Octicons) are replaced by 129 Lucide icons in one style (lines, stroke 1.75): tools in
the navigation, run command, settings, profiles, toolbars, context menus, messages and
status icons. Mapping reviewed by the maintainer, e.g. Port Scanner scan-line (Network
Interface keeps ethernet-port), Ping Monitor radar, Traceroute route, Firewall
brick-wall-fire; Windows (no brand icons in Lucide) app-window. Wi-Fi signal: Lucide has
four levels, 0 and 1 bar both show wifi-zero.

XAML uses {icons:Lucide Kind=...} (xmlns:icons = NETworkManager.Controls) instead of
{iconPacks:... Kind=...}, C# LucideIcon / LucideIconKind. NETworkManager.Models references
NETworkManager.Controls for the icons of the tools (ApplicationManager). The packages
MahApps.Metro.IconPacks.* are removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The icon packs are no longer used (all icons from Lucide): library entry, license file,
description string and README entry removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The icons come from Lucide only: how to use them in XAML / C#, how to add an icon
(Create-LucideIcons.ps1) and the icon names of the context menu actions.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The design refresh introduced themes / accents, theme-dependent brushes, fonts, corner
radii, the box layout, button / input / progress styles, Lucide icons and motion rules.
AGENTS.md now describes them (replaces the short "UI Theming" section), so new UI uses
the existing tokens and styles instead of local values.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The open port status (IP Scanner port details, Port Scanner) used the same old icon as
the Port Scanner tool and became scan-line, the tool icon. A port is ethernet-port
(closed stays unplug); the "Open in Port Scanner" menu items keep the tool icon.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…state (D10.1)

Status values in lists were plain or colored text. A small dot in the status color with
the text in the normal color is easy to scan and stays calm in long lists (user
decision: dot + text instead of tinted chips):

- Firewall Action: allow green, block red (was the colored text).
- Connections State: established green, connecting (SYN sent / received) yellow, others
  gray.
- Neighbor Table State: reachable green, stale / delay / probe yellow, incomplete /
  unreachable red, permanent gray.

Style StatusDot (Ellipse, level as Tag) + StatusLevel and one converter per state type.
Template columns keep the text for copying (ClipboardContentBinding). The Port Scanner
already has a status icon column, so its status stays text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Empty areas only showed a centered gray text. They now show a gray icon (40) above the
existing message (user decision: icon + message, no new texts / translations):
no firewall rules (brick-wall-fire), no Wi-Fi networks / adapters (wifi-off, new icon),
no enabled network adapters (ethernet-port), Discovery Protocol before / without
packets (arrow-left-right), path of PuTTY / PowerShell / TigerVNC not configured
(settings), WebView2 / Windows SDK not available and profile file errors
(circle-alert), Wi-Fi access not available (shield-off). The "restart as administrator"
notices below the lists get a smaller shield (24).

EmptyStateMessage (NETworkManager.Controls: Text, Icon, IconSize) with the implicit style
DefaultEmptyStateMessage (TextBlockStyles.xaml, text like MessageTextBlock). Status lines,
loading texts and the "add a tab" / "unlock" buttons are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Up and down used cable and unplug (no matching pair), pending the same cable as up (only
the color differed). Hosts now use one set (user decision): monitor-check (up),
monitor-x (down), monitor-dot (pending) - IP Scanner status column, Ping Monitor hosts
and the notification. Mixed up / down notifications keep network. cable is no longer
used and removed from the imported icons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The error color #b95353 was the same in both themes. With the thin Lucide lines, error
icons on dark backgrounds (e.g. the validation of the run command) were hard to read,
while the green and yellow are bright. Dark themes now use #e5605a (about as bright as
the other status colors there), light themes keep #b95353.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The MahApps icons were stretched to their outline, so a plus filled its 16 px rectangle.
Lucide keeps the 24 box: the plus (14 units), X and chevrons (12 units) looked clearly
smaller than before and than the other icons (about 20 units), e.g. the "+" to add a
profile (user). LucideIcon draws these icons in a box of 19.2 units, so they look like
20 px in a 16 px rectangle (user decision: larger, not thicker). No layout changes, the
Wi-Fi levels keep their positions.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The "restart as administrator" notices below the lists (Firewall, Hosts File Editor,
Neighbor Table, Network Interface, Discovery Protocol) and the group boxes (Network
Interface configuration, profile dialog, Remote Desktop settings) still had square
corners and the old Gray8 border. They use the card radius (8) like the boxes, the
group boxes the surface border.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The vertical "Profiles" label was still 18 (old header size).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…her messages (D7)

They used the header style in gray (16 SemiBold), the other messages in empty areas
use MessageTextBlock (16 regular gray).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Separators, tab / grid header / splitter lines, popups, tooltips, dialog and chart
borders still used MahApps Gray8 (112 places), the boxes and cards Brushes.Surface.Border
(foreground 10 %). They now all use Brushes.Surface.Border, also the submenus (set by
AppearanceManager) and the chart separators (user decision: unify). Borders of inputs,
check boxes and radio buttons keep Gray8 (more contrast for controls), as do the window
glow, the tag background and the command line window.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
They still had their own style: a full gray overlay (Gray8) and a square dialog. They use
DefaultChildWindow now (rounded with shadow, the usual dark overlay, zoom animation), 650
wide without title bar as before (user decision).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings November 10, 2026 23:48
@github-actions github-actions Bot added this to the next-release milestone Nov 10, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

@mergify

mergify Bot commented Nov 10, 2026

Copy link
Copy Markdown
Contributor

Tick the box to add this pull request to the merge queue (same as @mergifyio queue). If it does not match the queue conditions yet, it enters the queue once it does.

  • Queue this pull request

@BornToBeRoot BornToBeRoot changed the title Feature: Re-design / refresh User Interface Feature: Re-design user interface Nov 10, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragablz / Adjustable max tab width

2 participants