// The "Red" isn't pure red. It's a gradient. Color topColor = Color.FromArgb(255, 235, 110, 110); Color bottomColor = Color.FromArgb(255, 165, 50, 50); // Draw rounded rectangle (2px radius) GraphicsPath path = GetRoundedRect(buttonRect, 2); LinearGradientBrush brush = new LinearGradientBrush(buttonRect, topColor, bottomColor, LinearGradientMode.Vertical); FillPath(path, brush);
<Button.Template> <ControlTemplate TargetType="Button"> <Grid> <Border x:Name="border" Background="{StaticResource GlassBrush}"> <Border.Effect> <BlurEffect Radius="2" /> <!-- That's the "scratch" glow --> </Border.Effect> </Border> <ContentPresenter /> </Grid> </ControlTemplate> </Button.Template> For web apps mocking a desktop environment, you cannot rely on OS defaults. You need CSS.
// Center of button is X=11, Y=11 (in 0-index) int center = 11; int offset = 4; // Draw the '' line e.Graphics.DrawLine(Pens.White, center - offset, center - offset, center + offset, center + offset); // Draw the '/' line e.Graphics.DrawLine(Pens.White, center + offset, center - offset, center - offset, center + offset); In WPF, you don't draw pixels; you draw vectors. To get that "scratch" look, you need to disable native window styling ( WindowStyle="None" ) and build the caption buttons using Path geometries. windows 7 exe buttons scratch
But how do you rebuild those from absolute scratch? Whether you are writing a custom WinForms application, a WPF control, or just a CSS experiment, recreating the Windows 7 chrome is a lesson in precision rendering.
<Path x:Name="MinimizeGlyph" Stroke="White" StrokeThickness="1.5" Data="M 5 15 L 17 15"/> // The "Red" isn't pure red
Did you try to build these buttons? Share your screenshots in the comments below!
So, fire up your IDE. Disable the default chrome. Draw your first rectangle. And for a moment, pretend your modern SSD is running an Intel Core 2 Duo. You need CSS
.win7-close-btn { width: 22px; height: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(200,220,255,0.4) 100%); border: 1px solid rgba(255,255,255,0.5); border-radius: 2px; position: relative; } .win7-close-btn:hover { background: linear-gradient(180deg, #ff8a8a 0%, #c42e2e 100%); border-color: #9b2e2e; } .win7-close-btn:hover::before { /* The white X glow */ content: "✕"; color: white; text-shadow: 0 0 4px rgba(255,255,255,0.8); } Why build these from scratch when the OS already draws them perfectly? Because customization costs control .
Don't use DrawString("X") . Fonts are never perfectly centered. Use DrawLine .
Pixel Perfect: Recreating Windows 7 EXE Buttons from Scratch Subtitle: Reverse engineering the glass, the glow, and the 1-pixel shadow. Introduction There is a specific kind of nostalgia attached to Windows 7. Before the flat, monochromatic rectangles of Windows 10 and 11, there was Aero . The "EXE buttons" (the Minimize, Maximize/Restore, and Close controls in the top-right corner) were a masterpiece of skeuomorphic design. They weren't just buttons; they were liquid, glowing, glass orbs.