MetroFramework Modern UI Project

You may also like...

  • Oscar Zatarain

    Hi Dennis, two things that caught my attention are the window that appears when you click on the ‘settings’ button and the ‘settings’ window that follows when you enter the password.
    Which components are you using and how do you manage to slide the ‘settings’ window from the right?
    By the way, great work it looks very nice.

    • The one that slides is a panel, that I add programmatically when the button was clicked. For sliding effect I used the dot-net-transitions DLL from

      • Bhavesh Patel

        Thank you Sir.
        for provide a metro modern ui project. & Relative new technique.

  • seibah

    Hello Sir. I’m using your Framework for my SAD Project and I was wondering if I can tweak your code in the Tab Control. I’m pretty new to C# so I was having a hard time finding the code where I want to change. So if it’s ok with you Sir, I have a couple of questions. 🙂

    1. I was thinking of removing the Gray Color Line (please refer to the Red Arrow) in the tabs. If it’s possible, where and what part of the code should I edit? My guess is in MetroTabControl.cs or MetroTabControlDesigner.cs though I can’t find it.

    Or not really remove since it’s a control but I want to make the Gray Color Line be transparent or be plain gray.

    2. If that’s not possible Sir, may I ask for the RGB combination for the color you used on the line. I’ll try to add another color theme so when the tab is change it’ll not change the color like the one I encircled in the picture.

    Hoping for your reply. Thank you very much for the future help and for developing this epic MetroFramework.

    • Thank you for using the MetroFramework.

      1. To remove the gray color just edit the MetroTabControl.cs and remove the DrawTabBottomBorder(SelectedIndex, e.Graphics); under OnPaintForeground

      2. Nothing is impossible. : )

      3. Add the code below in MetroTile.cs under OnPaintForeground before the
      e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

      Color borderColor;

      if (isPressed || isHovered || isFocused)
      using (Pen p = new Pen(borderColor))
      p.Width = 3;
      Rectangle borderRect = new Rectangle(1, 1, Width – 3, Height – 3);
      e.Graphics.DrawRectangle(p, borderRect);

      • seibah

        Hello Sir! Thank you very much for replying to my questions. It’s really a big help for a C# newbie like me lol.

        Last question Sir, if you don’t mind. I was watching the video again hoping to have ideas on how to improve my system then I noticed something again. When you hovered to Create or Refresh in around 0:36 the opacity/transparency of the metrobutton/image changed. How do you make that Sir? Is that also part of the framework? Or it’s hard coded?

        Thank you again!

        • That is my modified MetroLink control, I added a feature from where I can two image. One for normal and the other for hover

          • Oscar Zatarain

            Could you provide us the control or tell us how can we manage to do that please?

          • I will create a video tutorial on how I made the UI of this project.

          • Oscar Zatarain

            Thanks, it will be great

          • seibah

            Looking forward to this video. ??

          • Have seen the tutorial but didn’t get the proper idea for MDI form and animation like you show in the tutorial.

          • Please check out my blog post about the sliding panel, this how I made this project. Seems like a MDI but its not.

      • seibah

        Sir I have a clarification. Where can I find the files for the controls (e.g MetroTile.cs, MetroTabControl.cs) in my solution? I saw it before in your sample program MetroFramework.Design but I think it was typed there on purpose.

        What I did in my project solution was add the 3 DLLs and toolbox components that mentioned in your installation tutorial. Should I edit the Dlls directly?

  • Julio Moreno

    Good day, I would like if you have a book or where I can find information about how to do something like that shown in the video ?. Thanks, I hope I can help.

    • I am working on a simple tutorial on how to achieve the same effects and UI on this project.

  • seibah

    Sir I have a clarification. Where can I find the files for the .CS Files for Controls (e.g MetroTile.cs, MetroTabControl.cs) in my solution? I saw it before in your sample program MetroFramework.Design but I think it was shown there on purpose since I can’t see these files in the MetroFramework.Demo.

    What I did in my project solution was add the 3 DLLs and toolbox components that mentioned in your installation tutorial. Should I edit the Dlls directly? Or how can I recompile the dlls the so that I can just edit the .cs in your sample program? Thanks!

    • You can download the whole project as a zip file in GitHub or fork it on own page

      • seibah

        Actually I did, that’s why I’m quite familiar about the .cs files. But what I’m confused is that for example after I edit the files for controls in your project how can I add it as a Toolbox Item so that I can use it in my forms? Can I upload as .cs files or do I need to recompile it as dll? 🙂

        • After you edit any of the file on the project you need to recompile it. After that it will produce a DLL under the bin folder.

  • Pingback: MetroFramework Modern UI Sample Project - DenRic Denise()

  • seibah

    Sir, how did you add the MetroFramework Components? (see attached pic with arrow)
    I’ve noticed that every time I edit the files under Control, the tools automatically updates. So I’m thinking rather than using the .dll files, I’ll just use these since I don’t need to always add again the tools.

  • Hrvoje Herceg

    Hello. Is it possible to add a image to the MetroTabPages? MetroTabPage have “ImageKey” and “ImageIndex”, but MetroTabControl do not have “ImageList” in Properties.

    If I programatically add ImageList to MetroTabControl and set “ImageKey” to MetroTabPage, I can see only empty space, but not Image I set. The same images are working on TabControl and TabPages.

    Tested images were .jpg and .png.


    • Yes its possible, I think someone on GitHub already done it. I actually didn’t include that on my version cause Windows 8 tab doesn’t have image

  • guillermo fazzolari

    Man your job is phenomenal !! I downloaded the project from github and everything works properly. Now, to reach do (speaking of the graphical interface only) of this project or another that this blog as a demo of what you can do: as I do ???? You can take a demo project that has other purposes and you use in the demos (leaving aside the own part of the business only so graphic).

    ten points your work !!!

    • I am glad that you liked my work.

      • guillermo fazzolari

        Denis: what about the questions?

        • Is your question to show on how I made this?

          • guillermo fazzolari

            It is about the possibility of similar to this example without, of course, show business logic that you have scheduled but only the part graphic and that’s obviously your program

  • Brice Larkin

    hi dens, do you have any idea how to wrap the text in metrotile?

    • What I can suggest is use a panel and change the BackColor to make it look like a tile.

  • Logical Development

    Hello, how can I customize the 2 themes or create my own?

  • Mark Joseph De Leon

    Hi sir Dennis. How can i add buttons in metrotabcontrol? like in first screenshot. i tried to drag a button in tabcontrol button there’s an error.

  • Gabsi Mohamed

    Hi D,

    In this video, i see a POS solution, can you share a demo…

    I’m a seller of POS machine & i’m looking for good software solution (Restaurant, Bar, Hotel..)


    • Correct this is a POS with Queuing System for SPA business. Not sure if it will fit with Restaurant, Bar, Hotel cause it is custom built. But we can make it it flexible if you want.

  • Augustine Williams Bruce

    Hi Dennis, Which buttons/Image are you using for the exit(back) and save. Where can I find them.?

  • Augustine Williams Bruce

    Dennis, please which control should I use to main the round shape of the back button?

  • Pedro Avila

    Hello, Dennis
    Wherefrom I manage the images of the buttons style meter, since it is setting, gurdar, to close, etc.

  • On

    Download link someone ?? can redirect me to this project ??

  • pianoboy11

    Is there away we can download the sample METRO UI project? Can you point me to the link

  • Hi Dennis, I’m testing the metroframework and have a question.
    I have a login screen now, in the load put the focus in the first textbox but the form not have the focus, appear another app that have open in my laptop. What can be the cause?