dcsimg
Results 1 to 9 of 9

Thread: Win Tab Design

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Mar 2005
    Posts
    419

    Win Tab Design

    Hi,

    I am wondering if it is possible to create Tab control as shown in the attached image.

    Ideally would like to use native controls available in VS 2019.

    Any suggestions will be of great help.

    Many thanks
    Attached Images Attached Images  

  2. #2

    Thread Starter
    Hyperactive Member
    Join Date
    Mar 2005
    Posts
    419

    Re: Tab Style

    All,

    A similar tab is also available in VS 2019 upgrade wizard; can someone advise how this design can be achieved?

    thanks
    Attached Images Attached Images  

  3. #3
    .NUT jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    102,249

    Re: Win Tab Design

    Windows Forms? WPF? UWP? Something else? Please ALWAYS provide ALL the relevant information.

  4. #4

    Thread Starter
    Hyperactive Member
    Join Date
    Mar 2005
    Posts
    419

    Re: Win Tab Design

    Apologies for the confusion.

    Am looking for Windows Forms Solution (VB 2019)

    thanks

  5. #5

    Thread Starter
    Hyperactive Member
    Join Date
    Mar 2005
    Posts
    419

    Re: Win Tab Design

    Apologies for the confusion.

    Am looking for Windows Forms Solution (VB 2019)

    thanks

  6. #6
    .NUT jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    102,249

    Re: Win Tab Design

    You're limited with what you can do with the standard controls. You'd have to create your own control that inherited TabControl and, even then, I'm not sure how close you could get to that look and feel. If you want to try, you could start here.

    You'd have a far better chance getting that sort of result using WPF, which was built from the ground up with customisation in mind, or something else XAML-based.

  7. #7
    Hyperactive Member
    Join Date
    Jun 2018
    Posts
    337

    Re: Win Tab Design

    Here is an example that uses a class that inherits such as jmc mentions.

    There are some additional features you can use or not.

    The example makes the controls. Just cut and paste the code to an empty form to run. Change the form name as required.

    Name:  a3.gif
Views: 31
Size:  45.6 KB


    Code:
    Imports System.Drawing.Drawing2D
    Imports System.Drawing.Text
    
    Public Class Form5
        Private WithEvents Tab1 As New TabControlEX2 With {.Parent = Me,
            .Location = New Point(10, 10), .Size = New Size(450, 250), .BackColor = Color.White}
    
        Private Sub Form2_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            ClientSize = New Size(500, 300)
            BackColor = Color.White
    
            Tab1.TabPages.Add("Page One")
            Tab1.TabPages.Add("Page Two")
            Tab1.TabPages.Add("Page Three")
            Tab1.ItemSize = New Size(100, 22)
            Tab1.ButtonSize = New Size(18, 18)
            Tab1.Font = New Font("Segoe UI", 10, FontStyle.Regular)
    
            'define your own image path
            'Tab1.TabIcon = New Bitmap("c:\bitmaps\crlogo16b.ico")
    
        End Sub
    
        Private Sub Form2_Resize(sender As Object, e As EventArgs) Handles Me.Resize
            Tab1.Width = ClientSize.Width - (Tab1.Left * 2)
            Tab1.Height = ClientSize.Height - (Tab1.Top * 2)
            Tab1.Invalidate()
        End Sub
    End Class
    
    Class TabControlEX2
        Inherits TabControl
        Public TabIcon As Bitmap = Nothing
        Public ButtonSize As Size = New Size(16, 16)
        Private MouseState As Integer
    
        Sub New()
            DoubleBuffered = True
            Alignment = TabAlignment.Top
        End Sub
    
        Protected Overrides Sub OnCreateControl()
            MyBase.OnCreateControl()
            SetStyle(ControlStyles.UserPaint, True)
            SizeMode = TabSizeMode.Fixed
        End Sub
    
        Protected Overrides Sub OnControlAdded(ByVal e As ControlEventArgs)
            MyBase.OnControlAdded(e)
            For i As Integer = 0 To TabPages.Count - 1
                TabPages(i).BackColor = Color.White
                TabPages(i).ForeColor = Color.FromArgb(66, 79, 90)
                TabPages(i).Font = Font
            Next
        End Sub
    
        Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
            MyBase.OnPaint(e)
    
            With e.Graphics
                .SmoothingMode = SmoothingMode.HighQuality
                .TextRenderingHint = TextRenderingHint.ClearTypeGridFit
                .Clear(Parent.BackColor)
    
                Using brText As New SolidBrush(Color.FromArgb(56, 69, 80)),
                        brGray As New SolidBrush(Color.FromArgb(55, Color.LightSkyBlue)),
                        brHighlight As New SolidBrush(Color.FromArgb(255, Color.AliceBlue)),
                        pGray As New Pen(Color.FromArgb(255, 200, 200, 200)),
                        pHighlight As New Pen(Color.Blue, 1)
                    Dim TabRect As Rectangle
    
                    For i As Integer = 0 To TabPages.Count - 1
    
                        TabRect = GetTabRect(i)
    
                        .FillRectangle(New SolidBrush(Color.White), New Rectangle(TabRect.Location.X - 2, TabRect.Location.Y - 2, TabRect.Width, TabRect.Height + 1))
    
    
                        If TabRect.Contains(Me.PointToClient(Cursor.Position)) And Not SelectedIndex = i Then
                            'mouse highlight background
                            .FillRectangle(brGray, New Rectangle(TabRect.Location.X - 2, TabRect.Location.Y - 2, TabRect.Width, TabRect.Height + 1))
                            'DrawButton(e.Graphics, TabRect)
                        ElseIf SelectedIndex = i Then
                            'hightlight selection draw background for selected tab
                            '.FillRectangle(brHighlight, New Rectangle(TabRect.Location.X - 2, TabRect.Location.Y - 2, TabRect.Width, TabRect.Height + 1))
                            'highlight
                            .DrawLine(pHighlight, New Point(TabRect.X - 2, TabRect.Y + ItemSize.Height - 1), New Point(TabRect.X + TabRect.Width - 2, TabRect.Y + ItemSize.Height - 1))
                            'DrawButton(e.Graphics, TabRect)
                        Else
                            '.FillRectangle(Brushes.SkyBlue, TabRect)
                            '.DrawLine(Pens.Gray, New Point(TabRect.X - 2, TabRect.Y + ItemSize.Height - 2), New Point(TabRect.X + TabRect.Width - 2, TabRect.Y + ItemSize.Height - 2))
                        End If
    
    
                        'draw the text
                        Dim textSize As SizeF = .MeasureString(TabPages(i).Text, Font)
                        Dim textX As Integer = CInt(TabRect.X + (TabRect.Width / 2) - (textSize.Width / 2))
                        Dim textY As Integer = CInt(TabRect.Y + (TabRect.Height / 2) - (textSize.Height / 2))
                        If TabIcon IsNot Nothing Then textX += CInt(TabIcon.Width / 2)
    
                        .DrawString(TabPages(i).Text, Font, brText, textX, textY)
    
                        'draw the icon
                        '.DrawImage(TabIcon, New Rectangle(TabRect.X + 5, CInt(TabRect.Y + (0.2 * TabRect.Height)),
                        '                    CInt(0.6 * TabRect.Height), CInt(0.6 * TabRect.Height)))
                    Next
    
                    'bottom line 
                    .DrawLine(pGray, New Point(0, ItemSize.Height + 2), New Point(Width, ItemSize.Height + 2))
                End Using
            End With
        End Sub
    
        'Private Sub DrawButton(g As Graphics, TabRect As Rectangle)
        '    With g
        '        'draw the button
        '        Dim bRect As New Rectangle(-5 + TabRect.X + TabRect.Width - ButtonSize.Width,
        '                                       CInt(TabRect.Y + (TabRect.Height / 2) - (ButtonSize.Height / 2)),
        '                                       ButtonSize.Width, ButtonSize.Height)
        '        .DrawRectangle(Pens.Gray, bRect)
    
        '        Dim br As New SolidBrush(Color.White)
    
        '        Select Case MouseState  'color by mouse state
        '            Case 1  'mousedown
        '                br.Color = SystemColors.ButtonShadow
        '            Case 2  'mousemove
        '                br.Color = SystemColors.ButtonShadow
        '            Case Else
        '                br.Color = SystemColors.ControlText
        '        End Select
        '        .DrawString("X", New Font(Font.Name, Font.Size, FontStyle.Bold), br, bRect.X + 2, bRect.Y)
        '    End With
    
        'End Sub
    
        Private Sub Tab_MouseDown(sender As Object, e As MouseEventArgs) Handles Me.MouseDown
            If SelectedIndex > -1 Then
                MouseState = 1
            Else
                MouseState = 0
            End If
            Invalidate()
        End Sub
    
        Private Sub Tab_MouseMove(sender As Object, e As MouseEventArgs) Handles Me.MouseMove
            If SelectedIndex > -1 Then
                Dim tabTextArea As Rectangle = GetTabRect(SelectedIndex)
                If tabTextArea.Contains(e.Location) Then
                    If e.X > tabTextArea.X + tabTextArea.Width - ButtonSize.Width Then
                        Cursor = Cursors.Hand
                        If MouseState = 0 Then MouseState = 2
                    Else
                        Cursor = Cursors.Default
                        MouseState = 0
                    End If
                    Invalidate()
                Else
                    Cursor = Cursors.Default
                    MouseState = 0
                End If
            End If
        End Sub
    
        Private Sub Tab_MouseUp(sender As Object, e As MouseEventArgs) Handles Me.MouseUp
            Dim tabTextArea As Rectangle = GetTabRect(SelectedIndex)
    
            If MouseState = 1 AndAlso e.Button = MouseButtons.Left AndAlso e.X > tabTextArea.X + tabTextArea.Width - ButtonSize.Width Then
                TabPages.Remove(TabPages(SelectedIndex))
            End If
            MouseState = 0
        End Sub
    
        Private Sub Tab_MouseLeave(sender As Object, e As EventArgs) Handles Me.MouseLeave
            MouseState = 0
        End Sub
    End Class

  8. #8

    Thread Starter
    Hyperactive Member
    Join Date
    Mar 2005
    Posts
    419

    Re: Win Tab Design

    Wow... that looks cool; Wondering if the header also can be customized to look similar to attached image?

    Cheers..

  9. #9
    Hyperactive Member
    Join Date
    Jun 2018
    Posts
    337

    Re: Win Tab Design

    Quote Originally Posted by surya View Post
    Wow... that looks cool; Wondering if the header also can be customized to look similar to attached image?

    Cheers..
    Yes you can add a header to your form like that many ways.

    Use a panel control and set docking to top. Then add another panel below it and put your tab control on it.

    Or draw the header yourself on the form and locate the tabcontrol below it.

    If you see an example someone did then you can do it too in most cases. Just have to learn and figure. If you cant figure it then ask another new question about it since it has nothing to do with this tabcontrol drawing question really.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width