Code Monkey home page Code Monkey logo

materialskin's Introduction

MaterialSkin for .NET WinForms

Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.

alt tag

High quality images can be found at the bottom of this page.


Current state of the MaterialSkin components

Component Supported Dark & light version Disabled mode Animated
Checkbox Yes Yes Yes Yes
Divider Yes Yes N/A N/A
Flat Button Yes Yes Yes Yes
Label Yes Yes N/A N/A
Radio Button Yes Yes Yes Yes
Raised Button Yes Yes Yes Yes
Single-line text field Yes Yes No Yes
TabControl Yes N/A N/A Yes
ContextMenuStrip Yes Yes Yes Yes
ListView Yes Yes No No
ProgressBar Yes Yes No No
FloatingActionButton No No No No
Dialogs No No No No
Switch No No No No
More... No No No No

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)

public partial class Form1 : MaterialForm

VB.NET (Form1.Designer.vb)

Partial Class Form1
  Inherits MaterialSkin.Controls.MaterialForm

4. Initialize your colorscheme

Set your preferred 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)

public Form1()
{
    InitializeComponent();

    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)

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

Material Design in WPF

If you love .NET and Material Design, you should definitely check out Material Design Xaml Toolkit by ButchersBoy. It's a similar project but for WPF instead of WinForms.


State of the project

This project is no longer under active development. Though, contributions are still welcome and the community will likely still help if you open an issue.


Contact

If you wish to contact me for anything you can get in touch at:


Images

alt tag

A simple demo interface with MaterialSkin components.

alt tag

The MaterialSkin checkboxes.

alt tag

The MaterialSkin radiobuttons.

alt tag

The MaterialSkin ListView.

alt tag

MaterialSkin using a custom color scheme.

materialskin's People

Contributors

alexxeg avatar bigbauf avatar emadzz avatar ignacemaes avatar jipjan avatar lukeskinner avatar michalkrzych avatar paolozanchi avatar revensoft avatar saitdev avatar salaros avatar sirtony avatar suvjunmd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

materialskin's Issues

Depth

Currently the interface IMaterialControl provides support to hold depth information. However, this feature hasn't been implemented yet. Shadows should be drawn dynamically, which will be a challenge because they're relative to the depth of the component behind it.

Any ideas how we could accomplish this on the on a clean way?

ContextMenuStrip very buggy

ContextMenuStripItems do not always resize properly and the black theme does not always update everything.
untitled

Components to be made next

First of all, to be clear, this isn't exactly an issue.

This is for deciding which controls to make next. I wanted to give everyone insight on what there is left to be made and a space for discussion. Idealistically this would be all controls specified in Google's Material Design document. However I think we should start with the most important ones for desktop usage.

The ones I find would be most useful to have are (not in particular order):

How do you update the form title?

I am updating an application to use this form design, but when I try to update the form title I don't see the change. It seems to always stay the same as when the application was launched.

Autoscroll

How about autoscroll? Standart autoscroll is awful inhibits.

Hide Control Box on Form

how can i hide the control box ( minimize, maximize, close) button???
I set controlbox to false on properties but stilla appear, any suggetion??

cosmetic issue with dialogs

purely cosmetic, however, when you go to show another dialog, the animation of the triggering button is suspended due to the single threaded nature of the form, then complete after the previous form has been closed out of. Some sort of way to have click event triggered post animation completion would be nice.

Exception adding a tab to the MaterialTabControl when linked to the MaterialTabSelector

When you have a standalone MaterialTabControl you can add tabs without issues in the form designer.

However when an instance of the MaterialTabSelector has the BaseTabControl configured it will throw exceptions in the OnPaint method inside the MaterialTabSelector.cs. This is because when the tab is added (or deleted) it does not recalculate the amount of rectangles to use causing exceptions here:

            g.DrawString(
                tabPage.Text.ToUpper(), 
                SkinManager.ROBOTO_MEDIUM_10, 
                textBrush, 
                tabRects[currentTabIndex], //This tabRects object has not been updated to reflect the new amount of tabs

Screenshot

Proper default sizes for all components

All components should have a proper default size set as described in the MD specifications. Currently this isn't the case, e.g. when adding a divider the height will be set to ~10px, while it should be just 1px.

With this it will be much easier and quicker to make up your form.

Adding to design doesn't effect application

When adding buttons, text boxes etc to the design of an application, the actual program doesn't have any of the things in the design (this is probably my fault but some explanation would be useful!)

capture

Form resize not working if...

I noticed when there is a control that comes to the bounds of the main form and the user tries to resize the form at that place, it won't work. The cause of this is because the control will catch the mouse event, and not the form itself.

Designer Problem

the changes on the colorscheme or theme of the form doesn't show up in the designer :/ .
display

Menu ContextMenuStrip

I'm unable to get the menu to work correctly. Even when I open the demo it doesn't work. The menu doesn't show up at all when I run either mine or the demo app. I can see it added to the project and I can click on it and it comes to the front but it looks as if it goes to the background. Thoughts?

Not adding to Toolbox VS13

So the issue with VS13 is that when I drag and drop the dll I get the "toolbox items added" but they do not show up after a refresh or a restart of VS. I installed Via NuGet and Haven't tried manually compiling it yet...

SingleLineTextField events not firing

The problem is that MaterialSingleLineTextField is just a holder for a base textbox, but of the type of Control. It draws the onfocus animation. To catch the events from the TextBox itself you would have to subscribe to the events of the base TextBox in it.

Setting MaterialTabControl.SelectedIndex/Tab in a form's initializer doesn't move the tab indicator

Also setting the SelectedIndex/Tab in Form.Load event causes a crash at this line:

var rippleSize = (int)(animationProgress * TabRects[baseTabControl.SelectedIndex].Width * 1.75);

with this exception:

Additional information: Index was out of range. Must be non-negative and less than the size of the collection.

because 'TabRects' is not initialized yet.

Also can I suggest that when setting the SelectedIndex/Tab programmatically that the ripple effect should expand from the middle, if at all.

Great work btw, I love Android's Material Design ๐Ÿ‘

More customization & button fix

This definitely needs more customization, for one there should be a way to disable the title rendering.

Flat button has a bug, it is always Auto Size, hence you cannot change its size.

Thats for now.

WndProc &HF030&

I tried to catch the maximize event but failed.
Also I can't disable control box and buttons.

MaterialSkin for Universal App

PM> Install-Package MaterialSkin
'MaterialSkin 0.2.1' already installed.
Adding 'MaterialSkin 0.2.1' to TrackerIn.Windows.
Install-Package : Failed to add reference to 'MaterialSkin'.
At line:1 char:1

  • Install-Package MaterialSkin
  • - CategoryInfo          : NotSpecified: (:) [Install-Package], InvalidOperationException
    - FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand
    

DataGridView materialized

This library supports datagridview too? Like 70% of my project is datagridview, so I neede it to be materialized too.

Designer shows Controls as Black in Containers

Adding controls inside containers like TABCONTROL will make the control(s) black and show up unreadably to the user designing the interface, Although the controls show up inside the application whilst running/debugging.

Black Controls
RunningControls

Font sizes inconsistent

MaterialSkin embeds the Roboto font. However, the font sizes can't be translated literally from Google's design specification because it's different on desktop. While building up this skin I've neglected it a bit. This needs to be looked at again to make sure it's consistent everywhere.

Clicking TextBox a second time causes some issues

If the user clicks anywhere inside the TextBox a second time, the Hint will disappear. And when using Dark Theme, it will cause a white box to appear inside.

It fixes itself when the mouse leaves the TextBox, or a key is pressed.

Here's a gif (The Hint is still barely visible in the gif, but that's a issue with the gif itself. The Hint does completely disappear when viewing outside the gif)

MaterialListView Column Headers not drawn correctly

I tried the MaterialSkinExample project on my machine and noticed the MaterialListView's column headers seem to be drawn like regular winforms ListView headers.

Example:
Here

I've inspected the issue and it seems the overridden method OnDrawColumnHeader is not called.
(I Used a breakpoint at the beginning of the method and it was never reached.)
Usually this means either the View property isn't set to View.Details or the DrawOwner is false but those are taken care of in the constructor.

Furthermore, I tried adding an overriden OnDrawSubItem to MaterialListView.cs and this one WAS called.
( This method have the same "requirements" as the OnDrawColumnHeader - Details View, DrawOwner=true)

I've tried:

  • Running in both debug and release
  • Changing my visual theme: Aero/Windows 7 Basic/Windows Classic
  • Subscribing manually to the DrawColumnHeader event - from within the control and from the owner form.

None of these worked.

Removing tab from TabControl permanently crashes every TabSelector linked to it

I set up everything in my TabControl, linked it to a TabSelectror, and everything ran beautifully. Unfortunately, since you can't remove a tabpage while the program is running, because it will crash the tabSelector, i tried adding it while the program was running. I deleted the tab, and that's where all hell broke loose.
The exception i get originaters from MaterialSkin.Controls.MaterialTabSelector.OnPaint(), and says
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

Please someone tell me what to do, because creating a new tabControl with all the controls working properly would take ages. Thanks!

Update

New components, like progress bar and dropdown, please!!!

Block TAB

Hi, Can I block a tab ? How do I do this ?
Sample:

TAB1 | TAB2 | TAB3

My tab 2, then will unblock after that I click in a button in TAB 1.

Im sorry for my english!! And thank you!!

materialCheckBox.Checked always defaults to false

My materialCheckBox1.Checked always defaults to false, even when it is checked. I'm using as a "have you accepted Terms and Conditions" with a simple IF. I cannot get the if to run the main code that should happen when you accept terms and conditions, it only runs the "please accept terms and conditions" code.

        if(materialCheckBox1.Checked == true)
        {

        }
        else
        {
            MessageBox.Show("You cannot install " + Resources.ResourceManager.GetString("modname") + " without accepting the Terms and Conditions.");
        }

Unable to run on .NET4

Tried to run on .net4 but it keeps saying missing library/reference. I reinstalled the reference from nuget but doesnt solve the problem.

Thanks

TextBox Hint not working correctly

When I first made the SingleLineTextBox I quicky thrown in an implementation of the Hint as described in Google's Material Design Specs. However, this implementation is working far from correct, yet.

It should always show the hint text when the textbox is empty & in the correct color.

Currently I'm setting the hint as text of the baseTextControl when it has no text, but this solution has disadvantages. When the user types afterwards, the hint text is still there and is to be removed by the user itself. Instead it should just remove and the user should be able to type in directly.

MaterialForm should respect its properties

MaterialForm currently doesn't respect a few of the properties that a Form has:

  • Be able to block forms from being resized
  • Be able to block forms from maximizing/minimizing
  • Show or hide the ControlBox

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.