A WPF ListBox which acts like an Apple style navigation bar

At Reasult we are currently working on a new UI style for our WPF applications. One of the UI elements we will use is an Apple style navigation bar.

With WPF is relative easy to create such kind of a control. The trick is to find a standard control which has the behaviour we need. In this case we need ´select item´ behaviour and the ListBox is a good candidate. The only thing we have to do is to change the default ListBox appearance.

Because I´am not a graphical designer I search the internet for some information about the styles Apple is using for the navigation bar. In the article The Apple.com navigation menu created using only CSS3 you can find a lot of style information. I tried to use all the style elements but some effects are not easy to create with WPF so I skip a few effects.

We start with creating the NavigationBar class which inherits from the ListBox.

public class NavigationBar : ListBox
    {
        static NavigationBar()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(NavigationBar), new FrameworkPropertyMetadata(typeof(NavigationBar)));
        }
    }

The first thing we must change in the appearance is the direction of the ListBox items. Default the items are showed in vertical direction but for the navigation bar we need items displayed in horizontal direction.

After that we have to override the default ListBox ControlTemplate. We need a transparent border with rounded corners which clips the content. In the article WPF – Easy rounded corners for anything you can read how to achieve this. The result is:

    
    
    
        
            
                
            
        
    
    
        
            
                
                    
                        
                    
                    
                        
                    

                    
                        
                            <!-- Rounded mask (stretches to fill Grid) -->
                            

                            <!-- Main content container -->
                            
                                <!-- Use a VisualBrush of 'mask' as the opacity mask -->
                                
                                    
                                

                                

                            

                        
                        
                            
                        

                    
                

            
        
    

The next step is to define the style for the navigation bar items. First we create a NavigationBarItem class which derives from the standard ListBoxItem. The NavigationBarItem has a border and each border side has a different color. With the standard BorderBrush is not possible to assign different colors to every border side. To achieve this a custom BorderBrush is used.

Now all the style elements which are needed are defined and we can use the Apple Navigation Bar:

And the final result in a WPF application looks like:

The Visual Studio 2010 solution can be downloaded from here