How to make flaps like Chrome

Asked

Viewed 1,646 times

0

I would like to know how I create tabs like that of Chrome. I thought with the TabControl but there is no way to put the close tab button and new tab. How I do?

PS: I want to make a standalone for a game that can open more than one guide to play. It’s a desktop application. (Windowsforms)

c#
  • 1

    But what is the idea? Web project or desktop? And the user by clicking on 'new tab', what will be the content of it? And why user will want to close some system tab?

  • 1

    A little guy teaches you how to create tabs with Menu, Multiview and View with CSS, see if it helps you: http://www.devmedia.com.br/howto create tabs-em-asp-net-usando-menu-multiview-e-view-comcss/7061

  • 1

    You need to develop your own user controls.

  • Hello, young man! I have a project using User Control, with it you can create your own . Net Components I leave here two links: https://gallery.technet.microsoft.com/Usando-User-Control-para-6d090bca e: https://gallery.technet.microsoft.com/Navegador-Abas-Sem-84048dd8 Hug!

1 answer

0


I suggest studying the creation of the controls themselves, there is a good project in Codeproject for this:

http://www.codeproject.com/Articles/91387/Painting-Your-Own-Tabs-Second-Edition

In the case of creating and removing tabs it is necessary to implement Onclick from a separate custom control (Usercontrol or Control) (attached to the tabs):

public partial class AddTabButton : UserControl
{
    public AddTabButton()
    {
        InitializeComponent();
    }

    // override on OnPaint ou OnClick para adicionar funcionalidades e efeitos
}

The same applies to the removal of a tab, you need to create a custom control (Usercontrol) where it consists of 2 items: Text and a close button, this button you would probably like to implement your own design (in case a class like Closetabbutton similar to the upper).

inserir a descrição da imagem aqui

It is also necessary to create the composer of the guides (which stores the collection of guides, controls the appropriate positions, etc).

[Serializable]
public class CustomTabCompositeGroup : UserControl
{
    IList<CustomTab> tabs = new List<CustomTab>();

    public CustomTabCompositeGroup()
    {

    }

    public void AddTab(CustomTab tab)
    {
        this.tabs.Add(tab);
        this.OnTabCollectionChanged();
        // Adicionar evento OnClick ao botão + da guia
    }

    private void OnTabCollectionChanged()
    {
        for (int i = 0; i < tabs.Count; i++)
        {
            // TODO: posição da tab


        }
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
    }
}

The rest is drawing on the screen, basically you overwrite the Onpaint method and draw your own tab:

[Serializable]
public partial class CustomTab : UserControl
{
    protected override void OnPaint(PaintEventArgs e)
    {
        // TODO: desenhar sua guia

        Graphics graphics = e.Graphics;

        graphics.DrawLine(Pens.Black, new Point(), new Point(e.ClipRectangle.Right - 1, 0));

        base.OnPaint(e);
    }
}

the methods necessary to draw the guide are here: http://msdn.microsoft.com/en-us/library/system.drawing.graphics(v=vs.100). ASPX

What’s all this about? Well, Windows has its own implementation of Tabs, if you want to create yours should follow the same path as Chrome, starting from "almost zero".

Note: Creating a custom tab control is an arduous task, especially with Google Chrome-like functionality where tabs can float over the bar and scroll to a new window, the Chrome Tabs code is located here and is extended:

http://src.chromium.org/viewvc/chrome/branches/2105/src/chrome/browser/ui/tabs/

2105 is the Branch of the project

Browser other questions tagged c#

You are not signed in. Login or sign up in order to post.