TabControls don't look Material

[clementpoiret]

The MaterialTabControl look like a normal TabControl, but all others components work. http://img11.hostingpics.net/pics/227095Screenshot72.png

[lukeskinner]

On a new test project I was able to get this working using the 0.2.0 version of the MaterialSkin NuGet package.

Steps to configure the MaterialTabControl:

1. Add a MaterialTabSelector to the form.
2. Add a MaterialTabControl to the form.
3. Click on the MaterialTabSelector in the design view, go to the properties and update the BaseTabControl property to point to the MaterialTabControl added in step 2.
4. Save the form and close the form design view. Re-open the design view and it should now show the tabs in the MaterialTabSelector (changing the BaseTabControl or adding new tabs does not refresh the designer at the moment).

[clementpoiret]

Thanks a lot ! I'm a bit disapointed by the way of this control work, is this possible to change the color of the MaterialTabSelector ? Thanks !

[lukeskinner]

There is a MaterialSkinManager which allows you to change the theme and color scheme - you can find the source code for the demo application at https://github.com/IgnaceMaes/MaterialSkin/tree/master/MaterialSkinExample.

Album of themes/colors in the demo application

Example code for a form which has two buttons to change the theme and/or color scheme (taken from the demo application source code). You can select the colors you wish to use by setting materialSkinManager.ColorScheme in the form constructor.

public partial class Form1 : MaterialForm
{
    private readonly MaterialSkinManager materialSkinManager;

    public Form1()
    {
        InitializeComponent();

        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);
    }

    private void materialButton1_Click(object sender, EventArgs e)
    {
        materialSkinManager.Theme = materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? MaterialSkinManager.Themes.LIGHT : MaterialSkinManager.Themes.DARK;
    }

    private int colorSchemeIndex;
    private void materialRaisedButton1_Click(object sender, EventArgs e)
    {
        colorSchemeIndex++;
        if (colorSchemeIndex > 2) colorSchemeIndex = 0;

        //These are just example color schemes
        switch (colorSchemeIndex)
        {
            case 0:
                materialSkinManager.ColorScheme = new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE);
                break;
            case 1:
                materialSkinManager.ColorScheme = new ColorScheme(Primary.Indigo500, Primary.Indigo700, Primary.Indigo100, Accent.Pink200, TextShade.WHITE);
                break;
            case 2:
                materialSkinManager.ColorScheme = new ColorScheme(Primary.Green600, Primary.Green700, Primary.Green200, Accent.Red100, TextShade.WHITE);
                break;
        }
    }
}

[clementpoiret]

Thanks a lot,

But I deleted the code from my mainform and the partial class from the designer but I still have a residual bug :

When I click outside of the window a bar appear at the top but the form is made with no borders... I'm using vb.NET

[thesobercoder]

I was a bit disappointed to see that the tab control had to be implemented using two different controls. It'd be great if you can somehow make them one unified control. And one more suggestion would be to make the skin manager a global like devexpress does. For DevExpress skins you just have to wire up the theme once in Program.cs and then you're done. All forms will automatically use those themes.

[IgnaceMaes]

The default TabControl is hard to theme. It was impossible to do the skinning needed for MaterialDesign in it. I've made a second control so I was totally free in the size and placement of the Tab Selectors. I see the struggle, 2 controls kinda suck. However it might be possible to embed the TabControl in the TabSelector? It's worth experimenting with it, because it would be way nicer.

MaterialSkin's theme manager currently is a Singleton, however you still have to add the forms manually. I don't know how DevExpress's manager works internally. But it would be nicer to have that done automatically.

[thesobercoder]

Why don't you just download the DevExpress WinForms trial. They also include the source code. I think that'll help you. I have used DevExpress in the past and can say that they can write good controls. For how they achieved theming their XtraTabControl check their source.

[isdzulqor]

how to make tab view in vb net.? I didn't find BaseTabControl in materialTabSelector properties. Iam using vb net

[natalie-o-perret]

@soham85 The sources of DevExpress are not perfect either, they have a finite number of resources and a certain technical debt to pay back to some extent..

Just have a look at the sources of the some controls, like the GridControl or event their XPO DAL you can see that a lot of not that good legacy code has not been refactored for ages.

I'm using the DevExpress Winforms subscription on a daily-basis, but I already had to hack it a bit here and there to make it suitable to my needs.

It's a good library it saves me tons of effort but for god sake don't think that just because it's kind of famous and maintained by more people the quality of the source code is much better... cause it's not that good, it's not the worst code I have ever seen either.

Just think twice before getting inspired by some big libraries like that DevExpress, Telerik and others they all have to make money, they also have their deadlines, limited resources and all the limitations that you usually experienced when you are working for a company.

@IgnaceMaes As it has already been pointed out, avoid as much as you can several controls just for creating a TabControl, usually one control should be made of... well one control, the rest is all about painting right.

[harvey-amora]

@clementpoiret @IgnaceMaes Hi, just a quick question how can I make tab controls side aligned and vertical? Do you have any tutorials to follow? Thanks.