Making WPF applications look Metro-styled even in Windows 7 Window Chrome Theming Theme

Question

I like the window chrome on the new Office Suite and Visual Studio     I m still developing applications for Windows 7 of course  but I m wondering if there s a quick and easy way  read  WPF style or Windows Library  to emulate this style   I ve done some window chrome styling in the past  but getting it to look and behave just right is really tricky   Does anyone know if there are existing templates or libraries to add a  Modern UI  look and feel to my WPF applications

User · Answer

Take a look at this WPF metro-styled window with optional glowing borders.

This is a stand-alone application using no other libraries than Microsoft.Windows.Shell (included) to create metro-styled windows with optional glowing borders.

Supports Windows all the way back to XP (.NET4).

User · Answer

Based on Kapit  n Ml  ko s answer with source above  I would change it to use the following   It s a better practice to use the Marlett font rather than Path Data points for the Minimize  Restore Maximize and Close buttons   lt StackPanel Orientation  quot Horizontal quot  HorizontalAlignment  quot Right quot  VerticalAlignment  quot Top quot  WindowChrome IsHitTestVisibleInChrome  quot True quot  Grid Row  quot 0 quot  gt   lt Button Command  quot  Binding Source  x Static SystemCommands MinimizeWindowCommand   quot  ToolTip  quot minimize quot  Style  quot  StaticResource WindowButtonStyle  quot  gt       lt Button Content gt           lt Grid Width  quot 30 quot  Height  quot 25 quot  gt               lt TextBlock Text  quot 0 quot  FontFamily  quot Marlett quot  FontSize  quot 14 quot  VerticalAlignment  quot Center quot  HorizontalAlignment  quot Center quot  Padding  quot 3 5 0 0 3 quot    gt           lt  Grid gt       lt  Button Content gt   lt  Button gt   lt Grid Margin  quot 1 0 1 0 quot  gt       lt Button x Name  quot Restore quot  Command  quot  Binding Source  x Static SystemCommands RestoreWindowCommand   quot  ToolTip  quot restore quot  Visibility  quot Collapsed quot  Style  quot  StaticResource WindowButtonStyle  quot  gt           lt Button Content gt               lt Grid Width  quot 30 quot  Height  quot 25 quot  UseLayoutRounding  quot True quot  gt                   lt TextBlock Text  quot 2 quot  FontFamily  quot Marlett quot  FontSize  quot 14 quot  VerticalAlignment  quot Center quot  HorizontalAlignment  quot Center quot  Padding  quot 2 0 0 1 quot    gt               lt  Grid gt           lt  Button Content gt       lt  Button gt       lt Button x Name  quot Maximize quot  Command  quot  Binding Source  x Static SystemCommands MaximizeWindowCommand   quot  ToolTip  quot maximize quot  Style  quot  StaticResource WindowButtonStyle  quot  gt           lt Button Content gt               lt Grid Width  quot 31 quot  Height  quot 25 quot  gt                   lt TextBlock Text  quot 1 quot  FontFamily  quot Marlett quot  FontSize  quot 14 quot  VerticalAlignment  quot Center quot  HorizontalAlignment  quot Center quot  Padding  quot 2 0 0 1 quot    gt               lt  Grid gt           lt  Button Content gt       lt  Button gt   lt  Grid gt   lt Button Command  quot  Binding Source  x Static SystemCommands CloseWindowCommand   quot  ToolTip  quot close quot   Style  quot  StaticResource WindowButtonStyle  quot  gt       lt Button Content gt           lt Grid Width  quot 30 quot  Height  quot 25 quot  gt               lt TextBlock Text  quot r quot  FontFamily  quot Marlett quot  FontSize  quot 14 quot  VerticalAlignment  quot Center quot  HorizontalAlignment  quot Center quot  Padding  quot 0 0 0 1 quot    gt           lt  Grid gt       lt  Button Content gt   lt  Button gt

User · Answer

What I did was creating my own Window and Style  Because I like to have control over everything and I didn t want some external libraries just to use a Window from it  I looked at already mentioned MahApps Metro on GitHub    and also very nice Modern UI on GitHub    NET4 5 only     There is one more it s Elysium but I really didn t try this one     The style I did was really easy when I looked how it s done in these  Now I have my own Window and I can do whatever I want with xaml    for me it s the main reason why I did my own  And I made one more for you too    I should probably say that I wouldn t be able to do it without exploring Modern UI it was great help  I tried to make it look like VS2012 Window  It looks like this     Here is code  please note that it s targeting  NET4 5   public class MyWindow   Window        public MyWindow                 this CommandBindings Add new CommandBinding SystemCommands CloseWindowCommand  this OnCloseWindow            this CommandBindings Add new CommandBinding SystemCommands MaximizeWindowCommand  this OnMaximizeWindow  this OnCanResizeWindow            this CommandBindings Add new CommandBinding SystemCommands MinimizeWindowCommand  this OnMinimizeWindow  this OnCanMinimizeWindow            this CommandBindings Add new CommandBinding SystemCommands RestoreWindowCommand  this OnRestoreWindow  this OnCanResizeWindow               private void OnCanResizeWindow object sender  CanExecuteRoutedEventArgs e                e CanExecute   this ResizeMode    ResizeMode CanResize    this ResizeMode    ResizeMode CanResizeWithGrip             private void OnCanMinimizeWindow object sender  CanExecuteRoutedEventArgs e                e CanExecute   this ResizeMode    ResizeMode NoResize             private void OnCloseWindow object target  ExecutedRoutedEventArgs e                SystemCommands CloseWindow this              private void OnMaximizeWindow object target  ExecutedRoutedEventArgs e                SystemCommands MaximizeWindow this              private void OnMinimizeWindow object target  ExecutedRoutedEventArgs e                SystemCommands MinimizeWindow this              private void OnRestoreWindow object target  ExecutedRoutedEventArgs e                SystemCommands RestoreWindow this             And here resources    lt BooleanToVisibilityConverter x Key  bool2VisibilityConverter    gt    lt Color x Key  WindowBackgroundColor  gt  FF2D2D30 lt  Color gt   lt Color x Key  HighlightColor  gt  FF3F3F41 lt  Color gt   lt Color x Key  BlueColor  gt  FF007ACC lt  Color gt   lt Color x Key  ForegroundColor  gt  FFF4F4F5 lt  Color gt    lt SolidColorBrush x Key  WindowBackgroundColorBrush  Color   StaticResource WindowBackgroundColor    gt   lt SolidColorBrush x Key  HighlightColorBrush  Color   StaticResource HighlightColor    gt   lt SolidColorBrush x Key  BlueColorBrush  Color   StaticResource BlueColor    gt   lt SolidColorBrush x Key  ForegroundColorBrush  Color   StaticResource ForegroundColor    gt    lt Style x Key  WindowButtonStyle  TargetType   x Type Button   gt       lt Setter Property  Foreground  Value   DynamicResource ForegroundColorBrush     gt       lt Setter Property  Background  Value  Transparent    gt       lt Setter Property  HorizontalContentAlignment  Value  Center    gt       lt Setter Property  VerticalContentAlignment  Value  Center    gt       lt Setter Property  Padding  Value  1    gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                   lt Grid Background   TemplateBinding Background   gt                       lt ContentPresenter x Name  contentPresenter                            HorizontalAlignment   TemplateBinding HorizontalContentAlignment                             VerticalAlignment   TemplateBinding VerticalContentAlignment                             SnapsToDevicePixels   TemplateBinding SnapsToDevicePixels                             Margin   TemplateBinding Padding                             RecognizesAccessKey  True    gt                   lt  Grid gt                   lt ControlTemplate Triggers gt                       lt Trigger Property  IsMouseOver  Value  True  gt                           lt Setter Property  Background  Value   StaticResource HighlightColorBrush     gt                       lt  Trigger gt                       lt Trigger Property  IsPressed  Value  True  gt                           lt Setter Property  Background  Value   DynamicResource BlueColorBrush     gt                       lt  Trigger gt                       lt Trigger Property  IsEnabled  Value  false  gt                           lt Setter TargetName  contentPresenter  Property  Opacity  Value   5    gt                       lt  Trigger gt                   lt  ControlTemplate Triggers gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    lt Style x Key  MyWindowStyle  TargetType  local MyWindow  gt       lt Setter Property  Foreground  Value   DynamicResource ForegroundColorBrush     gt       lt Setter Property  Background  Value   DynamicResource WindowBackgroundBrush    gt       lt Setter Property  ResizeMode  Value  CanResizeWithGrip    gt       lt Setter Property  UseLayoutRounding  Value  True    gt       lt Setter Property  TextOptions TextFormattingMode  Value  Display    gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType  local MyWindow  gt                   lt Border x Name  WindowBorder  Margin   Binding Source  x Static SystemParameters WindowNonClientFrameThickness    Background   StaticResource WindowBackgroundColorBrush   gt                       lt Grid gt                           lt Border BorderThickness  1  gt                               lt AdornerDecorator gt                                   lt Grid x Name  LayoutRoot  gt                                       lt Grid RowDefinitions gt                                           lt RowDefinition Height  25    gt                                           lt RowDefinition Height       gt                                           lt RowDefinition Height  15    gt                                       lt  Grid RowDefinitions gt                                       lt ContentPresenter Grid Row  1  Grid RowSpan  2  Margin  7   gt                                       lt Rectangle x Name  HeaderBackground  Height  25  Fill   DynamicResource WindowBackgroundColorBrush   VerticalAlignment  Top  Grid Row  0   gt                                       lt StackPanel Orientation  Horizontal  HorizontalAlignment  Right  VerticalAlignment  Top  WindowChrome IsHitTestVisibleInChrome  True  Grid Row  0  gt                                           lt Button Command   Binding Source  x Static SystemCommands MinimizeWindowCommand    ToolTip  minimize  Style   StaticResource WindowButtonStyle   gt                                               lt Button Content gt                                                   lt Grid Width  30  Height  25  RenderTransform  1 0 0 1 0 1  gt                                                       lt Path Data  M0 6 L8 6 Z  Width  8  Height  7  VerticalAlignment  Center  HorizontalAlignment  Center                                                          Stroke   Binding Foreground  RelativeSource  RelativeSource Mode FindAncestor  AncestorType Button    StrokeThickness  2     gt                                                   lt  Grid gt                                               lt  Button Content gt                                           lt  Button gt                                           lt Grid Margin  1 0 1 0  gt                                               lt Button x Name  Restore  Command   Binding Source  x Static SystemCommands RestoreWindowCommand    ToolTip  restore  Visibility  Collapsed  Style   StaticResource WindowButtonStyle   gt                                                   lt Button Content gt                                                       lt Grid Width  30  Height  25  UseLayoutRounding  True  RenderTransform  1 0 0 1  5  5  gt                                                           lt Path Data  M2 0 L8 0 L8 6 M0 3 L6 3 M0 2 L6 2 L6 8 L0 8 Z  Width  8  Height  8  VerticalAlignment  Center  HorizontalAlignment  Center                                                              Stroke   Binding Foreground  RelativeSource  RelativeSource Mode FindAncestor  AncestorType Button    StrokeThickness  1     gt                                                       lt  Grid gt                                                   lt  Button Content gt                                               lt  Button gt                                               lt Button x Name  Maximize  Command   Binding Source  x Static SystemCommands MaximizeWindowCommand    ToolTip  maximize  Style   StaticResource WindowButtonStyle   gt                                                   lt Button Content gt                                                       lt Grid Width  31  Height  25  gt                                                           lt Path Data  M0 1 L9 1 L9 8 L0 8 Z  Width  9  Height  8  VerticalAlignment  Center  HorizontalAlignment  Center                                                              Stroke   Binding Foreground  RelativeSource  RelativeSource Mode FindAncestor  AncestorType Button    StrokeThickness  2     gt                                                       lt  Grid gt                                                   lt  Button Content gt                                               lt  Button gt                                           lt  Grid gt                                           lt Button Command   Binding Source  x Static SystemCommands CloseWindowCommand    ToolTip  close   Style   StaticResource WindowButtonStyle   gt                                               lt Button Content gt                                                   lt Grid Width  30  Height  25  RenderTransform  1 0 0 1 0 1  gt                                                       lt Path Data  M0 0 L8 7 M8 0 L0 7 Z  Width  8  Height  7  VerticalAlignment  Center  HorizontalAlignment  Center                                                          Stroke   Binding Foreground  RelativeSource  RelativeSource Mode FindAncestor  AncestorType Button    StrokeThickness  1 5     gt                                                   lt  Grid gt                                               lt  Button Content gt                                           lt  Button gt                                       lt  StackPanel gt                                       lt TextBlock x Name  WindowTitleTextBlock  Grid Row  0  Text   TemplateBinding Title   HorizontalAlignment  Left  TextTrimming  CharacterEllipsis  VerticalAlignment  Center   Margin  8 -1 0 0   FontSize  16   Foreground   TemplateBinding Foreground    gt                                       lt Grid Grid Row  2  gt                                           lt Path x Name  ResizeGrip  Visibility  Collapsed  Width  12  Height  12  Margin  1  HorizontalAlignment  Right                                          Stroke   StaticResource BlueColorBrush   StrokeThickness  1  Stretch  None  Data  F1 M1 10 L3 10 M5 10 L7 10 M9 10 L11 10 M2 9 L2 11 M6 9 L6 11 M10 9 L10 11 M5 6 L7 6 M9 6 L11 6 M6 5 L6 7 M10 5 L10 7 M9 2 L11 2 M10 1 L10 3    gt                                       lt  Grid gt                                   lt  Grid gt                               lt  AdornerDecorator gt                           lt  Border gt                           lt Border BorderBrush   StaticResource BlueColorBrush   BorderThickness  1  Visibility   Binding IsActive  RelativeSource  RelativeSource FindAncestor  AncestorType  x Type Window    Converter  StaticResource bool2VisibilityConverter      gt                       lt  Grid gt                   lt  Border gt                   lt ControlTemplate Triggers gt                       lt Trigger Property  WindowState  Value  Maximized  gt                           lt Setter TargetName  Maximize  Property  Visibility  Value  Collapsed    gt                           lt Setter TargetName  Restore  Property  Visibility  Value  Visible    gt                           lt Setter TargetName  LayoutRoot  Property  Margin  Value  7    gt                       lt  Trigger gt                       lt Trigger Property  WindowState  Value  Normal  gt                           lt Setter TargetName  Maximize  Property  Visibility  Value  Visible    gt                           lt Setter TargetName  Restore  Property  Visibility  Value  Collapsed    gt                       lt  Trigger gt                       lt MultiTrigger gt                           lt MultiTrigger Conditions gt                               lt Condition Property  ResizeMode  Value  CanResizeWithGrip    gt                               lt Condition Property  WindowState  Value  Normal    gt                           lt  MultiTrigger Conditions gt                           lt Setter TargetName  ResizeGrip  Property  Visibility  Value  Visible    gt                       lt  MultiTrigger gt                   lt  ControlTemplate Triggers gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt       lt Setter Property  WindowChrome WindowChrome  gt           lt Setter Value gt               lt WindowChrome CornerRadius  0  GlassFrameThickness  1  UseAeroCaptionButtons  False    gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt

User · Answer

The solution I ended up choosing was MahApps Metro  github   which  after using it on two pieces of software now  I consider an excellent UI kit  credit to Oliver Vogel for the suggestion      It skins the application with very little effort required  and has adaptations of the standard Windows 8 controls   It s very robust     A version is available on Nuget      You can install MahApps Metro via Nuget using the GUI  right click on   your project  Manage Nuget References  search for    MahApps Metro     or   via the console       PM  Install-Package MahApps Metro   It s also free -- even for commercial use   Update 10-29-2013   I discovered that the Github version of MahApps Metro is packed with controls and styles that aren t available in the current nuget version  including   Datagrids     Clean Window     Flyouts     Tiles     The github repository is very active with quite a bit of user contributions   I recommend checking it out

User · Answer

i would recommend Modern UI for WPF     It has a very active maintainer it is awesome and free     I m currently porting some projects to MUI  first  and meanwhile second  impression is just wow   To see MUI in action you could download XAML Spy which is based on MUI   EDIT  Using Modern UI for WPF a few months and i m loving it

User · Answer

If you are willing to pay I strongly recommend you Telerik Components for WPF  They offer great styles themes and there have specific themes for both  Office 2013 and Windows 8  EDIT  and also a Visual Studio 2013 themed style   However there offering much more than just styles in fact you will get a whole bunch of controls which are really useful   Here is how it looks in action  Screenshots taken from telerik samples        Here are the links to the telerik executive dashboard sample  first screenshot  and here for the CRM Dashboard  second screenshot    They offer a 30 day trial  just give it a shot

[.net] Making WPF applications look Metro-styled, even in Windows 7? (Window Chrome / Theming / Theme)

Examples related to .net

Examples related to wpf

Examples related to windows-7

Examples related to windows-8

Examples related to microsoft-metro