郵件導航OutlookBar最知名的使用，就是在Microsoft Outlook中了。如下圖所示，在Microsoft Outlook，在Outlook面板上的窗口的左側擁有一列快捷鍵組，如收件箱，日歷或聯系人等。

　　在NetAdvantage Ultimate中，有款專門的控件XamOutlookBar是專門針對定制郵件導航這一需求的。

　　下段代碼示例如何將數據與集合對象綁定。

public class Group
{
    public string Title { get; set; }
    public string LargeImagePath { get; set; }
    public string SmallImagePath { get; set; }
    public ObservableCollection<MenuItem> Items { get; set; }

    public Group()
    {
        Items = new ObservableCollection<MenuItem>();
    }
}

public class MenuItem
{
    public bool IsExpanded { get; set; }
    public string Title { get; set; }
    public ObservableCollection<MenuItem> Children { get; set; }
    public string ImagePath { get; set; }

    public MenuItem()
    {
        Children = new ObservableCollection<MenuItem>();
    }
}

接下來就需要ViewModel來創建郵件導航的菜單結構。

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Group> _groups;
    public ObservableCollection<Group> Groups
    {
        get { return _groups; }
        set
        {
            _groups = value;
            OnPropertyChanged("Groups");
        }
    }

    public ViewModel()
    {
        Groups = GenerateGroups();
    }

    private ObservableCollection<Group> GenerateGroups()
    {
        ObservableCollection<Group> groups = new ObservableCollection<Group>();

        //create the mail group with menu items
        var mailGroup = new Group() { Title = "Mail",
            LargeImagePath = @"/XamOutlookBarDataBinding;component/Images/Mail32.png", 
            SmallImagePath = @"/XamOutlookBarDataBinding;component/Images/Mail16.png" };
        var rootMailItem = new MenuItem() { Title = "Personal Folders", IsExpanded = true };
        rootMailItem.Children.Add(new MenuItem() { Title = "Inbox", ImagePath = @"/XamOutlookBarDataBinding;component/Images/InboxFolder16.png" });
        rootMailItem.Children.Add(new MenuItem() { Title = "Drafts", ImagePath = @"/XamOutlookBarDataBinding;component/Images/DraftsFolder16.png" });
        rootMailItem.Children.Add(new MenuItem() { Title = "Sent Items", ImagePath = @"/XamOutlookBarDataBinding;component/Images/SentFolder16.png" });
        rootMailItem.Children.Add(new MenuItem() { Title = "Deleted Items", ImagePath = @"/XamOutlookBarDataBinding;component/Images/DeletedFolder16.png" });
        mailGroup.Items.Add(rootMailItem);

        //create the contacts group with menu items
        var contactsGroup = new Group() { Title = "Contacts", 
            LargeImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact32.png", 
            SmallImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact16.png" };
        var rootContactItem = new MenuItem() { Title = "My Contacts", IsExpanded = true };
        rootContactItem.Children.Add(new MenuItem() { Title = "Suggested Contacts", ImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact16.png" });
        rootContactItem.Children.Add(new MenuItem() { Title = "Contacts" , ImagePath = @"/XamOutlookBarDataBinding;component/Images/Contact16.png" });
        contactsGroup.Items.Add(rootContactItem);

        groups.Add(mailGroup);
        groups.Add(contactsGroup);

        return groups;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyname)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyname));
    }
}

　　連接數據綁定到XamOutlookBar控件，完成初步設置。

<Window xmlns:ig="//schemas.infragistics.com/xaml" x:Class="XamOutlookBarDataBinding.MainWindow"
        xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:XamOutlookBarDataBinding"
        xmlns:igWPF="//schemas.infragistics.com/xaml/wpf"
        Title="MainWindow" Height="350" Width="225" >
    
    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    
    <Grid>
        <igWPF:XamOutlookBar GroupsSource="{Binding Groups}" />
    </Grid>
</Window> 

到此為止，我們的郵件導航便以成型了，最后一步便是增加個性化的菜單項，來完成定制了，如下段代碼。

<Style TargetType="{x:Type igWPF:OutlookBarGroup}">
    <Setter Property="Header" Value="{Binding Title}"/>
    <Setter Property="LargeImage" Value="{Binding LargeImagePath}"/>
    <Setter Property="SmallImage" Value="{Binding SmallImagePath}"/>
    <Setter Property="Content" Value="{Binding Items}" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <ig:XamDataTree ItemsSource="{Binding}">
                    <ig:XamDataTree.GlobalNodeLayouts>
                        <ig:NodeLayout Key="ItemsLayout" TargetTypeName="MenuItem" DisplayMemberPath="Title" IsExpandedMemberPath="IsExpanded">
                            <ig:NodeLayout.CollapsedIconTemplate>
                                <DataTemplate>
                                    <Image Source="{Binding Data.ImagePath}" />
                                </DataTemplate>
                            </ig:NodeLayout.CollapsedIconTemplate>
                        </ig:NodeLayout>
                                                </ig:XamDataTree.GlobalNodeLayouts>
                </ig:XamDataTree>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

　　如下圖，您就已經完成了一個郵件導航OutlookBar，是不是非常輕松簡單！