[Zilog80]

Side-note #1: My gif recorder software sucks, so posted gifs doesn't have 'high' quality

Side-note #2: The control is builded in run time. You can serialize the whole tree-node or simply make your own class containing all the tree-node

For Demo #1, Demo #2 and Demo #3 this is all the source code we write in our 'business logic layer':

PHP Code


<?php 
' Somewhere (in contructor class or Form Load):
UC_NavBar1.Initialize(New NavBarModel(), New WPNavBar.ThemeSelector(WPNavBar.Theme.Dark).CurrentTheme)
 
Private Sub UC_NavBar1_SelectedItem(item As NavBarItem) Handles UC_NavBar1.SelectedItem
    LblInfo.Text = $"CONTENT SAMPLE -> ID: {item.ID} Text: {item.Text}"
End Sub 


Demo #1:
Spoiler (Click to View)



As you can see seems a themed TabControl (but isn't a TabControl), with its hover stuff and selected item.
The width (and height) is resizable in design time. So you can adjust it on your form make sense to design tool 'look & feel'

The 'tree-node' is something like:

PHP Code


<?php 
items = New List(Of NavBarItem)() From
{
    New NavBarItem With {.ID = x, .Text = "Desktop", Icon = New ItemIcons With {some stuff here}},
    New NavBarItem With {.ID = x, .Text = "Store", Icon = New ItemIcons With {some stuff here}},
    New NavBarItem With {.ID = x, .Text = "Post", Icon = New ItemIcons With {some stuff here}},
    ...
} 


Demo #2:
Spoiler (Click to View)



Navigation control for the win!

Viewing Demo #1 you might think: 'Oh c'mon, another themed tabcontrol'.
But really this is a Navigation control.

As you can see, when you select a main category, if that category has childs the control expands the category and show it childs (and select by default the first child)

Aditionally when you expand a node, if the selected itemt doesn't fit in control height, the control autoscrolls to ensure that item visibility. You can also use mouse scroll button to scroll up & down through de control (and without the 'ugly' vertical scroll bar)


Demo #3:
Spoiler (Click to View)



Why only one child? Making it N-childed

Sometimes we'll need some kind of hierarchy. In the Demo #3 we our tree-node is somenthing like:

Spoiler (Click to View)

PHP Code


<?php 
items = New List(Of NavBarItem)() From
{
    New NavBarItem With {.ID = x, .Text = "Desktop", Icon = New ItemIcons With {some stuff here}, .Childs = New List (Of NavBarItem() From {
                New NavBarItem() With {.ID = x, .Text = "Start"},
                New NavBarItem() With {.ID = x, .Text = "My comments"},
                New NavBarItem() With {.ID = x, .Text = "Site Statistics"},
                New NavBarItem() With {.ID = x, .Text = "My blogs", .Childs = New List (Of NavBarItem() From {
                        New NavBarItem() With {.ID = x, .Text = "Custom #1"},
                        New NavBarItem() With {.ID = x, .Text = "Custom #2"},
                        New NavBarItem() With {.ID = x, .Text = "Custom #3"},
                        }
                    },
                New NavBarItem() With {.ID = x, .Text = "Blogs I follow"},
                ...
                }
            },
    New NavBarItem With {.ID = x, .Text = "Store", Icon = New ItemIcons With {some stuff here}, .Childs = New List (Of NavBarItem() From {
                New NavBarItem() With {.ID = x, .Text = "Main"},
                New NavBarItem() With {.ID = x, .Text = "Premium Themes"},
                New NavBarItem() With {.ID = x, .Text = "My domains"},
                ...
            },
    New NavBarItem With {.ID = x, .Text = "Post", Icon = New ItemIcons With {some stuff here}, .Childs = New List (Of NavBarItem() From {
                New NavBarItem() With {.ID = x, .Text = "All"},
                New NavBarItem() With {.ID = x, .Text = "Add new"},
                New NavBarItem() With {.ID = x, .Text = "Categories"},
                New NavBarItem() With {.ID = x, .Text = "Tags"}
            },
    ...
} 


Demo #4:
Spoiler (Click to View)



Making it more dynamic.

Sometimes we'll need to change our navigation control in run-time due user inputs.
Imagine user does not have licence for certain stuff. You can disable/hide this stuff in navigation control.

This can be done easily:

This will turn invisble the item with ID = 1004:

PHP Code


<?php 
UC_NavBar1.ItemChangeVisibility(false, 1004) 


And this will disable the item with ID = 1004:

PHP Code


<?php 
UC_NavBar1.ItemChangeEnable(false, 1004) 


And maybe sometimes we'll need to "add new" items to control in run-time due user inputs/options, like you can see in Demo #4-

Update (11/04/2016)

Demo #5:
Spoiler (Click to View)



- Implemented a new method to select a item in run-time
- Implemented a new method to change theme in run-time
- Fixed resize width behaviour

Update (11/05/2016)

Demo #6:
Spoiler (Click to View)



- Fixed hierachy draw & autoexpand. Now you can really have N childs.
- Improve theme behaviour: Now you can define colors in theme class that draws right colors based on 'item depth'. You can define BackColor, Hover BackColor, selected item BackColor, and font brushes "by depth".

Update (11/06/2016)

Demo #7:
Spoiler (Click to View)



- Implemented a new glyph in all 'expandable childs'

What other features can i add to this control before release the source code?

Thx in advance.

Update (11/08/2016)
Source code: https://hackforums.net/showthread.php?tid=5458100

[Ninja]

Really cool and neat. Are there design time options for in the designer as well?

[idb.]

Looks very nice bud. :) Reminds me of the navigation from WordPress. Here's an idea, you can have an option like WP does where the navigation is "minimized" and only the icons are visible. Basically just a nice little feature to free up some space on your form during run-time. Wouldn't be hard to implement either. Just a width resize on all your "nodes". Anyway, good job!

[SIM-1847363]

Good job reminds me of my Sarrow Tab selector. And I can understand how much of a b*tch it is to get everything located right and looking right. Great Job.

[Zilog80]

Really cool and neat. Are there design time options for in the designer as well?

Thx bro. This was planned for using myself. But I could try to add some options in the VS IDE designer.

Looks very nice bud. :) Reminds me of the navigation from WordPress. Here's an idea, you can have an option like WP does where the navigation is "minimized" and only the icons are visible. Basically just a nice little feature to free up some space on your form during run-time. Wouldn't be hard to implement either. Just a width resize on all your "nodes". Anyway, good job!

In fact the demos I posted in #1 are the WP Admin Tool "look & feel" but in WinForms. 🙂
I will check for this feature you posted.

Added a new Demo 5 in #1 post.

I hope to work in the control this weekend (cleaning the code and some refactoring) to release the source code (GitHub) as soon as possible.

Waiting for more features.

Thx in advance.

[CodeAssassin]

Very nice, and wicked to see some originality and something useful! Keep up the hardwork bro :p

[Ninja]

Thx bro. This was planned for using myself. But I could try to add some options in the VS IDE designer.

I was thinking like a normal tabcontrol you can click the tiny arrow and a panel appears where you can add and remove tabs.

[DisguiserNET]

Im waiting for the release! Looks really awesome