Introduction
Making a WPF application look Metro-styled (the flat, content-focused design language from Windows 8/10) on Windows 7 requires replacing the default window chrome with a custom one, applying flat styles to all controls, and using a consistent color palette with clean typography. The two main approaches are using a UI toolkit like MahApps.Metro (recommended) or building custom styles and templates manually. Both approaches work across Windows 7, 8, 10, and 11.
Using MahApps.Metro (Recommended)
MahApps.Metro is the most popular open-source toolkit for Metro-styled WPF applications:
# Install via NuGet
Install-Package MahApps.Metro
Basic Setup
1<!-- App.xaml -->
2<Application x:Class="MyApp.App"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
5 <Application.Resources>
6 <ResourceDictionary>
7 <ResourceDictionary.MergedDictionaries>
8 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
9 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
10 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
11 </ResourceDictionary.MergedDictionaries>
12 </ResourceDictionary>
13 </Application.Resources>
14</Application>
1<!-- MainWindow.xaml -->
2<mah:MetroWindow x:Class="MyApp.MainWindow"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
6 Title="My Metro App"
7 Width="800" Height="600">
8 <Grid>
9 <TextBlock Text="Hello Metro!" FontSize="24" Margin="20" />
10 </Grid>
11</mah:MetroWindow>
1// MainWindow.xaml.cs
2using MahApps.Metro.Controls;
3
4public partial class MainWindow : MetroWindow
5{
6 public MainWindow()
7 {
8 InitializeComponent();
9 }
10}
Change the base class from Window to MetroWindow. This replaces the default Windows chrome with a flat, borderless design.
Manual Custom Window Chrome
If you prefer not to use a third-party library, create a custom chrome by removing the default window border:
1<Window x:Class="MyApp.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 WindowStyle="None"
4 AllowsTransparency="True"
5 Background="Transparent"
6 ResizeMode="CanResizeWithGrip">
7
8 <Border Background="White" BorderBrush="#2196F3" BorderThickness="1"
9 CornerRadius="0">
10 <Grid>
11 <Grid.RowDefinitions>
12 <RowDefinition Height="32" /> <!-- Title bar -->
13 <RowDefinition Height="*" /> <!-- Content -->
14 </Grid.RowDefinitions>
15
16 <!-- Custom title bar -->
17 <Grid Grid.Row="0" Background="#2196F3" MouseLeftButtonDown="TitleBar_MouseDown">
18 <TextBlock Text="My App" Foreground="White"
19 VerticalAlignment="Center" Margin="10,0" FontSize="14" />
20 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
21 <Button Content="" Click="Minimize_Click"
22 Style="{StaticResource ChromeButton}" />
23 <Button Content="" Click="Maximize_Click"
24 Style="{StaticResource ChromeButton}" />
25 <Button Content="" Click="Close_Click"
26 Style="{StaticResource CloseButton}" />
27 </StackPanel>
28 </Grid>
29
30 <!-- App content -->
31 <ContentPresenter Grid.Row="1" />
32 </Grid>
33 </Border>
34</Window>
1private void TitleBar_MouseDown(object sender, MouseButtonEventArgs e)
2{
3 if (e.ClickCount == 2)
4 MaximizeRestore();
5 else
6 DragMove();
7}
8
9private void Minimize_Click(object sender, RoutedEventArgs e) =>
10 WindowState = WindowState.Minimized;
11
12private void Maximize_Click(object sender, RoutedEventArgs e) =>
13 MaximizeRestore();
14
15private void Close_Click(object sender, RoutedEventArgs e) =>
16 Close();
17
18private void MaximizeRestore()
19{
20 WindowState = WindowState == WindowState.Maximized
21 ? WindowState.Normal
22 : WindowState.Maximized;
23}
Flat Control Styles
Define flat styles for standard WPF controls in a ResourceDictionary:
1<!-- Styles/MetroStyles.xaml -->
2<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
3
4 <!-- Flat Button -->
5 <Style x:Key="MetroButton" TargetType="Button">
6 <Setter Property="Background" Value="#2196F3" />
7 <Setter Property="Foreground" Value="White" />
8 <Setter Property="BorderThickness" Value="0" />
9 <Setter Property="Padding" Value="16,8" />
10 <Setter Property="FontSize" Value="14" />
11 <Setter Property="Cursor" Value="Hand" />
12 <Setter Property="Template">
13 <Setter.Value>
14 <ControlTemplate TargetType="Button">
15 <Border Background="{TemplateBinding Background}"
16 Padding="{TemplateBinding Padding}">
17 <ContentPresenter HorizontalAlignment="Center"
18 VerticalAlignment="Center" />
19 </Border>
20 <ControlTemplate.Triggers>
21 <Trigger Property="IsMouseOver" Value="True">
22 <Setter Property="Background" Value="#1976D2" />
23 </Trigger>
24 <Trigger Property="IsPressed" Value="True">
25 <Setter Property="Background" Value="#0D47A1" />
26 </Trigger>
27 </ControlTemplate.Triggers>
28 </ControlTemplate>
29 </Setter.Value>
30 </Setter>
31 </Style>
32
33 <!-- Flat TextBox -->
34 <Style x:Key="MetroTextBox" TargetType="TextBox">
35 <Setter Property="BorderBrush" Value="#BDBDBD" />
36 <Setter Property="BorderThickness" Value="0,0,0,2" />
37 <Setter Property="Padding" Value="4,8" />
38 <Setter Property="FontSize" Value="14" />
39 <Setter Property="Background" Value="Transparent" />
40 <Style.Triggers>
41 <Trigger Property="IsFocused" Value="True">
42 <Setter Property="BorderBrush" Value="#2196F3" />
43 </Trigger>
44 </Style.Triggers>
45 </Style>
46</ResourceDictionary>
Color Palette and Typography
Metro design relies on a limited color palette and clean fonts:
1<ResourceDictionary>
2 <!-- Accent colors -->
3 <Color x:Key="AccentColor">#2196F3</Color>
4 <Color x:Key="AccentDarkColor">#1565C0</Color>
5
6 <!-- Neutral colors -->
7 <Color x:Key="BackgroundColor">#FFFFFF</Color>
8 <Color x:Key="SurfaceColor">#F5F5F5</Color>
9 <Color x:Key="TextPrimaryColor">#212121</Color>
10 <Color x:Key="TextSecondaryColor">#757575</Color>
11
12 <!-- Typography -->
13 <FontFamily x:Key="MetroFont">Segoe UI</FontFamily>
14
15 <Style x:Key="HeaderText" TargetType="TextBlock">
16 <Setter Property="FontFamily" Value="{StaticResource MetroFont}" />
17 <Setter Property="FontSize" Value="28" />
18 <Setter Property="FontWeight" Value="Light" />
19 <Setter Property="Foreground" Value="{StaticResource TextPrimary}" />
20 </Style>
21</ResourceDictionary>
Besides MahApps.Metro, other options include:
MaterialDesignInXamlToolkit: Google Material Design for WPF (works on Windows 7+)
HandyControl: Comprehensive WPF control library with modern styling
ModernWpf: Windows 10/11 native look for WPF (uses WinUI styles)
1# Install alternatives via NuGet
2Install-Package MaterialDesignThemes
3Install-Package HandyControl
4Install-Package ModernWpfUI
Common Pitfalls
Window resizing breaks with WindowStyle="None": Custom chrome removes the built-in resize borders. Use ResizeMode="CanResizeWithGrip" or implement resize handles with WindowChrome from System.Windows.Shell.
Aero Snap does not work: Setting AllowsTransparency="True" disables Aero Snap on Windows 7. Use WindowChrome instead of AllowsTransparency to keep native window management features.
Hardcoded colors instead of resources: Scattering hex colors across XAML files makes theme changes painful. Define all colors in a ResourceDictionary and reference them with {StaticResource}.
Ignoring DPI scaling: Metro UIs look wrong on high-DPI displays if you use pixel sizes. Use Per-Monitor DPI Awareness in the app manifest and test at 125%, 150%, and 200% scaling.
Overriding all default styles globally: Applying styles as implicit (no x:Key) changes every control in the app, including third-party controls. Use explicit x:Key styles and apply them selectively to avoid breaking library controls.
Summary
Use MahApps.Metro for a production-ready Metro look with minimal effort
For manual theming, remove default chrome with WindowStyle="None" and build a custom title bar
Define flat control templates for buttons, text boxes, and other controls in ResourceDictionary
Use Segoe UI font, limited color palettes, and content-focused layouts
Use WindowChrome instead of AllowsTransparency to preserve native window management like Aero Snap
