WPF Custom Metro Style forms

To make the WPF program appear consistently on different versions of the operating system, we need to override the WPF control style. This blog will show you how to create a Metro style WPF form.

First look at the final form,

As we can see, this form consists of two parts, the top is the minimize and close button, and the other area is the display area of the form. Take a look at the specific implementation code below,

Metrowindow Style:

<resourcedictionary xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http:    Schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Clr-namespace:metrowindow.resources.styles "> <!--Minimize button styles-<style x:key= "Winminbtnstyle" targettype= "button" > <setter property= "Snapstodevi Cepixels "value=" true "/> <setter property=" Overridesdefaultstyle "value=" true "/> <setter Propert Y= "Width" value= "/> <setter property=" Height "value="/> <setter property= verticalalignmen " T "value=" Top "/> <setter property=" Template "> <Setter.Value> <controlte                        Mplate targettype= "button" > <border x:name= "mainborder" background= "Transparent" > <Grid> <contentpresenter content= "{TemplateBinding Content}" Horizontalalig Nment= "{TemplateBindingHorizontalcontentalignment} "verticalalignment=" {TemplateBinding verticalcontentalignment} "/> &L                        T;/grid> </Border> <ControlTemplate.Triggers> <trigger property= "IsMouseOver" value= "True" > <setter targetname= "Mainborder" property = "Background" value= "#33a58d"/> </Trigger> </controltemplate.trigger    s> </ControlTemplate> </Setter.Value> </Setter> </Style> <!--Close button style-<style x:key= "Winclosebtnstyle" targettype= "button" > <setter property= "Snapstodevi Cepixels "value=" true "/> <setter property=" Overridesdefaultstyle "value=" true "/> <setter Propert Y= "Width" value= "/> <setter property=" Height "value="/> <setter property= verticalalignmen "     T "value=" Top "/>   <setter property= "Template" > <Setter.Value> <controltemplate targettype= "Butto                            n "> <border x:name=" mainborder "background=" Transparent "> <Grid> <contentpresenter horizontalalignment= "{TemplateBinding horizontalcontentalignment}" Vertica Lalignment= "{TemplateBinding verticalcontentalignment}"/> </Grid> </ border> <ControlTemplate.Triggers> <trigger property= "IsMouseOver" V                        Alue= "True" > <setter targetname= "mainborder" property= "Background" value= "#d44c45"/> </Trigger> </ControlTemplate.Triggers> </controltem plate> </Setter.Value> </Setter> </Style> <!--form control template--<controlt Emplate x:key= "MetrowindOwtemplate "targettype=" {x:type window} "> <border borderbrush=" #2a927c "borderthickness=" 1 "background=" white "> <Grid> <Grid.RowDefinitions> <rowdefinition height=" 30 "/ > <rowdefinition height= "*"/> </Grid.RowDefinitions> <g Rid grid.row= "0" background= "#2a927c" > <Grid.ColumnDefinitions> <col Umndefinition width= "Auto"/> <columndefinition width= "*"/> <colu Mndefinition width= "Auto"/> <columndefinition width= "Auto"/> </grid. columndefinitions> <textblock x:name= "windowtitletbl" grid.column= "0" text= "fontfamily=" Microso FT Yahei "verticalalignment=" Center "fontsize=" "fontweight=" Bold "margin=" 10,0 " foreground= "White"/>                   <button x:name= "Minwinbutton" grid.column= "2" style= "{StaticResource Winminbtnstyle}" Verticalcontentalignment= "Center" horizontalcontentalign                                Ment= "Center" > <Button.Content> <StackPanel> <path stroke= "White" strokethickness= "2" data= "m1,6 l18,6"/> </stac  kpanel> </Button.Content> </Button> <button                                         X:name= "Closewinbutton" grid.column= "3" style= "{StaticResource winclosebtnstyle}" margin= "2,0,8,0" Horizontalcontentalignment= "Center" verticalcontentalignment= "Ce                                Nter "> <Button.Content> <StackPanel> <path StroKe= "White" strokethickness= "2" data= "m2,2 l16,16 m2,16 l16,2"/> </StackPanel> </Button.Content> </Button> </Grid> <            Adornerdecorator grid.row= "1" > <ContentPresenter/> </AdornerDecorator> </Grid> <Border.Effect> <DropShadowEffect/> </border.ef fect> </Border> </ControlTemplate> <style x:key= "Metrowindowstyle" targettype= "{x:type wind OW} "> <setter property=" snapstodevicepixels "value=" True "/> <setter property=" overridesdefaultst Yle "value=" true "/> <setter property=" allowstransparency "value=" true "/> <setter property=" Backg Round "value=" Transparent "/> <setter property=" WindowStyle "value=" None "/> <setter property=" Tem Plate "value=" {staticresOurce metrowindowtemplate} "/> </Style></ResourceDictionary> 

Create a new Modernwindow class,

C#

    public class Modernwindow:window {private Button CloseButton;        Private Button Minbutton;        Private TextBlock windowtitletbl; Public Modernwindow () {this.        Loaded + = modernwindow_loaded; private void Modernwindow_loaded (object sender, RoutedEventArgs e) {//Find form template Contr            Oltemplate metrowindowtemplate = app.current.resources["Metrowindowtemplate"] as ControlTemplate; if (metrowindowtemplate! = null) {CloseButton = Metrowindowtemplate.findname ("Closewinbu                Tton ", this) as Button;                Minbutton = Metrowindowtemplate.findname ("Minwinbutton", this) as Button;                Closebutton.click + = Closebutton_click;                Minbutton.click + = Minbutton_click;            WINDOWTITLETBL = Metrowindowtemplate.findname ("Windowtitletbl", this) as TextBlock; }} private void Closebutton_click (object SendeR, System.Windows.RoutedEventArgs e) {Close (); private void Minbutton_click (object sender, System.Windows.RoutedEventArgs e) {this.        WindowState = System.Windows.WindowState.Minimized;         }///<summary>//Implement form Mobile///</summary>//<param name= "E" ></param>            protected override void Onmouseleftbuttondown (MouseButtonEventArgs e) {dragmove (); Base.        Onmouseleftbuttondown (e); }    }

Now that we've finished the Metro style form, we're going to apply it now. See MainWindow implementation:
Xaml:

<local:modernwindow x:class= "Metrowindow.mainwindow"        xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml /presentation "        xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "        xmlns:d="/http/ schemas.microsoft.com/expression/blend/2008 "        xmlns:mc=" http://schemas.openxmlformats.org/ markup-compatibility/2006 "        xmlns:local=" Clr-namespace:metrowindow "        style=" {StaticResource Metrowindowstyle} "        mc:ignorable=" D "        title=" MainWindow "height=" to "width=" 525 ">    <Grid>            </Grid></local:ModernWindow>

C#:

    public partial class Mainwindow:modernwindow    {public        MainWindow ()        {            InitializeComponent ();        }    }

The Metro style form is now complete.
Since Win8 was released, more and more desktop applications have begun to implement Metro styles. There are also many WPF Metroui libraries, for example: http://mui.codeplex.com/. We can choose the existing Metro Ui/control according to the actual situation of the project, of course, can also write their own.

Please click here to download the code.

Thank you for reading.

WPF Custom Metro Style forms