Visual Styles / Das Betriebssystem Controls zeichnen lassen

    • Allgemein
    • .NET (FX) 4.0

    Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von nafets.

      Visual Styles / Das Betriebssystem Controls zeichnen lassen

      Moin,
      da sich hier nur wenige Leute Visual Styles kennen, möchte ich sie hier mal vorstellen und Verwendungsmöglichkeiten vorstellen.

      Vorweg
      Dieses Thema ist für Leute gedacht, die sich schon mit GDI+ und im Idealfall auch mit der Erstellung von eigenen Controls auskennen. Die Codes sind alle in C# geschrieben, lassen sich aber ohne weiteres über einen Konverter übersetzen.

      Nun zum Thema
      Bei Visual Styles lässt man Windows die Sachen zeichnen, anstatt dass man es selbst macht. Das hat den Vorteil, dass sich erstellte Controls immer dem aktuellen Theme von Windows anpassen und dass sich der benötigte Code stark reduziert.
      Als Beispiel möchte ich euch zeigen, wie man einen NavigationButton zeichnen kann - das gleiche Control wie Artentus in seinem Projekt [OpenSource] ExplorerNavigationButton von Hand erstellt hat.
      Aber erstmal zu den Basics:
      Will man Windows Controls zeichnen lassen, macht man das mit Hilfe des System.Windows.Forms.VisualStyles-Namespace. Um ein Control zu zeichnen, braucht man nun einen VisualStyleRenderer, wofür man wiederum ein VisualStyleElement braucht. Dieses Element repräsentiert einen Teil eines bestimmten Controls. Man kriegt dieses Element entweder über die Unterklassen (z.B. VisualStyleElement.Button.PushButton.Default) oder über die CreateElement-Methode. Da die Unterklassen nicht komplett sind, holen wir uns mal ein Element über seine ID:

      C#-Quellcode

      1. VisualStyleElement NavigationBackButton = VisualStyleElement.CreateElement("Navigation", 1, 2);

      Hier ist nun einiges an Erklärung fällig:
      "Navigation" ist der Name der Klasse, in der sich das gewünschte Element befindet. Die 1 ist die PartId - hier die Id für einen nach links zeigenden Navigation-Button. Die 2 ist die StateId, sie bestimmt das genauere Aussehen, beim NavigationButton stellt sie den Hover-Status dar.
      Jetzt haben wir dieses Element aber noch nicht gezeichnet - dafür brauchen wir einen VisualStyleRenderer:

      C#-Quellcode

      1. VisualStyleRenderer NavigationBackButtonRenderer = new VisualStyleRenderer(NavigationBackButton);

      Nun müssen wir diesen Button nur noch zeichnen - ich mach das mal im Paint-Event:

      C#-Quellcode

      1. protected override void OnPaint(PaintEventArgs e)
      2. {
      3. VisualStyleElement NavigationBackButton = VisualStyleElement.CreateElement("Navigation", 1, 2);
      4. VisualStyleRenderer NavigationBackButtonRenderer = new VisualStyleRenderer(NavigationBackButton);
      5. NavigationBackButtonRenderer.DrawBackground(e.Graphics, new Rectangle(0, 0, 30, 30));
      7. base.OnPaint(e);
      8. }

      Und schon haben wir unseren NavigationButton gerendert:
      Hier noch eine mögliche Umsetzung des kompletten NavigationButton (Auszug aus der Library, an welcher ich gerade arbeite):
      NavigationButton Umsetzung
      Control-Klasse

      C#-Quellcode

      1. using System;
      2. using System.Collections.Generic;
      3. using System.ComponentModel;
      4. using System.Diagnostics;
      5. using System.Drawing;
      6. using System.Linq;
      7. using System.Text;
      8. using System.Threading.Tasks;
      9. using System.Windows.Forms;
      10. using VisualStyleControls.Rendering;
      12. namespace VisualStyleControls.Controls
      13. {
      14. /// <summary>
      15. /// A simple Back/Forward Button drawn by Windows via Visual Styles.
      16. /// </summary>
      17. [ToolboxBitmap(typeof(Button))]
      18. [Designer(typeof(NavigationButtonDesigner))]
      19. [DefaultEvent("Click")]
      20. [Description("A simple Back/Forward Button drawn by Windows via Visual Styles")]
      21. public class NavigationButton
      22. : Control
      23. {
      24. /// <summary>
      25. /// Initializes a new instance of the <see cref="T:VisualStyleControls.Controls.NavigationButton"/> class.
      26. /// </summary>
      27. public NavigationButton()
      28. : base()
      29. {
      30. this.SuspendLayout();
      32. this.Size = new Size(30, 30);
      34. this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint, true);
      35. this.UpdateStyles();
      37. this.ResumeLayout(false);
      38. }
      40. /// <summary>
      41. /// Gets raised if the arrow direction has changed.
      42. /// </summary>
      43. [Category("Appearance")]
      44. [Description("Gets raised when the Button Type got changed.")]
      45. public event EventHandler ButtonTypeChanged;
      47. /// <summary>
      48. /// Raises the <see cref="E:VisualStyleControls.Controls.NavigationButton.ButtonTypeChanged"/> event.
      49. /// </summary>
      50. protected virtual void OnButtonTypeChanged()
      51. {
      52. if (this.ButtonTypeChanged != null)
      53. {
      54. this.ButtonTypeChanged(this, EventArgs.Empty);
      55. }
      56. }
      58. private NavigationButtonType type = NavigationButtonType.Back;
      59. private VisualStyleControls.Rendering.ButtonState state = VisualStyleControls.Rendering.ButtonState.Normal;
      61. /// <summary>
      62. /// Indicates the Type of this Button.
      63. /// </summary>
      64. /// <value>
      65. /// The current Type.
      66. /// </value>
      67. [Category("Appearance")]
      68. [Description("Indicates the Type of this Button.")]
      69. public NavigationButtonType ButtonType
      70. {
      71. get
      72. {
      73. return this.type;
      74. }
      75. set
      76. {
      77. if (value != this.type)
      78. {
      79. this.type = value;
      80. this.Invalidate();
      81. this.OnButtonTypeChanged();
      82. }
      83. }
      84. }
      86. protected override void OnPaint(PaintEventArgs e)
      87. {
      88. switch (this.ButtonType)
      89. {
      90. case NavigationButtonType.Back:
      91. NavigationButtonRenderer.RenderBackButton(e.Graphics, new Rectangle(0, 0, this.Width, this.Height), this.Enabled ? this.state : VisualStyleControls.Rendering.ButtonState.Disabled);
      92. break;
      93. case NavigationButtonType.Forward:
      94. NavigationButtonRenderer.RenderForwardButton(e.Graphics, new Rectangle(0, 0, this.Width, this.Height), this.Enabled ? this.state : VisualStyleControls.Rendering.ButtonState.Disabled);
      95. break;
      96. default:
      97. Debug.WriteLine("Really don't know what happened here but the ButtonType property has a value nonexistent in NavigationButtonType");
      98. break;
      99. }
      101. base.OnPaint(e);
      102. }
      104. protected override void OnMouseEnter(EventArgs e)
      105. {
      106. this.state = VisualStyleControls.Rendering.ButtonState.Hot;
      107. this.Invalidate();
      108. base.OnMouseEnter(e);
      109. }
      111. protected override void OnMouseLeave(EventArgs e)
      112. {
      113. this.state = VisualStyleControls.Rendering.ButtonState.Normal;
      114. this.Invalidate();
      115. base.OnMouseLeave(e);
      116. }
      118. protected override void OnMouseDown(MouseEventArgs e)
      119. {
      120. this.state = VisualStyleControls.Rendering.ButtonState.Pressed;
      121. this.Invalidate();
      122. base.OnMouseDown(e);
      123. }
      125. protected override void OnMouseUp(MouseEventArgs e)
      126. {
      127. this.state = (e.X >= 0 && e.X < this.Width && e.Y >= 0 && e.Y < this.Height) ? VisualStyleControls.Rendering.ButtonState.Hot : VisualStyleControls.Rendering.ButtonState.Normal;
      128. this.Invalidate();
      129. base.OnMouseUp(e);
      130. }
      132. protected override void OnEnabledChanged(EventArgs e)
      133. {
      134. this.Invalidate();
      135. base.OnEnabledChanged(e);
      136. }
      137. }
      138. }

      Designer-Klasse

      C#-Quellcode

      1. using System;
      2. using System.Collections.Generic;
      3. using System.ComponentModel.Design;
      4. using System.Linq;
      5. using System.Text;
      6. using System.Threading.Tasks;
      7. using System.Windows.Forms.Design;
      9. namespace VisualStyleControls.Controls
      10. {
      11. public class NavigationButtonDesigner
      12. : ControlDesigner
      13. {
      14. private DesignerActionListCollection actionLists;
      15. public override DesignerActionListCollection ActionLists
      16. {
      17. get
      18. {
      19. return this.actionLists != null ?
      20. this.actionLists :
      21. this.actionLists = new DesignerActionListCollection(new DesignerActionList[] { new NavigationButtonDesignerActionList(this.Component) });
      22. }
      23. }
      25. public override SelectionRules SelectionRules
      26. {
      27. get
      28. {
      29. return SelectionRules.Moveable;
      30. }
      31. }
      32. }
      33. }
      35. //-----------------------
      37. using System;
      38. using System.Collections.Generic;
      39. using System.ComponentModel;
      40. using System.ComponentModel.Design;
      41. using System.Linq;
      42. using System.Text;
      43. using System.Threading.Tasks;
      45. namespace VisualStyleControls.Controls
      46. {
      47. /// <summary>
      48. /// Provides a DesignerActionList for the <see cref="T:VisualStyleControls.Controls.NavigationButton"/> Control.
      49. /// </summary>
      50. public class NavigationButtonDesignerActionList
      51. : DesignerActionListBase<NavigationButton>
      52. {
      53. /// <summary>
      54. /// Initializes a new instance of the <see cref="NavigationButtonDesignerActionList"/> class.
      55. /// </summary>
      56. /// <param name="component">The component.</param>
      57. public NavigationButtonDesignerActionList(IComponent component)
      58. : base(component)
      59. { }
      61. /// <summary>
      62. /// Returns a list of <see cref="T:System.ComponentModel.Design.DesignerActionItem"/> representing the DesignerActionList items.
      63. /// </summary>
      64. /// <returns>
      65. /// A <see cref="T:System.ComponentModel.Design.DesignerActionItem"/>-Array.
      66. /// </returns>
      67. public override DesignerActionItemCollection GetSortedActionItems()
      68. {
      69. DesignerActionItemCollection aItems = new DesignerActionItemCollection();
      70. aItems.Add(new DesignerActionPropertyItem("ButtonType", "Type", "Appearance", "Indicates the Type of this Button."));
      71. return aItems;
      72. }
      74. /// <summary>
      75. /// Indicates the Type of the targeted <see cref="T:VisualStyleControls.Controls.NavigationButton"/>.
      76. /// </summary>
      77. /// <value>
      78. /// The current Type.
      79. /// </value>
      80. public NavigationButtonType ButtonType
      81. {
      82. get
      83. {
      84. return this.TargetComponent.ButtonType;
      85. }
      86. set
      87. {
      88. this.TargetComponent.ButtonType = value;
      89. this.DesignerActionUIService.Refresh(this.Component);
      90. }
      91. }
      92. }
      93. }
      95. //----------------
      97. using System;
      98. using System.Collections.Generic;
      99. using System.ComponentModel;
      100. using System.ComponentModel.Design;
      101. using System.Linq;
      102. using System.Text;
      103. using System.Threading.Tasks;
      105. namespace VisualStyleControls.Controls.Helpers
      106. {
      107. /// <summary>
      108. /// A generic DesignerActionList.
      109. /// </summary>
      110. public abstract class DesignerActionListBase<T>
      111. : DesignerActionList
      112. where T : class, IComponent
      113. {
      114. /// <summary>
      115. /// Initializes a new instance of the <see cref="T:VisualStyleControls.Controls.Helpers.DesignerActionListBase"/> class.
      116. /// </summary>
      117. /// <param name="component">A component related to this <see cref="T:VisualStyleControls.Controls.DesignerActionListBase"/>.</param>
      118. public DesignerActionListBase(IComponent component)
      119. : base(component)
      120. {
      121. this.TargetComponent = component as T;
      122. this.DesignerActionUIService = this.GetService(typeof(DesignerActionUIService)) as DesignerActionUIService;
      123. }
      125. /// <summary>
      126. /// Returns the <see cref="T:System.ComponentModel.IComponent"/> this <see cref="T:VisualStyleControls.Controls.Helpers.DesignerActionListBase"/> is targeted at.
      127. /// </summary>
      128. /// <value>
      129. /// The target component.
      130. /// </value>
      131. protected T TargetComponent { get; private set; }
      133. /// <summary>
      134. /// Returns the <see cref="T:System.ComponentModel.Design.DesignerActionUIService"/>.
      135. /// </summary>
      136. /// <value>
      137. /// The designer action UI service.
      138. /// </value>
      139. protected DesignerActionUIService DesignerActionUIService { get; private set; }
      141. /// <summary>
      142. /// Returns a list of <see cref="T:System.ComponentModel.Design.DesignerActionItem"/> representing the DesignerActionList items.
      143. /// </summary>
      144. /// <returns>
      145. /// A <see cref="T:System.ComponentModel.Design.DesignerActionItem"/>-Array.
      146. /// </returns>
      147. public override DesignerActionItemCollection GetSortedActionItems()
      148. {
      149. throw new NotImplementedException();
      150. }
      151. }
      152. }

      Renderer-Klasse

      C#-Quellcode

      1. using System;
      2. using System.Collections.Generic;
      3. using System.Drawing;
      4. using System.Linq;
      5. using System.Text;
      6. using System.Threading.Tasks;
      7. using System.Windows.Forms.VisualStyles;
      9. namespace VisualStyleControls.Rendering
      10. {
      11. /// <summary>
      12. /// Renders the Windows Navigation Button
      13. /// </summary>
      14. public static class NavigationButtonRenderer
      15. {
      16. /// <summary>
      17. /// Renders a Windows Navigation Button BackButton
      18. /// </summary>
      19. /// <param name="dc">The dc to draw to (you can also pass a <see cref="System.Drawing.Graphics"/> object).</param>
      20. /// <param name="bounds">The bounds.</param>
      21. /// <param name="state">The state.</param>
      22. public static void RenderBackButton(IDeviceContext dc, Rectangle bounds, ButtonState state)
      23. {
      24. new VisualStyleRenderer(NavigationButtonRenderer.CreateBackButtonElement(state)).DrawBackground(dc, bounds);
      26. }
      28. /// <summary>
      29. /// Creates a Windows Navigation Button BackButton Visual Style Element
      30. /// </summary>
      31. /// <param name="state">The state.</param>
      32. public static VisualStyleElement CreateBackButtonElement(ButtonState state)
      33. {
      34. return VisualStyleElement.CreateElement("Navigation", 1, (int)state);
      35. }
      37. /// <summary>
      38. /// Renders a Windows Navigation Button ForwardButton
      39. /// </summary>
      40. /// <param name="dc">The dc to draw to (you can also pass a <see cref="System.Drawing.Graphics"/> object).</param>
      41. /// <param name="bounds">The bounds.</param>
      42. /// <param name="state">The state.</param>
      43. public static void RenderForwardButton(IDeviceContext dc, Rectangle bounds, ButtonState state)
      44. {
      45. new VisualStyleRenderer(NavigationButtonRenderer.CreateForwardButtonElement(state)).DrawBackground(dc, bounds);
      46. }
      48. /// <summary>
      49. /// Creates a Windows Navigation Button ForwardButton Visual Style Element
      50. /// </summary>
      51. /// <param name="state">The state.</param>
      52. public static VisualStyleElement CreateForwardButtonElement(ButtonState state)
      53. {
      54. return VisualStyleElement.CreateElement("Navigation", 2, (int)state);
      55. }
      57. /// <summary>
      58. /// Renders a Windows Navigation Button MenuButton
      59. /// </summary>
      60. /// <param name="dc">The dc to draw to (you can also pass a <see cref="System.Drawing.Graphics"/> object).</param>
      61. /// <param name="bounds">The bounds.</param>
      62. /// <param name="state">The state.</param>
      63. public static void RenderMenuButton(IDeviceContext dc, Rectangle bounds, ButtonState state)
      64. {
      65. new VisualStyleRenderer(NavigationButtonRenderer.CreateMenuButtonElement(state)).DrawBackground(dc, bounds);
      66. }
      68. /// <summary>
      69. /// Creates a Windows Navigation Button MenuButton Visual Style Element
      70. /// </summary>
      71. /// <param name="state">The state.</param>
      72. public static VisualStyleElement CreateMenuButtonElement(ButtonState state)
      73. {
      74. return VisualStyleElement.CreateElement("Navigation", 3, (int)state);
      75. }
      76. }
      77. }
      79. //-------------------------
      81. using System;
      82. using System.Collections.Generic;
      83. using System.Linq;
      84. using System.Text;
      85. using System.Threading.Tasks;
      87. namespace VisualStyleControls.Rendering
      88. {
      89. /// <summary>
      90. /// Represents a Button state
      91. /// </summary>
      92. public enum ButtonState
      93. : int
      94. {
      95. /// <summary>
      96. /// The normal state
      97. /// </summary>
      98. Normal = 1,
      99. /// <summary>
      100. /// The hot/hover state
      101. /// </summary>
      102. Hot = 2,
      103. /// <summary>
      104. /// The pressed state
      105. /// </summary>
      106. Pressed = 3,
      107. /// <summary>
      108. /// The disabled state
      109. /// </summary>
      110. Disabled = 4
      111. }
      112. }

      Dieser Code ließe sich aber natürlich bei Bedarf um ein Vielfaches verkürzen - dies ist ja wie gesagt ein Auszug aus einer Library.
      [line]​[/line]
      Hier möchte ich auch noch meine VisualStyle-Library vorstellen. Sie ist noch in Arbeit, aber schon komplett Nutzbar. Ich stelle hier einfach mal ein Klassendiagramm (nur die Renderer-Klassen, die Enums hab ich weg gelassen - das Bild sollte man direkt anzeigen lassen, um auch nur irgendwas lesen zu können) und die Projektmappe zur Verfügung:

      Die Projektmappe befindet sich im Anhang (@Mods: Es sind keine ausführbaren Dateien vorhanden ;))

      Hoffentlich konnte ich mit diesem kleinen Artikel etwas auf die VisualStyles aufmerksam machen und vielleicht wird sich ja auch der ein oder andere damit beschäftigen.

      Grüße,
      Stefan
      Dateien

      Nice 8-)

      aber zwei Sachen:

      1. Es gibt eine Beschränkung der Größe (also selbst wenn man für die parameter eine größere größe wählt, bleibt das bild gleichgroß)
      und 2. (ist jetzt ne kleinigkeit):

      C#-Quellcode

      1. VisualStyleElement NavigationBackButton = VisualStyleElement.CreateElement("Navigation", 1, 2);
      2. VisualStyleRenderer NavigationBackButtonRenderer = new VisualStyleRenderer(NavigationBackButton);


      kannst du auch ausserhalb der paint prozedur verlagern weil sonst wird immer ne neue instanz erstellt obwohl man die nur einmal braucht.

      Was ich noch fragen wollte,

      gibt es eine Auflistung von allen Klassen (also wie Navigation) die man sich iwo ansehen kann?

      Ich hab mir die einfach ausm Internet zusammengesucht. Du kannst auch einfach den Wrapper von mir verwenden und bei Bedarf natürlich auch modifizieren, da sind alle wichtigen Elemente drin (außer TreeView, Menu & ListView, weil die bei mir nicht funktioniert haben).

      Hmm - guck - ich fand im ObjectBrowser ganz viele vorgefertigte VisualStyles

      Ich hätte jetzt gedacht, wenn du einen ComboboxRenderer geschrieben hast, dass man den irgendwie über diese vorgefertigten Styles mit einem Standard-Projekt verlinken kann, sodass alle Combos des Projektes mit deinem Renderer gezeichnet werden, wenn man die Lib einbindet, und im Startup EnableVisualStyles() aufruft.
      Aber passier nix.
      Also konzeptionell würde ich von einem Style-Konzept erwarten, dass man keine Controls selber coden oder beerben muss, sondern dass man den bestehenden Controls irgendwie einen Style zuordnet, und dann erscheinen sie im neuen Gewand.
      Und meine OB-Liste sieht auch danach aus, dass das so vorgesehen ist, aber ich komm nicht drauf, wie.
      Oder hast du eine Ahnung, warum im Framework mehr als 200 VisualStyles vorgefertigt sind, und was man mit denen anfängt?

      Die Liste ist noch nicht mal in Ansätzen das, was mein Wrapper kann. Ich schätze, ich habe ca. 400 Parts (vs. ~200 im Framework) implementiert und viele von denen habe deutlich mehr States als die Framework-Version. Gesamt könnte es sein, dass ich zwischen 750-1000 States verfügbar gemacht habe, was viel mehr ist als das im Framework verfügbare. Außerdem hast du VisualStyles falsch verstanden - die sind nur eine Möglichkeit, Windows Elemente zeichnen zu lassen. Es würde nix bringen, die Formcontrols damit zeichnen zu lassen, weil man keinen Unterschied sehen würde.

      nafets schrieb:

      Außerdem hast du VisualStyles falsch verstanden - die sind nur eine Möglichkeit, Windows Elemente zeichnen zu lassen. Es würde nix bringen, die Formcontrols damit zeichnen zu lassen, weil man keinen Unterschied sehen würde.
      Das ist ja meine Frage: Welchen Sinn haben die eingebauten VisualStyles?
      Wieso gibts davon so viele im Framework, und was kann man damit anfangen?

      Ich habe keine Ahnung, wieso es im Framework diese paar Methoden gibt, ich denke aber, dass sie zur Renderung der Controls im Framework verwendet werden. Bei meiner Library gehts einfach darum, einen so gut wie kompletten Wrapper zu erstellen - im Gegensatz zu dem im Framework. Mein Ziel ist es, komplettere Versionen der Framework-Controls zu erstellen. Zum Beispiel hat eine CheckBox 4 States: Unchecked, Checked, Mixed und Excluded. Zumindest bei dem letzten habe ich keine Ahnung, wie man ihn im Framework benutzen könnte. Ähnliches bei der ProgressBar: Es ist möglich, sie 1:1 mit VisualStyles nachzuzeichnen, sodass es auch möglich wird, auf die normal animierte ProgressBar zu zeichnen. Oder man könnte auch ein verbessertes NumericUpDown mit dem Spin-VisualStyle zeichnen. Oder ein TabControl, bei welchem die Reiter an allen Seiten gut aussehen mit dem Tab-VisualStyle. Oder ein alternatives Startmenü mit dem StartPanel-VisualStyle. Oder die richtigen Aero-Labels mit dem TaskDialog-VisualStyle. Oder oder oder...