News
Photos
Articles
Components
Applications
Kleinkunst

.NET - Overview VisualStyleElements

In .NET you can use the de VisualStyleRenderer classs (namespace System.Windows.Forms.VisualStyles) to paint all graphical elements (button, tab, checkbox, ...) from the active XP Windows theme on a Graphics class (=GDI+ drawing surface).

C# example 

private void Form1_Paint(object sender, PaintEventArgs e)
{
  // Check if XP theme is available
  if (Application.RenderWithVisualStyles)
  {
    // Draw button with size 100,30
    if (VisualStyleRenderer.IsElementDefined(
      VisualStyleElement.Button.PushButton.Normal))
    {
      VisualStyleRenderer renderer = new VisualStyleRenderer(VisualStyleElement.Button.PushButton.Normal);
      Rectangle buttonRect = new Rectangle(10, 10, 100, 30);
      // Draw button
      renderer.DrawBackground(e.Graphics, buttonRect);
    }

    // Draw checked checkbox with default size
    if (VisualStyleRenderer.IsElementDefined(
      VisualStyleElement.Button.CheckBox.CheckedHot))
    {
      VisualStyleRenderer renderer = new VisualStyleRenderer(VisualStyleElement.Button.CheckBox.CheckedNormal);

      // Get the system-defined size of the element
      Graphics g = this.CreateGraphics();
      Size checkboxSize = renderer.GetPartSize(g, ThemeSizeType.True);
      g.Dispose();

      Rectangle checkboxRect = new Rectangle(new Point(10, 50), checkboxSize);
      // Draw checkbox
      renderer.DrawBackground(e.Graphics, checkboxRect);
    }
  }
}

A nice demo application which shows a treeview with all VisualStyleElements can be found at the MSDN website.

Sometimes it can be handy to have a visual overview to find one of the elements. That is way I have exported all elements (from the default blue XP theme) to PNG images and collected them on this page.

Button.PushButton.Normal /td> ExplorerBar.HeaderBackground.Normal TrackBar.Track.Normal
Button.PushButton.Hot ExplorerBar.HeaderClose.Normal TrackBar.TrackVertical.Normal
Button.PushButton.Pressed ExplorerBar.HeaderClose.Hot TrackBar.Thumb.Normal
Button.PushButton.Disabled ExplorerBar.HeaderClose.Pressed TrackBar.Thumb.Hot
Button.PushButton.Default ExplorerBar.HeaderPin.Normal TrackBar.Thumb.Pressed
Button.RadioButton.UncheckedNormal ExplorerBar.HeaderPin.Hot TrackBar.Thumb.Focused
Button.RadioButton.UncheckedHot ExplorerBar.HeaderPin.Pressed TrackBar.Thumb.Disabled
Button.RadioButton.UncheckedPressed ExplorerBar.HeaderPin.SelectedNormal TrackBar.ThumbBottom.Normal
Button.RadioButton.UncheckedDisabled ExplorerBar.HeaderPin.SelectedHot TrackBar.ThumbBottom.Hot
Button.RadioButton.CheckedNormal ExplorerBar.HeaderPin.SelectedPressed TrackBar.ThumbBottom.Pressed
Button.RadioButton.CheckedHot ExplorerBar.IEBarMenu.Normal TrackBar.ThumbBottom.Focused
Button.RadioButton.CheckedPressed ExplorerBar.IEBarMenu.Hot TrackBar.ThumbBottom.Disabled
Button.RadioButton.CheckedDisabled ExplorerBar.IEBarMenu.Pressed TrackBar.ThumbTop.Normal
Button.CheckBox.UncheckedNormal ExplorerBar.NormalGroupBackground.Normal TrackBar.ThumbTop.Hot
Button.CheckBox.UncheckedHot ExplorerBar.NormalGroupCollapse.Normal TrackBar.ThumbTop.Pressed
Button.CheckBox.UncheckedPressed ExplorerBar.NormalGroupCollapse.Hot TrackBar.ThumbTop.Focused
Button.CheckBox.UncheckedDisabled ExplorerBar.NormalGroupCollapse.Pressed TrackBar.ThumbTop.Disabled
Button.CheckBox.CheckedNormal ExplorerBar.NormalGroupExpand.Normal TrackBar.ThumbVertical.Normal
Button.CheckBox.CheckedHot ExplorerBar.NormalGroupExpand.Hot TrackBar.ThumbVertical.Hot
Button.CheckBox.CheckedPressed ExplorerBar.NormalGroupExpand.Pressed TrackBar.ThumbVertical.Pressed
Button.CheckBox.CheckedDisabled ExplorerBar.NormalGroupHead.Normal TrackBar.ThumbVertical.Focused
Button.CheckBox.MixedNormal ExplorerBar.SpecialGroupBackground.Normal TrackBar.ThumbVertical.Disabled
Button.CheckBox.MixedHot ExplorerBar.SpecialGroupCollapse.Normal TrackBar.ThumbLeft.Normal
Button.CheckBox.MixedPressed ExplorerBar.SpecialGroupCollapse.Hot TrackBar.ThumbLeft.Hot
Button.CheckBox.MixedDisabled ExplorerBar.SpecialGroupCollapse.Pressed TrackBar.ThumbLeft.Pressed
Button.GroupBox.Normal ExplorerBar.SpecialGroupExpand.Normal TrackBar.ThumbLeft.Focused
Button.GroupBox.Disabled ExplorerBar.SpecialGroupExpand.Hot TrackBar.ThumbLeft.Disabled
ComboBox.DropDownButton.Normal ExplorerBar.SpecialGroupExpand.Pressed TrackBar.ThumbRight.Normal
ComboBox.DropDownButton.Hot ExplorerBar.SpecialGroupHead.Normal TrackBar.ThumbRight.Hot
ComboBox.DropDownButton.Pressed Header.Item.Normal TrackBar.ThumbRight.Pressed
ComboBox.DropDownButton.Disabled Header.Item.Hot TrackBar.ThumbRight.Focused
Spin.Up.Normal Header.Item.Pressed TrackBar.ThumbRight.Disabled
Spin.Up.Hot ProgressBar.Bar.Normal TrackBar.Ticks.Normal
Spin.Up.Pressed ProgressBar.BarVertical.Normal TrackBar.TicksVertical.Normal
Spin.Up.Disabled ProgressBar.Chunk.Normal TreeView.Glyph.Closed
Spin.Down.Normal ProgressBar.ChunkVertical.Normal TreeView.Glyph.Opened
Spin.Down.Hot Rebar.Gripper.Normal TextBox.TextEdit.Normal
Spin.Down.Pressed Rebar.GripperVertical.Normal TextBox.TextEdit.Hot
Spin.Down.Disabled Rebar.Band.Normal TextBox.TextEdit.Selected
Spin.UpHorizontal.Normal Rebar.Chevron.Normal TextBox.TextEdit.Disabled
Spin.UpHorizontal.Hot Rebar.Chevron.Hot TextBox.TextEdit.Focused
Spin.UpHorizontal.Pressed Rebar.Chevron.Pressed TextBox.TextEdit.ReadOnly
Spin.UpHorizontal.Disabled Rebar.ChevronVertical.Normal TextBox.TextEdit.Assist
Spin.DownHorizontal.Normal Rebar.ChevronVertical.Hot Window.Caption.Active
Spin.DownHorizontal.Hot Rebar.ChevronVertical.Pressed Window.Caption.Inactive
Spin.DownHorizontal.Pressed StartPanel.UserPane.Normal Window.Caption.Disabled
Spin.DownHorizontal.Disabled StartPanel.MorePrograms.Normal Window.SmallCaption.Active
ScrollBar.ArrowButton.UpNormal StartPanel.MoreProgramsArrow.Normal Window.SmallCaption.Inactive
ScrollBar.ArrowButton.UpHot StartPanel.MoreProgramsArrow.Hot Window.SmallCaption.Disabled
ScrollBar.ArrowButton.UpPressed StartPanel.MoreProgramsArrow.Pressed Window.MinCaption.Active
ScrollBar.ArrowButton.UpDisabled StartPanel.ProgList.Normal Window.MinCaption.Inactive
ScrollBar.ArrowButton.DownNormal StartPanel.ProgListSeparator.Normal Window.MinCaption.Disabled
ScrollBar.ArrowButton.DownHot StartPanel.PlaceList.Normal Window.MaxCaption.Active
ScrollBar.ArrowButton.DownPressed StartPanel.PlaceListSeparator.Normal Window.MaxCaption.Inactive
ScrollBar.ArrowButton.DownDisabled StartPanel.LogOff.Normal Window.MaxCaption.Disabled
ScrollBar.ArrowButton.LeftNormal StartPanel.LogOffButtons.Normal Window.FrameLeft.Active
ScrollBar.ArrowButton.LeftHot StartPanel.LogOffButtons.Hot Window.FrameLeft.Inactive
ScrollBar.ArrowButton.LeftPressed StartPanel.LogOffButtons.Pressed Window.FrameRight.Active
ScrollBar.ArrowButton.LeftDisabled StartPanel.UserPicture.Normal Window.FrameRight.Inactive
ScrollBar.ArrowButton.RightNormal Status.Bar.Normal Window.FrameBottom.Active
ScrollBar.ArrowButton.RightHot Status.Pane.Normal Window.FrameBottom.Inactive
ScrollBar.ArrowButton.RightPressed Status.GripperPane.Normal Window.SmallFrameLeft.Active
ScrollBar.ArrowButton.RightDisabled Status.Gripper.Normal Window.SmallFrameLeft.Inactive
ScrollBar.ThumbButtonHorizontal.Normal TaskBand.GroupCount.Normal Window.SmallFrameRight.Active
ScrollBar.ThumbButtonHorizontal.Hot TaskBand.FlashButton.Normal Window.SmallFrameRight.Inactive
ScrollBar.ThumbButtonHorizontal.Pressed TaskBand.FlashButtonGroupMenu.Normal Window.SmallFrameBottom.Active
ScrollBar.ThumbButtonHorizontal.Disabled Taskbar.BackgroundBottom.Normal Window.SmallFrameBottom.Inactive
ScrollBar.ThumbButtonVertical.Normal Taskbar.BackgroundRight.Normal Window.MinButton.Normal
ScrollBar.ThumbButtonVertical.Hot Taskbar.BackgroundTop.Normal Window.MinButton.Hot
ScrollBar.ThumbButtonVertical.Pressed Taskbar.BackgroundLeft.Normal Window.MinButton.Pressed
ScrollBar.ThumbButtonVertical.Disabled Taskbar.SizingBarBottom.Normal Window.MinButton.Disabled
ScrollBar.RightTrackHorizontal.Normal Taskbar.SizingBarRight.Normal Window.MdiMinButton.Normal
ScrollBar.RightTrackHorizontal.Hot Taskbar.SizingBarTop.Normal Window.MdiMinButton.Hot
ScrollBar.RightTrackHorizontal.Pressed Taskbar.SizingBarLeft.Normal Window.MdiMinButton.Pressed
ScrollBar.RightTrackHorizontal.Disabled ToolBar.Button.Normal Window.MdiMinButton.Disabled
ScrollBar.LeftTrackHorizontal.Normal ToolBar.Button.Hot Window.MaxButton.Normal
ScrollBar.LeftTrackHorizontal.Hot ToolBar.Button.Pressed Window.MaxButton.Hot
ScrollBar.LeftTrackHorizontal.Pressed ToolBar.Button.Disabled Window.MaxButton.Pressed
ScrollBar.LeftTrackHorizontal.Disabled ToolBar.Button.Checked Window.MaxButton.Disabled
ScrollBar.LowerTrackVertical.Normal ToolBar.Button.HotChecked Window.CloseButton.Normal
ScrollBar.LowerTrackVertical.Hot ToolBar.DropDownButton.Normal Window.CloseButton.Hot
ScrollBar.LowerTrackVertical.Pressed ToolBar.DropDownButton.Hot Window.CloseButton.Pressed
ScrollBar.LowerTrackVertical.Disabled ToolBar.DropDownButton.Pressed Window.CloseButton.Disabled
ScrollBar.UpperTrackVertical.Normal ToolBar.DropDownButton.Disabled Window.SmallCloseButton.Normal
ScrollBar.UpperTrackVertical.Hot ToolBar.DropDownButton.Checked Window.SmallCloseButton.Hot
ScrollBar.UpperTrackVertical.Pressed ToolBar.DropDownButton.HotChecked Window.SmallCloseButton.Pressed
ScrollBar.UpperTrackVertical.Disabled ToolBar.SplitButton.Normal Window.SmallCloseButton.Disabled
ScrollBar.GripperHorizontal.Normal ToolBar.SplitButton.Hot Window.MdiCloseButton.Normal
ScrollBar.GripperVertical.Normal ToolBar.SplitButton.Pressed Window.MdiCloseButton.Hot
ScrollBar.SizeBox.RightAlign ToolBar.SplitButton.Disabled Window.MdiCloseButton.Pressed
ScrollBar.SizeBox.LeftAlign ToolBar.SplitButton.Checked Window.MdiCloseButton.Disabled
Tab.TabItem.Normal ToolBar.SplitButton.HotChecked Window.RestoreButton.Normal
Tab.TabItem.Hot ToolBar.SplitButtonDropDown.Normal Window.RestoreButton.Hot
Tab.TabItem.Pressed ToolBar.SplitButtonDropDown.Hot Window.RestoreButton.Pressed
Tab.TabItem.Disabled ToolBar.SplitButtonDropDown.Pressed Window.RestoreButton.Disabled
Tab.TabItemLeftEdge.Normal ToolBar.SplitButtonDropDown.Disabled Window.MdiRestoreButton.Normal
Tab.TabItemLeftEdge.Hot ToolBar.SplitButtonDropDown.Checked Window.MdiRestoreButton.Hot
Tab.TabItemLeftEdge.Pressed ToolBar.SplitButtonDropDown.HotChecked Window.MdiRestoreButton.Pressed
Tab.TabItemLeftEdge.Disabled ToolBar.SeparatorHorizontal.Normal Window.MdiRestoreButton.Disabled
Tab.TabItemRightEdge.Normal ToolBar.SeparatorVertical.Normal Window.HelpButton.Normal
Tab.TabItemRightEdge.Hot ToolTip.Close.Normal Window.HelpButton.Hot
Tab.TabItemRightEdge.Pressed ToolTip.Close.Hot Window.HelpButton.Pressed
Tab.TabItemRightEdge.Disabled ToolTip.Close.Pressed Window.HelpButton.Disabled
Tab.TabItemBothEdges.Normal     Window.Dialog.Normal
Tab.TopTabItem.Normal     Window.CaptionSizingTemplate.Normal
Tab.TopTabItem.Hot     Window.SmallCaptionSizingTemplate.Normal
Tab.TopTabItem.Pressed        
Tab.TopTabItem.Disabled        
Tab.TopTabItemLeftEdge.Normal        
Tab.TopTabItemLeftEdge.Hot        
Tab.TopTabItemLeftEdge.Pressed        
Tab.TopTabItemLeftEdge.Disabled        
Tab.TopTabItemRightEdge.Normal        
Tab.TopTabItemRightEdge.Hot        
Tab.TopTabItemRightEdge.Pressed        
Tab.TopTabItemRightEdge.Disabled        
Tab.TopTabItemBothEdges.Normal        
Tab.Pane.Normal