RobIII

De standaard winforms treeview en listview zijn altijd al een beetje een doorn in mijn oog geweest; ze zien er gedateerd uit zoals je in onderstaand screenshot zult zien. Toch is het met een paar regels code makkelijk om een wat 'modernere look' toe te passen. Weinig code, veel plezier. Dat is altijd goed

Op de één of andere manier zijn de listview en treeview sowieso niet 's werelds fijnste controls om mee te werken waardoor ik wel eens ben uitgeweken naar third-party controls die nét even dat beetje extra bieden. Zo is het bij een 'standaard listview' belachelijk lastig om een pijltje in de columnheaders toe te voegen voor een sorteerindicatie en zou je soms willen dat de treeview control meerdere kolommen ondersteunde om maar eens wat te noemen. Althans; dat geldt voor Winforms (2.0) controls; ik ben to be honest nog niet veel (of genoeg) bezig geweest met WPF en/of .Net 3.0+ gezien ik voor mijn werk (voorlopig) nog even aan 2.0 vast zit.

Natuurlijk, overal is iets op te maken, alles is aan te passen. Maar vaker wel dan niet brengt dat een boel code met zich mee welke ook nog eens gebruik maakt van een hele berg native calls (ofwel P/Invoke's) om te bereiken wat je wil. Uitwijken naar een 3rd party control die je het werk uit handen neemt is dan een makkelijke keuze. Zo kan ik van harte de (gratis!) Krypton Toolsuite aanraden. Vergeleken met de (in mijn ogen door de jaren heen bloated geworden) Infragistics controls krijg je een flinke zwieper aan de look van je GUI in ruil voor een relatief kleine footprint en een goed werkende control suite. (Overigens gebruiken we het hier veel en hebben daarom toen ook besloten om de auteur eens flink te sponsoren en hebben dus meteen heel de suite inclusief sourcecode aangeschaft). De prijzen van de Krypton onderdelen zijn ook stukken vriendelijker dan de Infragistics/DevExpress varianten.

Ik draaf weer eens van 't paadje Waar 't om ging is het moderniseren van de treeview en listview controls. Nou, dat is easy. We beginnen met een class die we voor beide controls nodig gaan hebben; deze noemen we bijvoorbeeld NativeMethods.cs:

C#:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

using System; using System.Runtime.InteropServices; using System.Windows.Forms; namespace KeenSystems.SmartMan.General {     public static class NativeMethods     {         public const int WM_CREATE = 0x1;         [DllImport("uxtheme.dll", CharSet = CharSet.Unicode)]         public extern static int SetWindowTheme(IntPtr hWnd, string pszSubAppName, string pszSubIdList);         public static int SetExplorerTheme(Control ctrl)         {             return SetWindowTheme(ctrl.Handle, "Explorer", null);         }     } }

Je zult al gauw zien dat de 'magic' zit in de SetWindowTheme call. Meer details vind je in de documentatie; daar zal ik niet te ver op in gaan.

Het enige wat je nu nog moet doen is voor iedere control (treeview/listview) welke je wil 'updaten' met de 'moderne' look de SetExplorerTheme method aanroepen. In mijn geval doe ik dat in het Form's Load event:

C#:

1 2	NativeMethods.SetExplorerTheme(treeView1); NativeMethods.SetExplorerTheme(listView1);

Voila. 2 Controls gestyled. Let in de treeview vooral op de plusjes en minnetjes welke zijn veranderd naar de typerende driehoekjes en in de listview en treeview zie je ook dat er een 'hippe' selectie gebruikt wordt in plaats van de saaie blauwe standaard selectie.

Wat ik echter nog beter kan aanbevelen is het afleiden van je eigen controls. Kwestie van de listview/treeview inheriten en vanaf dat moment je eigen control op je forms pleuren in plaats van de standaard controls. Zo profiteer je later nog makkelijker van wijzigingen die je doorvoert in je controls, maar dat hoef ik niemand hopelijk uit te leggen

Ik heb het op deze manier aangepakt:

C#:

1 2 3 4 5 6 7 8 9 10 11

//Treeview: public class MyTreeview : TreeView {     protected override void WndProc(ref Message m)     {            //Use 'modern' style treeview         if (m.Msg == NativeMethods.WM_CREATE)             NativeMethods.SetExplorerTheme(this);         base.WndProc(ref m);     } }

Voor de listview doe je natuurlijk hetzelfde. Voor de echte juiste look kun je voor de treeview ook de treelines nog uitschakelen, wat ik zelf overigens niet mooi vind:

C#:

1	treeView1.ShowLines = false;

Een andere aanrader is om het font meteen te wijzigen in het (weinig intuïtieve) SystemFonts.IconTitleFont dat je hierboven ook meteen toegepast ziet.

C#:

1 2	treeView1.Font = SystemFonts.IconTitleFont; listView1.Font = SystemFonts.IconTitleFont;

Of natuurlijk in je afgeleide control. Makkelijker kan het haast niet. Be-dee-be-dee-be-dee:

1
2
3
4
5
6

Private Declare Unicode Function SetWindowTheme Lib "uxtheme.dll" (ByVal hWnd As IntPtr, ByVal pszSubAppName As String, ByVal pszSubIdList As String) As Integer

  Protected Overrides Sub OnHandleCreated(ByVal e As System.EventArgs)
    SetWindowTheme(Me.Handle, "Explorer", Nothing)
    MyBase.OnHandleCreated(e)
  End Sub