WPF开发随笔收录-自定义图标XamlIcon

技术WPF开发随笔收录-自定义图标XamlIcon WPF开发随笔收录-自定义图标XamlIcon一、前言
1、在以前自学的过程中,软件需要使用到图标的时候,总是第一个想法是下载一个图片来充当图标使用,

包含Wp开发文章-自定义图标XamlIcon

一、前言

1.在之前的自学过程中,当软件需要使用图标时,首先想到的总是下载一张图片作为图标使用,但实际效果会比较模糊。后来在网上了解到字体图标库的用法。我可以在阿里巴巴云矢量图网站把想要的图标添加到项目中,然后打包下载得到ttf图标库,然后用图标作为字体引用。这种方法实现的图标是矢量图,放大缩小不会影响图标的清晰度。

2.但是如果要在使用过程中添加一些新图标,就要下载字体库文件进行替换,有点麻烦。我从我的同事那里学到了另一种方法,它是通过下载svg图标,然后将其更改为xaml的路径来实现的。无需进一步讨论,我将直接介绍实现方法。

二、正文

1.首先,创建一个新项目。项目目录如下所示。在“控件”下,有一个自定义图标控件;在Enums下,有一个用于存储图标名称的枚举变量;在参考资料下,图标用于存储xaml图标。

2.登录阿里巴巴矢量图标库,挑出想要的图标,然后下载对应的svg格式,如下图。

3.下载后选择以文字形式打开,然后找到里面的路径,如下图。复制此部分的路径值,然后在项目目录中的图标下创建一个新的home.xaml文件,将路径粘贴到其中,并修改它以获得我们想要的文件。

home.xaml的代码如下。因为控件XamlIcon继承了Label,所以图标的填充颜色绑定到了“前景”属性。还有一点,记得选择home.xaml文件,打开属性页,将生成操作改为resources。

viewbox xmlns=' http://schemas . Microsoft.com/winfx/2006/xaml/presentation ' xmlns : x=' http://schemas . Microsoft.com/winfx/2006/xaml '

网格宽度='1025 '高度='1024 '

路径数据=' M867.2672 561.792 c-81.216-66.496-162.048-133.376-243.072-200.128 c 586.9472 331.008 549.6992 300.352 512.3872 269.568 c-3.264 2.368-6.006192-286.976 c 877.7632 574.592 874.8832 568.128 867.2672 561.792 z ' Fill=' { Binding Path=forecast,relative source={ relative source AncestorType={ x 3360 type Label } } } '/

路径数据=' m 1009.7312 495.808 c-38.08-31.68-75.776-63.808-114.56-94.592-13.184-10.432-18.24-21.12-18.048-38.208 1.024-76.608 0.512-153.28 0.0

5.168-4.0288 511.04-4.6688 519.04 11.5232 538.24c9.28 11.008 18.432 22.08 27.712 33.088 13.888 16.448 23.04 17.28 39.552 3.456 108.864-90.816 217.728-181.76 326.656-272.576C440.7712 272.704 476.2272 243.2 512.0032 213.376c35.712 29.76 70.848 59.008 105.92 88.256 109.184 91.136 218.432 182.272 327.616 273.408 16.32 13.632 25.408 12.672 39.424-3.968 9.536-11.328 19.008-22.72 28.544-34.048C1028.4192 519.296 1027.6512 510.72 1009.7312 495.808z" Fill="{Binding Path = Foreground, RelativeSource = { RelativeSource AncestorType ={ x:Type Label } }}" /
/Grid
/Viewbox

4、接着在Icons枚举变量中加入新增的图标名称,图标资源的加载是通过枚举的名称来加载的,所以枚举变量的定义记得对应上对应的xaml文件名称。

namespace XamlIconDemo.Enums
{
    public enum Icons
    {
        None,
        home,
    }
}

5、接着编写XamlIcon.cs的代码,如下

public class XamlIcon : Label
    {
        Dictionarystring, Viewbox globalIcon = new Dictionarystring, Viewbox();
        public Icons Icon
        {
            get { return (Icons)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(Icons), typeof(XamlIcon),
                new FrameworkPropertyMetadata(Icons.None, FrameworkPropertyMetadataOptions.AffectsArrange, new PropertyChangedCallback(IconChangedCallback)));
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            ReferenControls();
        }
        public XamlIcon()
        {
            this.VerticalContentAlignment = VerticalAlignment.Center;
            this.HorizontalContentAlignment = HorizontalAlignment.Center;
            this.Padding = new Thickness(0);
            this.Margin = new Thickness(0);
        }
        private static void IconChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as XamlIcon).ReferenControls();
        }
        public void ReferenControls()
        {
            if (Icon == Icons.None)
            {
                this.Content = null;
                return;
            }
            var iconStr = Icon.ToString();
            var key = $"/XamlIconDemo;component/Resources/Icons/{iconStr}.xaml";
            if (globalIcon.ContainsKey(key))
            {
                this.Content = globalIcon[key];
            }
            else
            {
                StreamResourceInfo info = Application.GetResourceStream(new Uri(key, UriKind.Relative));
                using (var stream = info.Stream)
                {
                    Viewbox page = (Viewbox)XamlReader.Load(info.Stream);
                    this.Content = page;
                    globalIcon.Add(key, page);
                }
            }
        }
    }

6、到这里自定义图标控件就基本完成了,接着测试是否可用,在主页添加自定义的控件

Window x:Class="XamlIconDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:ctls="clr-namespace:XamlIconDemo.Controls"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:XamlIconDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
    Grid
        StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
            ctls:XamlIcon Icon="home" Height="50" Width="50" Foreground="Green" Margin="20"/
            ctls:XamlIcon Icon="home" Height="100" Width="100" Foreground="Red" Margin="20"/
            ctls:XamlIcon Icon="home" Height="200" Width="200" Foreground="Blue" Margin="20"/
        /StackPanel
    /Grid
/Window

7、运行结果如下,可以看到图标已经成功显示出来了,并可以随意修改大小和填充色

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/154979.html

(0)

相关推荐

  • 二分查询

    技术二分查询 二分查询二分查询:package com.cc;/** * @Author: cc * @Create: 2021/12/20 * 二分查询实现步骤: * 1.前提:有已排序数组A (假设

    礼包 2021年12月22日
  • 一句,你读过最美的一句话是什么

    技术一句,你读过最美的一句话是什么之一,友人在信中说:“那时只知沉湎于对生命的思考,常被一种极大的感召召唤到深邃中,思索一些人性与社会方面的东西”一句。许是源于对生命和理想的探索与追求,友人才作如此的叙述。哭墙隐现于生命

    生活 2021年10月20日
  • 怎么使用C++写嵌入式代码

    技术怎么使用C++写嵌入式代码本篇内容介绍了“怎么使用C++写嵌入式代码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!嵌

    攻略 2021年11月29日
  • Elasticsearch查询速度这么快的原因是什么

    技术Elasticsearch查询速度这么快的原因是什么这篇文章主要介绍“Elasticsearch查询速度这么快的原因是什么”,在日常操作中,相信很多人在Elasticsearch查询速度这么快的原因是什么问题上存在疑

    攻略 2021年10月26日
  • vue 中query和pramas中的那点事

    技术vue 中query和pramas中的那点事 vue 中query和pramas中的那点事//$router : 是路由操作对象,只写对象
    //$route : 路由信息对象,只读对象
    //操作 路

    礼包 2021年11月11日
  • 长发发型扎法100种图片,有什么好看的编发值得推荐么

    技术长发发型扎法100种图片,有什么好看的编发值得推荐么临时被邀请参加聚会,再去做美发是肯定来不及了,又不想顶着乱糟糟的头发参加聚会,该怎么办呢?今天我就教大家一款能够简易俗称的盘发,优雅又自然,不会显得太过隆重,简单搭

    生活 2021年10月31日