MetroFramework Modern UI Sample Project

You may also like...

  • Rodney Jan Mandap

    how did you create the navigational button like save and back, when is not hover it’s color gray and when it is hovered it is color black. Does it contains a two picture with color gray and black image or there is another technique?

    • That is my modified MetroLink button. And you are correct it contains two pictures with color gray and black.

      • Rod
        • My co-worker created the original version of that control that is MetroGroup button

          • Rod

            How can I create MetroGroup?

          • Will try to upload the control together with the my GitHub fork of MetroFramework

          • Rod

            thanks xD

          • Rod

            can i use fusionchart in

          • Yes, you just need to add a flash control and load the swf as movie then add XML data

          • Rod

            In using the fusionchart, do I just need to add fusionchart.dll or there’s more files to add in the project?

          • You just need the SWF files

          • Rod

            where can I find the swf files? I only found the fusionchart.dll and alot of javascript files

          • Rod

            Can I do this in especially the left navigational bar?

          • Rod

            Is it possible to do this in Especially the left navigational panel.

          • Yes its possible. MetroPanel and MetroLinkButton

          • Rod

            how about the content of the link button.. if clicked the content show and if the other button is clicked the content of the other button shows… what’s best tool to use? is it panel or tab control or etc…

          • Its MetroContextMenu, its already available in MetroFramework version 1.3.0

          • Rod

            how can I move the contextMenu to the top right?

          • Rod

            and how to align the image in metrolinkbutton to left?

          • Rod

            Sir could you please create a tutorial in creating a chart using fusionchart with mysql in…

          • Ok I will make one maybe tomorrow.

          • Rod

            thanks 🙂

          • Rod

            Sir, what component did you use on the following circled pictures below ?

          • Hi Rod, that is a MetroLinkButton, I modified it to allow adding two images one for normal and the other one for mouse hover. I am creating the tuts for that on how to use the new feature and commit my update to GitHub. Just stay put or subscribe to my email list so that you will get notified when my tuts are up.

          • Rod

            Ok sir…I’m waiting for it and also the fusionchart tutorial xD

          • Rod

            how about the dropdown if you click it…just like on the top right corner when you click there’s the the dropdown that consist of logout, exit etc..

          • Rod

            How can I do that MetroGroup button?

    • Saurabh Singh

      Just use swipe()

  • Brice Larkin

    how can I use metroStyleExtender?

    • I don’t use metrostyleextender cause its not that effective.

      • CV Team

        Is metrostyleextender required for horizontal alignment (RIGHT-JUSTIFY) a label? I cannot seem to get any label to “right justify” using the texalign = MiddleRight

        • Check your label’s AutoSize property, set it to false. That should work.

          • CV Team

            That worked perfectly! Thank you.

          • You’re welcome. Happy coding.

          • Julio

            Please upload the sample “equipment maintenance system”!

  • Brice Larkin

    Hi Dennis,
    Are you changing the metrolink image at runtime? did you use hover and leave mouse event? Thank you in advance kabayan!

    • I updated the MetroLink button to allow adding of image, one is for normal and the other is for focus and hove. I will upload my update on my GitHub account.

      • Brice Larkin

        Thank you for your reply. for now I am the hover and leave mouse event to change the image. One more thing, I noticed in your sample above that you used metrotabcontrol and at the same time there is a search, print and refresh events on the right side. did you modify the metrotabcontrol to accommodate this controls? Thank you and good day kabayan!

        • No. I just align those buttons to tabs

          • Brice Larkin

            I’ve been trying to align the buttons and textbox that I used. and metrotabcontrol is not allowing me to drop or put the controls inline with the tabs. any tip or properties to be set? Thank you and good day kabayan.

          • Brice Larkin

            Hi Dens, I was able to find a way in doing it. Again thanks.

          • Good to know that. Happy coding! : )

  • Ben

    Hi, I downloaded the dll’s via nuget and added the main dll to my toolbox. I created a project in visual basic and all works fine. But the next day I opened it on another computer and now there are only some controls left. Some are missing. I created a new project and imported the 3 dll’s again to check if it is a problem on my pc. But I there are still not showing. Even if I import them again. Help me.

    • Ben

      These are the left controls

      • Ano pong .net framework gamit mo and visual studio? Version 1.3.0 po ba yung nadownload nyo?

        • Ben

          Sorry in english?

          • Sorry I updated my response.

          • Ben

            I did installed a fresh copy of visual studio 2015 community with .net 4.5 and Version 1.3.0

          • Try changing the .net framework if it will solve the problem

  • Brice Larkin

    I noticed in your sliding panel that it has a left border. is there a way to implement this in metropanel or metrotabcontrol? thanks and good day.

  • Pingback: MetroLink with Image - MetroFramework - DenRic Denise()

  • Rod

    what chart did you use in this program?

  • Timothy Gandionco

    Can I adjust the font name and font size of text box?

    • One of target of this UI framework is to make a unified look and feel on every program that will use it. And that is the reason it was disable by purpose. But you can make get a copy of source code from GitHub and freely change it. Happy Coding.

      • Timothy Gandionco

        Any way to change scroll bar of text box?

  • Brice Larkin

    what report writer have you used in this sample? Thanks in advance

    • I used C1Report from ComponentOne. For the MetroTile I think it is not yet included on my updates.

      • Brice Larkin

        any tip how can I implement that hover over the tiles? or Is it included now in your fork? Thanks in advance.

  • Bagus Yudi

    Sir can you explain what component did You use for CRUD modal form?is it just a form or an user control? And also can You please post or maybe send me via email the code how to show the CRUD modal form and how to make the CRUD modal form has the same theme/style as the main form..thank You

  • Carlos Sitolino

    you can send the source for learning?

    • You can check my other blog post for the tutorial on how to make this kind of project.

  • Ddfg Sddg

    hi. i made 3 metro text button on metrowinform, and when i click one button, the button that i clicked change its Style Color, and other’s not. This work but so slow and lag. what’s wrong?

  • Justine

    I love this UI design, please share this project.
    Thanks in advance.

    • Check out my other blog post. I already have a tutorial on how to make this kind of design.

  • Romel

    where can i get the icons sir that you are using?

    • I usually get those icons from and

  • Mohit Malviya

    Sir, Could you please share source code of sample UI Project for learning logic you used ?

  • jose luis garcia bautista

    Hello Dennis: Nice job, i have the last version downloaded from GitHub but i experimented a issue when i try use the MetroTaskWindow, the error is for “Null reference exception” in this lines:

    IContainer mother = (IContainer)fieldInfo.GetValue(owner)

    From class MetroStyleManager.cs

    public object Clone(ContainerControl owner)

    if i comment some lines displays succesfully the MetroTaskWindow.

    Tanks a lot for this great framework, very nice.

    • Updates for this issue is already available on my GitHub account

  • Hue Lee

    nice i love it

  • Sarmad Indhar

    sir how did you created this plz guide me i m new at metro

    • That is just a MetroTab control and the chart if FusionCharts

  • Sarmad Indhar

    Sir plz share the code of sliding panels and sliding forms in VB
    plz plz

  • Sarmad Indhar

    Sir plz share the code of sliding panels and forms in VB
    plz plz

  • Sarmad Indhar

    sir how can i use same side bar or panel on all forms plz guide?

    • On this design I only have one form. The other screens appearing is just panel sliders.

  • Sarmad Indhar

    sir i m not talking about this project in particular i m talking in general that can one panel be used on different forms?

  • Ademard Pion

    Hi, how do we use the htmlpanel ?

  • RENAUDIN Vincent

    Hi. Great project, thanks !
    Is that possible to personnalize a metrobutton backcolor (on focus, on mouse over, on mouse click) ? For example, if my form is blue, I would like my metro button backcolor to be blue. I tried several things like btnLogIn.UseCustomBackColor = true and then btnLogin.Backcolor = color.Blue. But everytime, my btnLogin get Green and black when I click.
    Thanks for your reply. Regards

    • Yes, you just need to set the property UseCustomBackColor to True

  • Jeric John Lina-ac Carillo

    Pls Githb accnt

    • Please check the sidebar. My Github account link is available there.

  • Ly Sokheng

    can you show me how to change color of button in metro framework?

    • You can change the style. If you want a custom backcolor just set the property UseCustomBackColor to True

  • Jegatheeswaran

    it possible to inherit tool tip control form slider component to other forms. if is possible please explain to me

    • For tooltip you can add it in any place. Regardless if it is in a custom control or inside a form

  • leedaihung

    Hi Dennis, the metro control is possible to make the chat panel as Skype? can be show the text, emoji…? and selection the text?

  • dhruv patel

    sir please tell me that how can i slide the setting panel in

  • Thanh hoàng

    Please upload full project like this video, I downloaded the project from above link but when i login i can’t see anything

  • Hasekura Yuuta

    is there a cod that dat pnlLogin.CS of yours?

  • Omkar Salokhe

    I have a form named Appearance and I have applied MetroStyleManager. Now i want to apply that theme and color to other forms in that project. How to do that.?

  • Nouri Yacine

    hello brother i have add a new button to main Form . this button to swipe the login panel back again .. (lock the program again ) .. i add this code to the button don’t work :
    _login.swipe(true); .. what should i do bro ?

    • Saurabh Singh

      use swipe()

      • Nouri Yacine

        yes i did it. it’s not working ?
        i hope you get what i means (swipe => swipe back ) 😀
        can you type that code here ?

        • Saurabh Singh

          Have you used only swipe() I mean without any arguments like swipe(true).

  • Pubudu

    HI I have created an application with multiple panels (which are stacked one below the other)in a single form application using metroUI. I navigate through panels by bringing the required panel front and make visible false for other panels. But there is an flickering effect when performing that . What am I doing wrong? Is there a proper way to handle this Scenario?