I’m being very very bit picky here but I’ve been trying to add an icon to the menu bar that matches the NT icons without compromise. I will refer to the Sample document: ‘SampleWPFModifications’ here:
First here is a zoomed in view of an existing NT icon next to the sample above.
The NT icon is 16x16px, and renders crisp. The sample on the right is irregular size and doesn’t render crisp. (doesn’t look good imo)
The anti-aliasing and rendering can be fixed by creating geometry co-ords that align to pixels. Like this example I made in Illustrator. This is exactly 16x16, every co-ord snapped to a pixel.
And then code:
private void QM_MenuIcon()
{
Geometry menuIcon = Geometry.Parse(
"M15,1v14H1V1h14M16,0H0v16h16V0h0Z" +
"M8,4.5c1.9,0,3.5,1.6,3.5,3.5s-1.6,3.5-3.5,3.5-3.5-1.6-3.5-3.5,1.6-3.5,3.5-3.5M8,3.5c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5,4.5-2,4.5-4.5-2-4.5-4.5-4.5h0Z"
);
Print($"Geometry Bounds: {menuIcon.Bounds.Width} x {menuIcon.Bounds.Height}");
// Prints: Geometry Bounds: 16 x 16
MyMenu = new NTMenuItem
{
Name = "MyMenu",
Icon = menuIcon,
Style = mainMenuItemStyle,
Margin = new Thickness(0, 0, 0, 0),
};
}
The result:
For some reason, the icon is being forced to render at 15x15px, even though the geometry is 16x16 as confirmed by the print. I cannot work out why this happens, it makes me think the method I’m using (similar to sampleWPFModifications) is incorrect.
Setting a specific width/height of 16x16 on the NTMenuItem reveals some clipping box:
You can use RenderTransformto size up 15x15 → 16x16 like this:
RenderTransform = new ScaleTransform(1.067, 1.067),
And the icon renders at 16x16, but slightly blurry and shifted a little:
To fix the blurriness, add SnapsToDevicePixels = true. That fixes the sharpness, but then introduces a misalignment by 1px. Then To fix that you add a margin adjustment or use RenderTransformOrigin and then this looks perfect by default but then starts to create all kinds of weird pixel shifts on hover and pressed states and when you test on displays which use OS scaling (like 125% for example, there’s other issues present and they are magnified)…too many to list here. I’ve tried adding even handlers for each mouse state but it seems like the RenderTransform creates a bunch of inconsistencies between states. All minor, but the simple question is;
How do you get a simple 16 x 16 px icon geometry to render at 16 x 16 in the NT ToolBar just like the NT icons, without any hacks?
