One question that pops up surprisingly often is how to embed a TreeView control (or any other, but TreeView owes its dominant popularity to Outlook navigation pane) inside a NavBar panel and have it fill up the whole panel. This proved trickier than it seems, as NavBar would allow the NavBarItem.Header content to grow without constrains, helpfully providing scrolling chevrons for any content bigger than the visible area. TreeView provides its own scrollbars with additional functionality like autoscrolling on drag & drop, and scrolling-to-reveal children nodes, all of which do not work properly if the TreeView is not constrained to the visible area of the page.

Starting with Web.UI Suite 2009.3 SP1, NavBarItem has a new boolean property: SingleChildMode. When set to true in a group–level NavBarItem, it will allow just one child NavBarItem, and will resize its Header content to fit the entire visible area of the panel. It will also set the child's Style property to null, removing default button–like style and giving the end developer control over the whole area of the panel. Of course, Header style can still be explicitly set via its NavBarItem.HeaderStyle property.

Here's a simple copy of the Outlook navigation pane:

Source code:

<my:NavBar>
    <my:NavBarItem Header="Mail" SingleChildMode="True" IconSource="mail-big.png" IsSelected="True">
        <my:NavBarItem>
            <my:NavBarItem.Header>
                <my:TreeView HeaderVisibility="Collapsed" BorderBrush="Transparent" BorderThickness="0">
                    <my:TreeViewNode Header="Mailbox" IconSource="mailbox.png" IsExpanded="True">
                        <my:TreeViewNode Header="Inbox" IconSource="inbox.png"/>
                        <my:TreeViewNode Header="Drafts" IconSource="drafts.png"/>
                        <my:TreeViewNode Header="Outbox" IconSource="outbox.png" />
                        <my:TreeViewNode Header="Junk E-mail" IconSource="junk.png"/>
                        <my:TreeViewNode Header="Deleted Items" IconSource="deleted.png" />
                        <my:TreeViewNode Header="Sent Items" IconSource="sent.png" />
                        <my:TreeViewNode Header="Search Folders" IconSource="search.png" />
                    </my:TreeViewNode>
                </my:TreeView>
            </my:NavBarItem.Header>
        </my:NavBarItem>
    </my:NavBarItem>
    <my:NavBarItem Header="Options" IconSource="notes-big.png">
    <!-- skipped for brevity -->
    </my:NavBarItem>
</my:NavBar>

Live demo and source code are available on our Silverlight demo site.