1 minute read

So I wanted to make a really nice looking WPF TabItems and went looking for some examples of how other people have done it.  I really only found one quality example [here], but there were some problems with the provided example.  (1) The binding needed a little work because it actually creates headers that become increasingly longer beyond the content the longer the content is; that distance should be constant.  (2) If the tab items wrap the path is not correctly stretched to fill the actual calculated space for the tab item (this doesn’t happen in the provided example because he has disabled wrapping).

So I started with the TabControl and TabItem in Expression Blend and have modified them to behave as I would have expected.

ShapelyTabs1

ShapelyTabs2

The trick to making this work correctly with wrapping was to put the path inside of a canvas with ClipToBounds disabled so that I could databind the actual width and height of the grid containing the content to a modified version of the ContentToPathConverter in the original example that supports multibinding.  This way not only does the path update if the content changes, but will also update if the actual width and height of the container changes, like when they wrap (but without causing layout logic to be run, preventing an infinite layout loop).

The full sample project can be downloaded from [ShapelyTabItem.zip]