为了账号安全,请及时绑定邮箱和手机立即绑定

迁移桌面程序到MS Store(11)——应用SVG图标

标签:
C#

在传统桌面程序中,对图标的使用大多是直接嵌入JPG或者PNG的图片。在祖传的1366x768分辨率下,并没有什么问题。相对于手机硬件的突飞猛进,也侧面反映了PC行业的落寞和桌面程序开发的不思进取。用360卫士的群众并不能倒推PC行业的升级。反倒是水果公司双高的利润和口碑让人很是眼馋。加之某软跳出来教猪队友做硬件。现在倒是有些起色,1080p的屏幕已是标配,4k也算常见。那么传统桌面程序在升级过程中,就会遇到今天要讨论的,如何解决高分辨率下图标模糊的问题。

一种解决方案是按最高的分辨率提供图片。这种适合较大的图片,比如背景啥的。另一种就是今天要讨论的,针对当前流行的、扁平化图标的解决方案。

https://img1.sycdn.imooc.com//5dbae8e00001b44406700438.jpg

从本篇的标题可以看出,我们希望应用SVG矢量图来适应各种分辨率的情况。以WPF程序为例,首先要面对的问题是,WPF并不支持像嵌入JPG/PNG图标这样,直接使用SVG图标。大动干戈的引用第三方library通过自定义类型来支持SVG并不是本文的目的。这里我们要介绍如何通过字体文件,进而在WPF或UWP中使用SVG图标的方式。

虽然WPF不支持直接使用SVG文件,但是Windows是支持矢量字体的。而我们的目的就是要将图标以字体的形式在WPF程序中显示。具体使用的字体TrueType,则是由微软和苹果共同开发的字体类型标准,该字体文件的扩展名是.ttf。

https://en.wikipedia.org/wiki/TrueType

接下来我们依然是通过Sample工程来说明。首先给出GitHub的地址:

https://github.com/manupstairs/WpfAppForFontIcon

首先我们打开WpfAppWithPNGs工程,图标的使用代码如下:

        <Image Grid.Row="0" Grid.Column="0"  Width="32" Height="32" Source="Resources/Airplane_Off.png" ></Image>
        <Image Grid.Row="0" Grid.Column="1"  Width="64" Height="64" Source="Resources/Airplane_On.png" ></Image>
        <Image Grid.Row="0" Grid.Column="2"  Width="96" Height="96" Source="Resources/Bluetooth_Off.png"  ></Image>
        <Image Grid.Row="0" Grid.Column="3"  Width="128" Height="128" Source="Resources/Bluetooth_On.png"  ></Image>

https://img1.sycdn.imooc.com//5dbae9050001bdac07900445.jpg

这里主要有两个问题,因为我们默认提供的是32x32的图标,因此除了第一列Width和Height设置为32的图标,其他的图标都存在模糊的问题。第二个问题是针对图标的每一种颜色,都需要对应提供不同的图标文件(图中的例子需要有灰色和蓝色两份文件)。相对的SVG图标仅仅需要一份文件。即可在程序中动态设定不同的颜色了。

这里先给出最终WPF项目中,对SVG图标的引用的代码,然后我们再进行详细解释。对应的工程名为WpfAppWithFontIcons。

        <TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Static local:FontIcons.airplane_mode_circ}"   Foreground="Gray"  FontSize="32" ></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Static local:FontIcons.airplane_mode_circ}"  Foreground="{StaticResource dellBlue}"  FontSize="64" ></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="2" Text="{x:Static local:FontIcons.bluetooth_inactive}"   Foreground="Orange"  FontSize="96" ></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="3" Text="{x:Static local:FontIcons.bluetooth_inactive}"    Foreground="Brown"  FontSize="128" ></TextBlock>

代码最大的不同应该是由<Image/>标签更改为<TextBlock/>标签,这是因为我们是通过ttf字体文件,曲线救国的方式来使用SVG图标。

具体的步骤如下:

准备SVG图标文件,将这些文件打包成一整个ttf字体文件。打包的方式有很多种,通常我使用的是IcoMoon的免费解决方案。地址如下:

https://icomoon.io/app/#/select

通过这个网站选择SVG图标文件上传,打包生成一个zip文件。解压后文件夹结构如下图:

https://img1.sycdn.imooc.com//5dbae94f00010c7306680484.jpg

ttf文件在fonts文件夹中,实际使用时,需要作为资源文件,添加到WPF工程中。点击图中的demo.html会打开一个本地网页,可用于查找ttf文件中包含的SVG图标,以及对应的unicode。实际我们是通过对unicode的引用来显示SVG图标的。

https://img1.sycdn.imooc.com//5dbae9750001f8a510580531.jpg

完整的project结构如下图,Fonts文件夹是手动添加用来放置ttf文件。ttf文件名字都是根据项目需要来取,并不固定。

https://img1.sycdn.imooc.com//5dbae9a00001654007900438.jpg

ttf字体文件需要以<FontFamily/>的形式添加到项目的<Resources/>节点中。然后再通过<Style/>指定给<TextBlock/>。当然不在<Resources/>节点定义Style,而是在每个<TextBlock/>中指定FontFamily属性也是可以的。有关XAML的语法细节,回字的四种写法什么的,这里略过不提。

    <Window.Resources>
        <FontFamily x:Key="Fonticon">/Fonts/rcc-fonticon-ribbon-v2.ttf#rcc-fonticon-ribbon-v2</FontFamily>
        <Style TargetType="TextBlock">
            <Setter Property="FontFamily" Value="{StaticResource Fonticon}" ></Setter>
        </Style>
        <SolidColorBrush x:Key="dellBlue">#007DB8</SolidColorBrush>
    </Window.Resources>

这里说明一下“/Fonts/rcc-fonticon-ribbon-v2.ttf#rcc-fonticon-ribbon-v2”值的定义,#前面的是文件路径,#后面的是font name,查看的方法是双击ttf文件,参考下图。

https://img1.sycdn.imooc.com//5dbae9cc0001dad914610740.jpg

在定义好FontFamily之后,我们并不推荐直接将unicode写到XAML或.cs文件中。因为在XAML中,你需要如下编写:

<TextBlock Grid.Row="0" Grid.Column="0" Text="&#xe900;" Foreground="Gray"  FontSize="32" ></TextBlock>

而在C#代码中,又需要以下面这种格式:

textBlockAirplane.Text = "\ue900";

两种不统一的格式会在将来修改时带来极大的困难,特别是图标被多处引用时,全局的查找替换根本就是噩梦。此外,毫无意义的unicode值的可读性根本等于0。正常人类无法将"&#xe900;","\ue900"和Airplane的图标联系起来。

我推荐的做法是生成一个FontIcons Class,以string类型属性的形式暴露出来。这样可以获得IDE智能语法提示的支持,更新时也仅需修改这个Class,Find All Reference更是方便无比。同时无论在XAML文件,还是C#代码中,我们看到的都是统一的“FontIcons.airplane_mode_circ”。

    public static class FontIcons
    {
        public static string airplane_mode_circ { get; } = "\ue900";
        public static string bluetooth_inactive { get; } = "\ue901";
        public static string brightness { get; } = "\ue902";
        public static string brightness_inactive { get; } = "\ue903";
        public static string browse_inactive { get; } = "\ue904";
        public static string camera { get; } = "\ue905";
    }

那么我们是不是需要手工来编写FontIcons Class呢?大哥我们是能把午饭(我不爱喝咖啡)转换成Code的生物啊!当然是写个小工具来自动生成了。在Sample库中,参考IcoMoonReader工程,只需将IcoMoon生成的.svg文件(icomoon.zip解压后的fonts文件夹里)丢在IconMoonReader.exe同级目录,即可生成相应代码。

https://img1.sycdn.imooc.com//5dbaea1e000197d508240390.jpg

其实只有一个方法啦,使用时需要注意具体的文件名是否正确。

            using (var stream = new FileStream("rcc-fonticon-ribbon-v2.svg", FileMode.Open))
            {
                using (var reader = new StreamReader(stream))
                {
                    var pattern = "unicode(\\S)*\\sglyph-name(\\S)*\"";
                    var input = reader.ReadToEnd();
                    foreach (Match match in Regex.Matches(input, pattern))
                    {
                        pattern = "\"\\S*\"";
                        var list = new List<string>();
                        foreach (var result in Regex.Matches(match.Value, pattern))
                        {
                            list.Insert(0, result.ToString());
                        }
                        var name = list[0].Replace("\"", "").Replace("-","_");
                        var code = list[1].Replace("&#x", "\\u").Replace(";", "");
                        Console.WriteLine($"public static string {name} {{ get; }} = {code};");
                    }
                }
            }

把生成的C#字符串定义贴到具体工程的FontIcons Class(名字随意)。

https://img1.sycdn.imooc.com//5dbaea4e00019d3623271274.jpg

这样一个优秀的解决方案如果仅支持WPF,那又谈何迁移到MS Store呢?实际上这套机制放到UWP工程中也是可以的。虽然UWP可以通过SvgImageSource属性原生支持SVG了,但我们的这套方案在图标的应用方面毫不逊色,甚至可以说更为方便。具体的例子可以参考AppWithFontIcon工程。在这个UWP的工程中,除了放ttf文件的位置我换到了现成的Assets文件夹,几乎没有改变。

https://img1.sycdn.imooc.com//5dbaea690001f01d09770838.jpg

        <TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind local:FontIcons.airplane_mode_circ}"   Foreground="Gray"  FontSize="32" ></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Bind local:FontIcons.airplane_mode_circ}"  Foreground="{StaticResource dellBlue}"  FontSize="64" ></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="2" Text="{x:Bind local:FontIcons.bluetooth_inactive}"   Foreground="Orange"  FontSize="96" ></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="3" Text="{x:Bind local:FontIcons.bluetooth_inactive}"    Foreground="Brown"  FontSize="{x:Bind DynamicFontSize(),Mode=OneWay,FallbackValue=128}" ></TextBlock>

因为UWP没有了x:static关键字,所以我换成了x:Bind。换成x:Bind之后甚至可以动态的响应值的变化。比如我在这里把FontSize做了一个x:bind到DynamicFontSize()方法,让字体随着界面改变,动态的变大变小。虽然并没有什么卵用……但是Demo的时候可以增加点噱头……

本篇到此结束,照例贴上Github地址:

https://github.com/manupstairs/WpfAppForFontIcon

感谢耐着性子看到这里的同学!


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消