DEV中svg图标的使用

时间：2017-12-29 20:01:07 阅读：189 评论：0 收藏：0 [点我收藏+]

标签：页面万维网 alt github git 技术分享 .com 开始花生

0、开始之前

先看看使用效果

在操作栏的使用：

技术分享图片

在菜单中的使用

技术分享图片

1、简述SVG图标

中文名：可缩放矢量图形

外文名：Scalable Vector Graphics

外语缩写：SVG

开发商：万维网联盟

发行时间：1999年

格式：矢量图

延伸至：可扩展标记语言

类型：图形格式

2、DEV中使用SVG图标

技术分享图片

            this._btnSvgImageTest.ImageOptions.ImageToTextAlignment = DevExpress.XtraEditors.ImageAlignToText.LeftCenter;
            this._btnSvgImageTest.ImageOptions.SvgImage = global::SmartSolution.Apps.ABM.UI.Properties.Resources.newemployee;
            this._btnSvgImageTest.ImageOptions.SvgImageSize = new System.Drawing.Size(24, 24);

在DEV中svg图标都是附加于控件的ImageOptions之上，所以可以通过为ImageOptions添加扩展方法简化Svg图片的使用

    /// <summary>
    /// 图标管理
    /// </summary>
    public static class ImageOptionsExtends
    {

        /// <summary>
        /// 设置SVG图标
        /// </summary>
        public static ImageOptions SetSvgIcon(this ImageOptions options, SvgImage svg, int width = 16, int height = 16)
        {
            options.SvgImageSize = new Size(width, height);
            options.SvgImage = svg;
            return options;
        }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="options"></param>
        /// <param name="align"></param>
        /// <param name="indent"></param>
        public static SimpleButtonImageOptions SetSvgIconPosition(this SimpleButtonImageOptions options, ImageAlignToText align, int indent)
        {
            options.ImageToTextAlignment = ImageAlignToText.LeftCenter;
            options.ImageToTextIndent = 10;
            return options;
        }

    }

调用方法：

            _btnSvgImageTest.ImageOptions
                .SetSvgIconPosition(ImageAlignToText.LeftCenter, 10)
                .SetSvgIcon(Resources.newemployee, 24, 24);