XAML Ribbon Bar – Part 3

Doh! Various remembered references to WPF element z-ordering and ClipToBounds properties suddenly all came together with the realisation that negative values are allowed on the Margin property!

So the “removal” of the line between the tab header and the border around the tab content becomes so much nicer using the following:

  • Set the element containing the ItemsPresenter (tab headers) to have Panel.ZIndex=”5″ so that it gets painted after the content border element.
  • Set the TabHeaderBorder to have Margin=”0,0,0,-2″ so that it intrudes a few pixels into the content border’s area. Because the z-index ensure the TabHeaerBorder gets painted after the border this effectively lets the header overwrite the content border.
  • Tweak TabHeaderBorder OnRender() so that the background extends a few pixels (default of 2) past the curvy border. The extra background will be used to cover up the border (which means the bottom gradient of the tab header must match the top gradient colour of the content area – which is the whole effective I’m trying to achieve anyway).
  • Use a Trigger to <Setter Property=”ClipToBounds” Value=”True”/> on the TabItem when <Trigger Property=”IsSelected” Value=”False”>. This ensures that if a mouse over effect is used to render a background it won’t intrude into the content area unless its the selected tab.

So I can now ditch the whole TabContentBorder class – which was thoroughly nasty anyhow.

I’ve modified the XAML and uploaded here. I’ve changed the uploaded version to use a plain Border instead of my TabHeaderBorder so you won’t get the ultra curvy tabs but this means it can be run as a stand-alone XAML file. All the image references fail of course so there are no pretty images.

3 thoughts on “XAML Ribbon Bar – Part 3”

  1. Nigel – This is exactly what I was looking for, a pure xaml representation of the ribbon bar. Excellent work! I’ll be adding your site to my favorites!! Keep up the good work.

  2. Hi twd, glad you liked my attempt at a very simple RibbonBar. I’ve tied up the style quite a bit since previous postings – including consolidating all the brushes into named resources. This allows the colouring to be changed (on the fly) very simply on a per element basis, e.g. to create a “special” tab that has the same general theme but different colouring (much like Office 2007). At the moment I’m working on getting commands hooked up to the RibbonBar and making authoring the ribbon contents as simple as possible,  but I’ll be posting an update soon which will include the refactored bits. Thanks for the comment!

Comments are closed.