Git Product home page Git Product logo

materialskin's Introduction

MaterialSkin 2 for .NET WinForms

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

⚠️ It's NOT recommended to use this lib for new projects ⚠️

❓For new projects I recommend WPF with this Material Design Xaml Toolkit since it's a lot newer and performant and feature complete

ℹ️ The current state of this project state is: not active

Contributing

  • Feel free to open a PR with new features or bug fixes. Since this project is not currently active, big changes will not be considered.
  • Support this and more projects by donating:

Paypal

A quick look

home

Nuget Package

A nuget package version is available here

Or simply search for MaterialSkin.2 on the Nuget Package Manager inside Visual Studio

WIKI Available!

But there's not much in there for now, please contribute if you can. 😄

You can access it here

Current state of the MaterialSkin components

Component Supported Disabled mode Animated
Backdrop No - -
Banner No - -
Buttons Yes Yes Yes
Cards Yes N/A N/A
Check Box Yes Yes Yes
Check Box List Yes Yes Yes
Chips No - -
Combobox Yes Yes Yes
Context Menu Yes Yes Yes
Date Picker No - -
Dialog Yes N/A No
Divider Yes N/A N/A
Drawer Yes N/A Yes
Expansion Panel Yes Yes No
Flexible Dialog (big) Yes Yes N/A
FAB - Floating Action Button Yes Yes Yes
Label Yes Yes N/A
ListBox Yes Yes N/A
ListView Yes No N/A
Progress Bar Partial No No
Radio Button Yes Yes Yes
Text field Yes Yes Yes
Sliders Yes Yes No
SnackBar Yes N/A Yes
Switch Yes Yes Yes
Tabs Yes N/A Yes
Time Picker No - -
Tooltips No - -

All supported components have a dark theme

TODO List

  • Progress bar - Animation and variants, maybe round loading thingy
  • Backdrop (maybe)
  • Some Color code improvements and refactoring
  • DatePicker
  • Drawer - Header, Divider, subtitle & submenu
  • Textfield ContextualMenu translation
  • Controls code cleanup
  • Add Noto font support

Contributing

Thanks for taking the time to contribute! 👍

If you have any issues please open an issue; have an improvement? open a pull request.

Contributors

Thank you to all the people who have already contributed to MaterialSkin 2 !


Implementing MaterialSkin 2 in your application

1. Add the library to your project

There are a few methods to add this lib:

The Easy way

Search for MaterialSkin.2 on the Nuget Package manager inside VisualStudio and add it to your project.

Manual way

Download the precompiled DLL available on the releases section and add it as a external reference on your project.

Compile from the latest master

Clone the project from GitHub, then add the MaterialSkin.csproj to your own solution, then add it as a project reference on your project.

2. Add the MaterialSkin components to your ToolBox

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.


Preview!

A simple demo interface with MaterialSkin components. home

The MaterialSkin Drawer (menu). drawer

Every MaterialSkin button variant - this is 1 control, 3 properties buttons

The MaterialSkin checkboxes, radio and Switch. selection

Material skin textfield text

Table control table

Progress bar progress bar

Cards cards

List Box listbox

Expansion Panel expansion

Label label

MaterialSkin using a custom color scheme. custom

FlexibleMaterial Messagebox messagebox

materialskin's People

Contributors

akidevx avatar alexxeg avatar bigbauf avatar ddiidev avatar donaldsteele avatar emadzz avatar francescocalculli avatar ignacemaes avatar jipjan avatar leocb avatar liettua avatar lukeskinner avatar michalkrzych avatar orapps44 avatar paolozanchi avatar revensoft avatar saitdev avatar salaros avatar simonaalina25 avatar sirtony avatar suvjunmd avatar t5ive avatar thibaudmzn avatar valimaties avatar volatilepulse 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

materialskin's Issues

Force consistent color on button icons

Like the Drawer, icons on buttons should be pre-processed to have their colors consistent throughout the app. also maybe we should enable an property to control this color-modifying behavior:

In this case, the wrench is too dark
image

on the drawer it's correct
image

Checkbox Font Change

Changing font or font size does not work in designer. Please look into the matter

Can't resize ContextMenuStrip item

Hello,

I'm looking to extend the width of MaterialContextMenuStrip items because in my case some texts are too long and they're are cut. I've tried to modify in code some Size properties without effect for now. I was not able to find a good answer in google (And I'm not sure if it's something about the default ContextMenuStrip component or the overide with Material.Skin)

If you've any idea, let me know,
Thanks in advance,

See below
menuSizeIssue

ComboBox problem

When I open the MaterialComboBox during runtime and hoover over the text items I get the following result:

ComboBox

When I change the function NativeText.DrawTransparentText in CustomDrawItem in MaterialComboBox to NativeText.DrawString this doesn't happen. But then you would loose functionality, which you don't want. So something is going wrong in NativeText.DrawTransparentText.

Regards,
Rob

Translation not working on some properties (.resx files)

Hello 😃

My project is translated in french and english. I'm using the Winform designer to edit and add translation. Some properties in some components are not triggered when I'm editing a properties, the result is that translation and adjustement are not working and it's modyfing the default layer. See below

Steps :

1. Select your main Form. You'll find in properties list the property called "Language"

0

2. Modify it to 'french' for example.

3

3. Now modify texts, move components, do what you want in your UI you want to be changed when you're in french.

2

4. Save, you'll see a new resx file added to your form for the language you've selected

1

5. Change back the language to default one

5

6. It should change back everything in your UI. But we can see "Hint" are not reverted

4

7. If you open the french resx you'll only see the label text

6

For now I saw this issue on :

  • Hint, UseAccent, UseTallSize properties on all components
  • Text properties on TabControl

Quick search on this issue gave me this https://stackoverflow.com/questions/26250972/net-localize-custom-control but not sure if it will solve this issue.

Amazing UI showoff thread!

Have a nice interface you want to showoff to the internet? Post it here!

As always, be careful with sensitive data.

Happy Codding 😉

Topic closed and previous posts deleted. Thanks for using the lib :)

Card doesn't appear properly when instanciated from code

If you instantiate Cards from any event in your code, the actual display seems to be way off, any ideas why ?

`
MaterialCard card = new MaterialCard();
card.Margin = new System.Windows.Forms.Padding(14);
card.MouseState = MaterialSkin.MouseState.HOVER;
card.Padding = new System.Windows.Forms.Padding(14);
card.Size = new System.Drawing.Size(200, 100);

flowLayoutPanel1.Controls.Add(card);
`

AS you can see, the first card is instantiated in design mode, looks fine, but the 3 others look weird.

Capture

Possibility to add autocomplete on single line textbox ?

Hello,
On the vanilla textbox I used to set autocomplete, but now that I switched my app to MaterialSkin I can't do that anymore, is there a possibility to add it back ?

Thanks for your time

Edit:
I just found out this controller is made of the RichTextBox, it cannot be made of the regular TextBox to add the feature ?

Black background on controls like slider, checkbox, combobox...

Hey,
I've recently discovered a bug when using MaterialSkin 2.0.0, basically when I use a control like slider, checkbox or combobox (and maybe more) then the background isn't transparent, but black. I've tried to set it to another color but still same thing. Don't know where the error could be, I've correctly installed it.

~ AnErrupTion

Text box cursor bug

Hello, when you type symbols in a text box the cursor is misplaced:
image

Version: latest v2.0.0

Form not returning DialogResult because of matTextBox as psw with data

Hi,

I got another funny bug the last week. When your Form that you show with the method xxx.ShowDialog() contain a TextBox with the property password to true and if you have some text inside, you'll never receive back the DialogResult in your parent

Steps :
In your program.cs open a form like this

var form = new Form1();
var result = form.ShowDialog() == DialogResult.OK;

In your form, add a TextBox with the password property = true

If your TextBox contain any text when you call

this.DialogResult = DialogResult.OK/Cancel;
Close();

So your program will never get back the result.

The only workaround I find is to call something like
materialTextBoxPassword.Text = string.Empty;

Flashing when changing theme

Only the label background is slightly delayed changed, so its little uncomfortable.
It changed seamlessly in previous commits.

gif

FlowLayoutPanel background color

Hello, can not set my FlowLayoutPanel background color to any color, not even transparent:

image

in the designer it changes the color but when I compile the program the background color wont change.

I am using latest version of MaterialSkin and .NET 3.5
What should I try?

Thanks

Cards don't support dark mode?

When switching to dark mode with a card control, it stays white but glitches all the controls inside it. This is with enforce backcolor with true and false.

Minimal Textbox

The current Textbox is very good, but it is not suitable for placing many.
therefore, usability improves if the previous minimal Textbox is also implemented.

Double arrow showing in corner top right

Hello,

Sometimes I can see 2 arrow like a little scrollbar in corner top right in my windows and when you resize your screen for example to made it bigger only its appearing>removing>appearing>removing>etc etc
douleArrow

I've tried to change some properties without results for now. Maybe someone have an idea to remove them definitely ? :)

PS : If I try to click on them or interact in any way, nothing happen

Mixing common winforms containers with material skin gives wrong backcolor

Backcolor should be consistent, maybe we should force the container to get it's color from the parent backcolor?

The image bellow has the following structure:

Material Form -> Material Tab Control -> TabPage -> Material Card -> Panel -> Material Label
image

In this case, the panel should have the card back color

MaterialCheckedListBox not clearing displayed items

Hello,

I've added a MaterialCheckedListBox in my UI. After that I've added some items in it. And when I want to clear the list to feed it with some other items, nothing happens in the UI.
materialCheckedListBoxRights.Items.Clear();
In code, "Items" is really cleaned in my case from 17 objects to 0.

ALT + F4 will close the navigation bar alone

Hi leocb,

Click the left navigation bar area, ALT + F4 will close the navigation bar alone, how can I avoid this problem? I hope the effect is that Alt + F4 can shut down the software, not a control.
Uploading 20200315111255.png…

Deleting cards or buttons leave the shadow behind

While in design mode, deleting a card will leave it's shadow behind permanently until the design tab is closed and opened again. The remaining shadow does not affect the runtime, however, removing the control at runtime yield the same result.
image

ComboBox text not rendering properly

Hello,
In a windows form project in VB.NET, the combobox text is not rendering properly when using light theme.
It happens after I hover the text at least once.

Sans titre 1

It is same as this issue #20 and it happens on two different computers at least.

Matetrial Skin (RTL Version)

Hi,
Please take the right to left version of material Skin
i try but i cant to set the material drawer (menu) to right to left (right side of main form )or other controls
Thanks

Designer not loading Forms inherit from MaterialForm

Hello,

At first I had included MaterialSkin as a project in our solution. I've modified and improved some of our application screen without issues.
But after a build on our server, SonarQube was crying too much, so I've decided to put MaterialSkin as a *.dll in our project.

Steps I've done :

  • Cloned the Git
  • Changed target framework from 4.6.1 to 4.7.2 (was also the case when MaterialSkin was included as project in our solution)
  • Signed the assembly with a *.pfx
  • Compiled as release - AnyCPU
  • Created manually a NuGet package including the generated *.dll
  • Uploaded on our local NuGet Repository
  • Removed the project in our solution and replaced with reference to the NuGet package.

And since this, when I try to load Form having something from MaterialSkin, I've this issue.
The designer could not be shown for this file because none of the classes within it can be designed. The designer inspected the following classes in the file: MainForm --- The base class 'MaterialSkin.Controls.MaterialForm' could not be loaded. Ensure the assembly has been referenced and that all projects have been built.

Call stack :

at System.ComponentModel.Design.Serialization.CodeDomDesignerLoader.EnsureDocument(IDesignerSerializationManager manager)
at System.ComponentModel.Design.Serialization.CodeDomDesignerLoader.PerformLoad(IDesignerSerializationManager manager)
at Microsoft.VisualStudio.Design.Serialization.CodeDom.VSCodeDomDesignerLoader.PerformLoad(IDesignerSerializationManager serializationManager)
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.VisualStudio.Design.Serialization.CodeDom.VSCodeDomDesignerLoader.PerformLoad(IDesignerSerializationManager serializationManager)
at Microsoft.VisualStudio.Design.Serialization.CodeDom.VSCodeDomDesignerLoader.DeferredLoadHandler.Microsoft.VisualStudio.TextManager.Interop.IVsTextBufferDataEvents.OnLoadCompleted(Int32 fReload) 

Any idea ? I've tried classic things like clean NuGet Repo, Clean project, reboot VS19 (last available version), reboot computer, rebuild, etc.
I've also tried to create a new empty Form and just add inheritance to MaterialForm, the result is the same.
Compiling the project is working fine and launching it is also working, the UI is working well.

UP : I've done another test, removing the signing on MaterialSkin. And i've created a new Winform project with a empty Form, added my Nuget Package and inherit it, and it's giving me the same error.

when i close winform the dispose was not work

i have a question ,when i clsoing winform ,the form was closed ,but the process not stop,it was still runing,disposing was not disposed , it break at below :

    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

Error with ComboBox while using DataSource

When setting DataSource of a combobox, I get an error System.NullReferenceException as soon as I click on the combobox.

Here is my code, working for regular .Net combobox :

    Public Sub RefreshPosition()
        Dim cmd As New MySqlCommand
        Dim dt As New DataTable
        Dim da As New MySqlDataAdapter
        Dim sql As String

        Try
            sql = "Select * from Position"
            With cmd
                .Connection = connecter()
                .CommandText = sql
            End With
            da.SelectCommand = cmd
            da.Fill(dt)

            cmbLoc.DataSource = dt
            cmbLoc.ValueMember = dt.Columns(0).ToString
            cmbLoc.DisplayMember = strTitlePNom

            connecter().Close()
        Catch ex As Exception
            MsgBox(ex.Message)
        End Try
    End Sub

Consider migrating rendering to Google Skia

Current solution uses the Microsoft's GDI(+) library to draw the components, this is outdated.
One option is to ditch the GDI and use the Google's Skia lib instead, a mono-compatible port is available here and can be installed via Nuget. This would, however, break a lot of projects and would be a Major version increment and almost a complete lib rewrite. Further investigation and testing is required.

Can't Use Tools/Controls

Can't use 'some' tools/controls from the reference MaterialSkin

I'm creating a project with C# targeting .NET Framework 4.7 on Visual Studio 2015.
I have included this much on my project.

using MaterialSkin;
using MaterialSkin.Controls;

public partial class Form1 : MaterialForm

var materialSkinManager = MaterialSkinManager.Instance;
materialSkinManager.AddFormToManage(this);
materialSkinManager.Theme = MaterialSkinManager.Themes.DARK;
materialSkinManager.ColorScheme = new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE);

Tried dragging/double click controls in the toolbox to be included in the form.
What works:
Material Label
" radio button
" tab selector
" progress bar
" divider

Redesign message box

Inspired by the work done by spozt/BMS2MB I believe the message box could be a lot better.

inspiration:
image

I really like how Atlassian considers this UI pattern:

Use modal dialogs when you need a user response, to reveal critical information, or to show info without losing the overall context of a page. No other interactions on the main page can be accessed while a modal dialog is active. Modal dialogs are invasive to the user's workflow as they appear above all other content. Their usage is quite powerful, as it focuses the user on a single task. -- Atlassian Design System - Modals.

notes:

  • The form overlay should be called and should fade the content bellow
  • Support for icons
  • Support progress bars? this was deprecated by google, so should we do it?
  • Support for user created modals (not required)
  • The shadow beneath the modal, even tough it's nice, won't be feasible on widows forms with GDI (maybe migrating to Google Skia should be done at some point? See #37).

Missing ROBOTO

hello
I'd like to using this great ideas,
but can't build after from this commit -> a1b2891
that error is:

Error	CS1061	'MaterialSkinManager' does not contain a definition for 'ROBOTO_MEDIUM_10' and no accessible extension method 'ROBOTO_MEDIUM_10' accepting a first argument of type 'MaterialSkinManager' could be found (are you missing a using directive or an assembly reference?)	MaterialSkin	*\source\repos\MaterialSkin\MaterialSkin\Controls\MaterialListView.cs	100	Active
Error	CS1061	'MaterialSkinManager' does not contain a definition for 'ROBOTO_MEDIUM_10' and no accessible extension method 'ROBOTO_MEDIUM_10' accepting a first argument of type 'MaterialSkinManager' could be found (are you missing a using directive or an assembly reference?)	MaterialSkin	*\source\repos\MaterialSkin\MaterialSkin\Controls\MaterialListView.cs	142	Active
Error	CS1061	'MaterialSkinManager' does not contain a definition for 'ROBOTO_MEDIUM_12' and no accessible extension method 'ROBOTO_MEDIUM_12' accepting a first argument of type 'MaterialSkinManager' could be found (are you missing a using directive or an assembly reference?)	MaterialSkin	*\source\repos\MaterialSkin\MaterialSkin\Controls\MaterialListView.cs	255	Active
Error	CS1503	Argument 2: cannot convert from 'int' to 'System.Drawing.FontStyle'	MaterialSkin	*\source\repos\MaterialSkin\MaterialSkin\Controls\MaterialListView.cs	255	Active

how do I fix it?
thanks

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.