首页 > 代码库 > visual Studio 2017 扩展开发（二）《菜单图标详解》

visual Studio 2017 扩展开发（二）《菜单图标详解》

2024-10-26 19:42:39   207人阅读

在上一篇我们在菜单栏创建了一个菜单，菜单上显示了一个图标跟文本。那么我们自己创建的菜单如何修改自定义的菜单图标呢。下面娓娓道来。。。。。

首先你要有一个图，创建一个32位的位图。这个位图的像素是16px 16px，或者是16px 16px的倍数。

每个图标都放在单个行中彼此相邻的位图上。使用Alpha通道在每个图标中指示透明的位置。如果使用8位颜色深度，请使用RGB(255,0,255)作为透明度。32位彩色图标是首选。

将图标文件复制到项目的Resources文件夹下。

打开command.png我们看到这个位图里面有六个图标

技术分享

位图ID的定义方式与其他方法有点不同： 声明从位图条的guid开始，然后存在包含位图的位图条的资源id，在按钮定义中使用元素的数字ids。该声明的一个重要方面是元素id必须是位图条中位图的实际索引；

在CommandPackage.vsct文件的Symbols标签里我们看到，name为guidImages的元素。创建GUID复制到value里。

IDSymbol的name属性是图标的id,value则表示的是条带的位置，如果只有一个图标那么value就是1咯.

 <GuidSymbol name="guidImages" value=http://www.mamicode.com/"{2834e3f7-2621-479a-bb6f-e9e48d5f4df4}" >
      <IDSymbol name="bmpPic1" value=http://www.mamicode.com/"1" />
      <IDSymbol name="bmpPic2" value=http://www.mamicode.com/"2" />
      <IDSymbol name="bmpPicSearch" value=http://www.mamicode.com/"3" />
      <IDSymbol name="bmpPicX" value=http://www.mamicode.com/"4" />
      <IDSymbol name="bmpPicArrows" value=http://www.mamicode.com/"5" />
      <IDSymbol name="bmpPicStrikethrough" value=http://www.mamicode.com/"6" />
    </GuidSymbol>

文件下的Bitmaps标签下有一个Bitmaps，这个Bitmaps的GUID的值设置为guidImages，创建的GuidSymbol里的name的名称。将href设置为位图的相对路径。usedList就是之前创建的IDSymbol的name,多个就用逗号隔开。

<Bitmap guid="guidImages" href=http://www.mamicode.com/"Resources\Command.png" usedList="bmpPic1, bmpPic2, bmpPicSearch, bmpPicX, bmpPicArrows, bmpPicStrikethrough"/>

在<Button>里面有个<Icon> guid就是我们创建的GuidSymbol的name,id则是IDSymbol的name.你要用哪个图标捏，就写上IDSymbol对应name.

 <Button guid="guidCommandPackageCmdSet" id="CommandId" priority="0x0100" type="Button">
        <Parent guid="guidCommandPackageCmdSet" id="MyMenuGroup" />
        <Icon guid="guidImages" id="bmpPicSearch" />
        <Strings>
          <ButtonText>测试菜单</ButtonText>
        </Strings>
      </Button>
    </Buttons>

运行，在实验示例中我们可以看到自己创建的菜单命令的图标是不是跟你位图上对应的图标。

结果：

技术分享

 

本文仅是本人随笔记录，如有疑问欢迎在下面评论。转载请写明出处。如果对你有帮助，动动鼠标有下方给我点个赞。你的支持是我最大的动力。

visual Studio 2017 扩展开发（二）《菜单图标详解》


联系
我们