彩票走势图

使用NetAdvantage定制邮件导航OutlookBar

原创|其它|编辑:郝浩|2012-10-22 11:30:28.000|阅读 322 次

概述:在NetAdvantage Ultimate中,有款专门的控件XamOutlookBar是专门针对定制邮件导航这一需求的。本文即该控件的详细代码示例教程。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

  邮件导航OutlookBar最知名的使用,就是在Microsoft Outlook中了。如下图所示,在Microsoft Outlook,在Outlook面板上的窗口的左侧拥有一列快捷键组,如收件箱,日历或联系人等。

使用NetAdvantage定制邮件导航OutlookBar

  在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> 

使用NetAdvantage定制邮件导航OutlookBar  

到此为止,我们的邮件导航便以成型了,最后一步便是增加个性化的菜单项,来完成定制了,如下段代码。

<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,是不是非常轻松简单!

使用NetAdvantage定制邮件导航OutlookBar


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP