使用Component Library制作一个导航栏

Posted 2022-09-22

我是微软Dynamics 365 & Power Platform方面的工程师/顾问罗勇，也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的微软最有价值专家(Microsoft MVP)，这是我的第483篇原创文章，写于2022年9月21日。

以前的博文：​​使用Component Library制作一个Bar类型的图表​​ 讲述了绘制简单图表，今天我们来讲解使用Component Library制作一个导航栏，这个导航栏可以插入到各个屏幕(Screen)，方便用户知道当前在那个菜单项下工作，也方便跳转到其他菜单。

先展示下做成后的样子如下图，菜单项目数量和图标，选中菜单的背景，颜色，左边标志的颜色等都是可以配置的，鼠标放到图标上可以展示描述文本，这个描述文本也是可以配置的。配色方案可能不好看，这个是可以配置的，大家照着设计师的方案来做即可。

制作Component Library的基本步骤我就不讲解了，参考前面的博文。我将这个控件的宽度设置为50，然后插入一个Vertical Gallery，将Gallery的Height 和Width分别设置为Parent.Height 和Parent.Width ，X和Y属性值都设置为0，这样让Gallery随着Component Library大小的变化而变化。

我这里新增了如下的参数：

也为参数设置了默认值如下：

其中MenuInfo这个输入参数比较复杂，我用的Table类型，设置的默认值是：

Table(
    
        MenuLabel: "首页",
        MenuIcon: Icon.Home,
        MenuScreenNavigate: App.ActiveScreen,
        MenuId:1
    ,
    
        MenuLabel: "审批",
        MenuIcon: Icon.Draw,
        MenuScreenNavigate: App.ActiveScreen,
        MenuId:2
    ,
    
        MenuLabel: "任务",
        MenuIcon: Icon.ListWatchlistRemind,
        MenuScreenNavigate: App.ActiveScreen,
        MenuId:3
    ,
    
        MenuLabel: "帮助",
        MenuIcon: Icon.Help,
        MenuScreenNavigate: App.ActiveScreen,
        MenuId:4
    ,
    
        MenuLabel: "点赞",
        MenuIcon: Icon.ThumbsUp,
        MenuScreenNavigate: App.ActiveScreen,
        MenuId:5
    
)

我设置Gallery的 Items 属性为 NavComponent.MenuInfo 。Gallery的Template中的内容我都删除，自己插入三个控件如上图，分别是2个矩形(Rectangle)控件和一个Icon控件。名称为 shpMenuIndicator 的矩形控件我设置其Width为3，Height则设置为 Parent.TemplateHeight ，将其Visible属性设置为 If(ThisItem.MenuId = NavComponent.ActiveMenuId,true,false) 。

另外一个矩形控件shpMenuActiveBackground我用来做选择控件的背景，其X我设置为3，Y设置为0，Width我设置为 Parent.TemplateWidth -3，Height我设置为 Parent.TemplateHeight，将其Fill属性我设置为：If(ThisItem.MenuId = NavComponent.ActiveMenuId,NavComponent.ActiveMenuBgColor,Transparent) 。

名为 icoMenuIcon 的Icon控件，我将其Height和Width属性都设置为 Parent.TemplateHeight - 14 ，高和宽设置为一样的保证图标不变形，X和Y属性我都设置为7，Color属性设置为 If(ThisItem.MenuId = NavComponent.ActiveMenuId,NavComponent.ActiveMenuColor,NavComponent.InactiveMenuColor) ，Tooltip属性我设置为 ThisItem.MenuLabel ，Icon属性我设置为 ThisItem.MenuIcon ，可以看到系统提供的Icon很丰富的，OnSelect属性我设置为 Navigate(ThisItem.MenuScreenNavigate) 。

上面基本完成了这个Component Library的开发，然后为了看效果我建立了多个Screen，都插入了这个名为NavComponent的Component Library，设置其MenuInfo 参数值为：

Table(
    
        MenuLabel: "首页",
        MenuIcon: Icon.Home,
        MenuScreenNavigate: Home Screen,
        MenuId:1
    ,
    
        MenuLabel: "审批",
        MenuIcon: Icon.Draw,
        MenuScreenNavigate: Approval Screen,
        MenuId:2
    ,
    
        MenuLabel: "任务",
        MenuIcon: Icon.ListWatchlistRemind,
        MenuScreenNavigate: Task Screen,
        MenuId:3
    ,
    
        MenuLabel: "帮助",
        MenuIcon: Icon.Help,
        MenuScreenNavigate: Help Screen,
        MenuId:4
    ,
    
        MenuLabel: "点赞",
        MenuIcon: Icon.ThumbsUp,
        MenuScreenNavigate: ThumbsUp Screen,
        MenuId:5
    
)

当然，我还为不同的Screen上的这个Component Library的 ActiveMenuId 参数设置了1到5不同的值，方便跳转到不同页面时候导航栏通过不同的颜色标志目前的导航项目。这样一个简单实用的导航栏就开发完了。