Windows 10 Style for WPF TabControl

If you open up the Windows 10 settings app and click through one of the high-level categories, you will be greeted by the following tab-like control:

Windows 10 Settings

Here’s how to reproduce a similar effect with WPF.

The end result

The STabControl in WPF

If you want to skip ahead and see the end results, the code to re-create this tabcontrol in WPF can be found in this repository.

Break it down

Let’s break down the components of this effect:

  • The tab highlights on mouse over with a light grey colour.
  • The tab is selected only when the mouse button is released - so long as the initial down-press is over the same tab.
  • Whilst clicked, the highlight changes to a darker grey.
  • Also whilst clicked, the tab contents appear to get squashed down a bit.
  • On release (or moving the mouse away) the contents return to their un-squashed state.
  • The currently selected tab text is coloured using the accent colour.
  • The currently selected tab has a little bar of accent colour on the left.

What I Did

Here’s a breakdown of what was required to produce the desired effect.

  • Created a new control (STabControl) derived from TabControl.
    • Essentially this STabControl only exists so we can return a custom TabItem in GetContainerForItemOverride()
  • Created a new Tab Item control (STabItem).
    • This lets us override the OnMouseX event handlers such that we can select the item on Mouse Up
    • I also added a new IsPressed dependency property to signify the item is being pressed.
    • The bulk of the remainder of the code is there to handle Visual State for the 4 different TabStripPlacement options.
  • Created a ControlTemplate for STabItem
    • The control template includes an Outer Border for highlighting the background on mouseover\selection\pressing.
    • Inside this border is another border which just contains the content presenter, and has a ScaleTransform which is used for the “Depress” animation on the title text.
    • The little colored indicator bar comes from the “Selected Border” which sits alongside the Outer Border.
    • There are also a bunch of visual states which define the transition animations between the various states.
  • Note: The “Depress” animation used by Windows 10 appears to have some 3-Dimensionality to it - if you push closer to one corner, the tab item pivots back towards that corner. There doesn’t appear to be a straightforward way to reproduce the effect in WPF - the simple X&Y scale animation isn’t too bad though (See the Pressed and Unpressed visual states in the PressStates visual state group).
  • Adding some more color styles and style triggers completes the effect as seen in the initial gif.