Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

.NET 

MaterialSkin - Material Design Theme [Light & Dark][Animated]

MaterialSkin
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 : MaterialForm

VB.NET (Form1.Designer.vb)
Code
Partial Class Form1
    Inherits MaterialSkin.Controls.MaterialForm

4. 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 Class

Links
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]
I can honestly say this is one of the most impressive themes I found on HF after all these years. I'm not sure how good Material looks on a windows machine, but I love the idea of it.
Holy shit that animation looks sick. I might actually contribute to this ^^ Really great job!
[Image: IQE6i8G.png]

BlackCap Wrote:You're even more verbose than Java.
About using GoTo's in VB/C#:
Only3 Wrote:asm use it why u shouldnt
Awesome work, Ignace. I'm not sure I have paid you a compliment regarding this project yet, but seriously, well done - very well executed indeed. Also, Ignace, please make a NuGet package.

Woohoo. I was the first person to * this. If you (fellow member) like this, you should also star to show support!

[Image: yOoqKjV.png]
Good shit lads! This is a great theme and I will use it for sure!
For those who don't know what material design is, it's google's version to flat design, more info: here.

ON-TOPIC:
Great job buddy, keep up the good work
AMD Ryzen 5 5600X AM4 Tray
Gigabyte B550M AORUS PRO-P
Corsair DDR 4 16G (8Gx2) 3200 CL16 VENGEANCE LPX Black
ANTEC PSU 750W High Current Gamer 80+ Gold Fully Modular
Gigabyte RTX 3060 Ti GAMINGOC PRO-8GD
A-DATA SSD 512GB XPG SX8200 Pro M.2 2280
WD HDD 1.0TB 5400 64MB SATA3 Blue 3.5
Amazing piece of work I will consider using this for sure :) Thanks OP..
(Feb 5, 2015 01:04 PM)Temploit Wrote:  Holy shit that animation looks sick. I might actually contribute to this ^^ Really great job!
Thanks Temploit!

That would be nice :) There are still lots of components to be made. Just read through Google's design principles and you'll definitely find something you want to make. There are both simple and complex components left.
Also the current ones still need refinement.

(Feb 5, 2015 01:12 PM)+Bourbon Wrote:  Awesome work, Ignace. I'm not sure I have paid you a compliment regarding this project yet, but seriously, well done - very well executed indeed. Also, Ignace, please make a NuGet package.

Woohoo. I was the first person to * this. If you (fellow member) like this, you should also star to show support!

[Image: yOoqKjV.png]
Thanks ByteBlast, I appreciate it a lot!

I've actually created a NuGet package already, but I can't seem to find how to update it haha. The one that's online right now is a very old version.
https://www.nuget.org/packages/MaterialSkin/

Watch out before I catch up with the amount of stargazers of your 'C# 6 equivalents in C# 5'! :P

(Feb 5, 2015 01:17 PM)iSynthesis Wrote:  For those who don't know what material design is, it's google's version to flat design, more info: here.

ON-TOPIC:
Great job buddy, keep up the good work
I think calling it a flat design isn't really correct considering everything has a depth in Material Design. The idea is that components are represent on paper sheets, which can overlap.

I'm glad you like it.
[Image: dUSov.png]
I am very very impressed with this. This is the best thing I've seen on this forums since I've registered. :D
Very well done, one of the cleanest themes I've seen.
Woah, never heard of Material Design. Seems so cool.
This is a 10/10 theme buddy, good job.
I suggested this theme many times. And I doubted that anyone can create the animations, but oh boy, oh boy. My jaw dropped. This is the most amazing theme I have ever seen for WinForms. Seriously well done man, well done. I cannot say how good this looks. Keep it up buddy.
No way; this is truly freakin amazing. The design the overall concept the structural design is amazing been waiting so long for something like this and as good as this!
I am completely amazed, there's so much work put into this it's unbelievable.
Wow this actually looks really nice. Good job man. It's nice seeing something new.

[Image: 1zL3pDG.jpg]



Possibly Related Threads...
Thread / Author Replies Views Last Post
[Shell] by CryptSep 25, 2021 10:33 PM 4 276 Sep 25, 2021 10:33 PM
Last Post: Able.
[Python] by TilcayoMar 23, 2020 08:03 AM 20 665 Mar 23, 2020 08:03 AM
Last Post: Tilcayo
[.NET] by huntersJun 18, 2017 09:54 AM 4 128 Jun 18, 2017 09:54 AM
Last Post: hunters