Feb 5, 2015 12:27 PM
(This post was last modified: Feb 14, 2015 09:08 AM by Blink.)
MaterialSkin
bringing Material Design to .NET WinForms
bringing Material Design to .NET WinForms
About
Hey HF, it's been a while since I contributed to this forum. Time for a change. Well, this will not be your average theme thread on HF.
When Google revealed Android L and Material Design I was astonished. Their concept for design was worked out amazingly. I'm sure most of you are already familiar with it, if not: here are the specifications.
A few months ago I created a project for bringing their concept to .NET WinForms. Little by little the library was growing to what it is today.
MaterialSkin is an open source library written from from scratch to bring Google's Material Design to .NET WinForms.
To show the skin's functionality I've made a short video.
Please notice the video quality isn't 100%, you should definitely try it out yourself!
Screenshots:
Spoiler (Click to View)
Features
- Light & Dark theme
- Customizable color scheme
- Fluid animations
- Large set of components
Current components in MaterialSkin
- Checkbox
- Divider
- Flat button
- Label
- Radio button
- Raised button
- Single-line text field
- Tab control
- Contextmenustrip
Implementing MaterialSkin in your application
1. Add the library to your project
You can do this on multiple ways. The easiest way would be adding the NuGet Package. Right click on your project and click 'Manage NuGet Packages...'. Search for 'MaterialSkin' and click on install. Once installed the library will be included in your project references. (Or install it through the package manager console: PM> Install-Package MaterialSkin)
Another way of doing this step would be cloning the project from GitHub, compiling the library yourself and adding it as a reference.
2. Add the MaterialSkin components to your ToolBox
If you have installed the NuGet package, the MaterialSkin.dll file should be in the folder //bin/Debug. Simply drag the MaterialSkin.dll file into your IDE's ToolBox and all the controls should be added there.
3. Inherit from MaterialForm
Open the code behind your Form you wish to skin. Make it inherit from MaterialForm rather than Form. Don't forget to put the library in your imports, so it can find the MaterialForm class!
C# (Form1.cs)
Code
public partial class Form1 : MaterialFormVB.NET (Form1.Designer.vb)
Code
Partial Class Form1
Inherits MaterialSkin.Controls.MaterialForm4. Initialize your color scheme
Set your prefered colors & theme. Also add the form to the manager so it keeps updated if the color scheme or theme changes later on.
C# (Form1.cs)
Code
public Form1()
{
InitializeComponent();
//Initialize MaterialSkinManager (example in C#)
var materialSkinManager = MaterialSkinManager.Instance;
materialSkinManager.AddFormToManage(this);
materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;
materialSkinManager.ColorScheme = new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE);
}VB.NET (Form1.vb)
Code
Imports MaterialSkin
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim SkinManager As MaterialSkinManager = MaterialSkinManager.Instance
SkinManager.AddFormToManage(Me)
SkinManager.Theme = MaterialSkinManager.Themes.LIGHT
SkinManager.ColorScheme = New ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE)
End Sub
End ClassLinks
Repository: https://github.com/IgnaceMaes/MaterialSkin
NuGet: https://www.nuget.org/packages/MaterialSkin/
Contribute
Do you wish to contribute to this library? Good news, you can!
Just fork it on GitHub and push commits. I'll regularly review incoming commits and merge them.
Learn, contribute, use!
![[Image: dUSov.png]](https://i.imgur.com/dUSov.png)


![[Image: 8cb7892a43.png]](https://puu.sh/fvY2t/8cb7892a43.png)
![[Image: c9514184ea.png]](https://puu.sh/fvYcb/c9514184ea.png)
![[Image: 9d10451de8.png]](https://puu.sh/fvYfn/9d10451de8.png)
![[Image: IQE6i8G.png]](https://i.imgur.com/IQE6i8G.png)


![[Image: 1zL3pDG.jpg]](https://i.imgur.com/1zL3pDG.jpg)