0

C#, .NET Framework 4.8, WinForms:

I want to create a vertical icon bar with the same look & feel as in Microsoft Teams (see picture). So also hovering, highlighting, short cuts, etc. should be the same.

Which of the standard controls is the best for this? Would you take a TreeView? Or do I need to make a custom control? How is it solved in MS Teams?

enter image description here

askolotl
  • 964
  • 1
  • 13
  • 27
  • 1
    This would be easy in WPF. Is that an option for you? In WPF it would be a TabView or something like that. – Stefan Jan 05 '20 at 11:25
  • 1
    The control in itself is simple (a calculated *semplicity*). You can build a UserControl, a custom control would do. The more difficult part is to replicate the highlight. In WinForms, it can be reproduced with a [LinearGradientBrush](https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.lineargradientbrush) to which you apply a color [Blend](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.drawing2d.blend). The controls can be aligned/organized using a TableLayoutPanel (so you can insert/remove cells, to keep a specific button always in the same position). – Jimi Jan 05 '20 at 11:40
  • 1
    With a UserControl, override the `OnEnter` and `OnLeave` methods, to redraw/show the colored bar on the left and repaint/ blend the highligh. The Icon can be added to a Label (for transparency) or painted directly on a surface. Using a Label, is simpler and easier to implement (using the Label's properties for alignment. It also supports DoubleBuffering on its own). – Jimi Jan 05 '20 at 11:47
  • ToolStrip or some [other options](https://stackoverflow.com/a/36252030/3110834). – Reza Aghaei Jan 05 '20 at 15:30
  • If using a different technology is an option, take a look at [NavigationView](https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview?WT.mc_id=DT-MVP-5003235) which is on of the [Controls for UWP apps](https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/?WT.mc_id=DT-MVP-5003235). – Reza Aghaei Jan 05 '20 at 15:53
  • @Jimi thanks for your input. I finally implemented it as a plain simple UserControl (because it gives me more control ;) ) - Works super fine. BTW, Double Buffering is supported by UserControl, No flickering. Great. – askolotl Jan 08 '20 at 12:56

1 Answers1

0

I have no Idea how this is made in MS Teams, but what I should do I create a custom view with the selector on the left with a visibility state, so when you select one of the items, you change the background color and make the selector visible at the selected item. This will result in a similar design as in MS Teams!

I hope you can start working on it, just ask if you can't figure something out!

A. Vreeswijk
  • 822
  • 1
  • 19
  • 57