DEV中svg图标的使用

最新推荐文章于 2023-11-06 09:30:27 发布

转载最新推荐文章于 2023-11-06 09:30:27 发布 · 697 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/WangHuaiSheng/p/8145882.html

文章标签：

#ui

本文介绍SVG图标的基础知识，如何在DEV环境中使用SVG图标，并提供SVG图标资源网站及编辑工具推荐。此外，还介绍了SVG图标的优缺点以及在Windows系统中的预览方法。

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);