WPF使用“阿里矢量图”简单实现LED数字显示

于 2021-08-04 11:08:02 发布
阅读量1.2k 收藏 1
点赞数 2
文章标签： wpf c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_love_grape/article/details/119377742
版权

1、iconfont 

如上图所示：首先在https://www.iconfont.cn/网址找到如下0---9十个数字的矢量图，添加到项目，下载到本地，找到文件  iconfont.ttf 添加到程序中：

2、建立一个DigitsConverter类进行数据转换

注意：在WPF中阿里矢量图标“”，通过字段绑定需要写为“\ue000”，否则只显示字符串

    public class DigitsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
            {
                return null;
            }
            string str = null;
            string ledDigit;
            foreach (var item in value as string)
            {
                switch (item)
                {
                    case '0':
                        ledDigit = "\ue000";//""
                        break;
                    case '1':
                        ledDigit = "\ue001";
                        break;
                    case '2':
                        ledDigit = "\ue002";
                        break;
                    case '3':
                        ledDigit = "\ue003";
                        break;
                    case '4':
                        ledDigit = "\ue004";
                        break;
                    case '5':
                        ledDigit = "\ue005";
                        break;
                    case '6':
                        ledDigit = "\ue006";
                        break;
                    case '7':
                        ledDigit = "\ue007";
                        break;
                    case '8':
                        ledDigit = "\ue008";
                        break;
                    case '9':
                        ledDigit = "\ue009";
                        break;
                    case '.':
                        ledDigit = ".";
                        //ledDigit = "\ue00d";//小数点转义
                        break;
                    default:
                        ledDigit = $"{item}";
                        break;
                }
                str += ledDigit;
            }
            return str;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }
    }

 3、前台XAML：

注意：将需要进行数据转换的TextBlock"的属性-FontFamily设置为“iconfont.ttf”路径；如下：FontFamily="../Assets/Fonts/#iconfont"

    <Window.DataContext>
        <viewmodel:MainWindowViewModel></viewmodel:MainWindowViewModel>
    </Window.DataContext>
    <Window.Resources>
        <commons:DigitsConverter x:Key="DigitsConverter"></commons:DigitsConverter>
    </Window.Resources>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel Orientation="Horizontal" Margin="0 20">
            <TextBlock Text="输入数据:" Foreground="White" FontSize="60"></TextBlock>
            <TextBox x:Name="inText" Text="{Binding InputData,UpdateSourceTrigger=PropertyChanged,Converter={StaticResource DigitsConverter}}" FontFamily="../Assets/Fonts/#iconfont"  MinWidth="300" FontSize="60" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="输出数据:" Foreground="White" FontSize="60"></TextBlock>
            <TextBlock Text="{Binding ElementName=inText,Path=Text}" FontFamily="../Assets/Fonts/#iconfont" Foreground="#00FF00" FontSize="60" Width="auto"></TextBlock>
        </StackPanel>
    </StackPanel>

4、后台ViewModel

    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }


        private string inputData;

        public string InputData
        {
            get { return inputData; }
            set
            {
                inputData = value;
                RaisePropertyChanged();
            }
        }
    }

5、最终效果

 

Grape-!
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF加载使用矢量图（可缩放）
05-21
WPF开发过程中可能会遇到使用矢量图做展示的情况，很多人或许直接用jpg图片到程序中，但是试图呈现效果肯定不如矢量图。该案例让你知道WPF如何加载使用矢量图！
WPF 实现自绘验证码
dotNET跨平台
08-30 227
WPF 实现自绘验证码控件名：VerifyCode作者：WPFDevelopersOrg原文链接： https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用大于等于.NET40；Visual Studio 2022;项目使用 MIT 开源许可协议；如何通过DrawingVisual进行自绘验证码首先定义验证码池作为随机生成验证码所需； pr...
Wpf生成随机数
weixin_44540343的博客
05-29 2257
.net.Frameword中提供了一个专门产生随机数的类System.Random，此类默认情况下已被导入，编程过程中可以直接使用。我们知道，计算机并不能产生完全随机的数字，它生成的数字被称为伪随机数，它是以相同的概率从一组有限的数字中选取的，所选的数字并不具有完全的随机性，但就实用而言，其随机程度已经足够了。 很多时候都会需要用到生成随机数，比如我现在做到的需要生成随机的订单号等，自动生成的话可以让使用者更方便，而且可以让订单号规范一点。 后台代码 这里我们使用了Random类 Random的属性
用WPF做一个动画数字指示控件
菜鸟程序员
09-27 557
用WPF做一个动画数字指示控件 绘制界面数字块和指示块： <UserControl.Resources> <FontFamily x:Key="Digital"> pack://application:,,,/#DS-Digital </FontFamily> <Style TargetType="TextBlock"> <Setter Pr
WPF实现自增编号
weixin_44568194的博客
01-20 381
在平时做东西，应该也会有碰到有一些编号或者学号需要自己自动新增的，这样做就不需要自己一个一个的弄，比较节省时间，所以我也自己弄了一个可以自增的编号来练习一下。 首先我们需要在在数据库里面新建一张表，之后就是在存储过程中写SQL的语句，这是查询这张表里面的编号信息 完成之后，就去服务端写方法，名字建议和你写的存储过程的名字一样，这样就方便区分和之后的查找，当然你也可以不保持一致，这个只是为了方便之后的查找，排序的话需要倒叙排序，这样方便后面获取的数据的时候进行下一步的操作。 写完之后就去客户端写自增的代码
WPF数据可视化控件（一） LED风格数字控件
zhuowp的博客
08-11 5508
原帖地址：https://blog.csdn.net/zhuo_wp/article/details/81561190 资源源码：https://download.csdn.net/download/zhuo_wp/10597840       在做数据可视化显示的时候，有时需要LED风格的数字显示。WPF的原生控件中并没有这样的控件，因此需要自定义这样的控件。本博文便是描述一种LED风格数字...
LED数字样式字体
煜 [yù]
11-02 1690
css里面： /*引用字库*/ @font-face { font-family:'electronicFont'; src: url("font/DS-DIGIT.TTF"); } 需要的类或者id调用下就好了： #id{ font-family: 'electronicFont'; font-size: 16px; text-align: center; }
WPF实现LED数字效果展示
u013104793的博客
07-27 1279
贴代码 public class DigitalMeter : Canvas { private int numDigits; static DigitalMeter() { DefaultStyleKeyProperty.OverrideMetadata(typeof(DigitalMeter), new FrameworkPropertyMetadata(typeof(DigitalMeter)));
WPF自定义LED风格数字显示控件
weixin_30352191的博客
09-26 284
WPF自定义LED风格数字显示控件 原文:WPF自定义LED风格数字显示控件 版权声明：本文为博主原创文章，转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/details/52895167 ...
WPF自定义LED风格数字控件
10-22
WPF自定义LED风格数字控件
WPF 字体滚动，LED大屏展示
03-04
WPF 字体滚动，整合代码，显示字体在LED大屏上。
WPF 开发LED效果
06-13
这个用WPF做的LED值得学习借鉴，在此基础上进行扩展是不错的
wpf 三维图形
03-12
wpf 三维模型，xaml ，坐标，索引
将矢量图转xmal，SVG 图片转换为适合 WPF 使用的 XAML 代码
11-07
将矢量图转xmal，SVG 图片转换为适合 WPF 使用的 XAML 代码
阿里矢量图标库WPF使用Demo
12-27
iconfont_阿里矢量图标库WPF使用Demo，我发现网上没有详细的WPF使用示例，便做了一个简单的示例给大家参考。
使用WPF实现流程图的创建
最新发布
03-19
C# WPF 流程图实现
WPF 使用矢量字体图标
01-06
1、WPF 使用矢量字体图标 2、可以修改图标大小，颜色且不失真 3、项目全局使用矢量字体图标 4、下载矢量字体图标并应用到项目中
wpf阿里云矢量图标库设计
08-16
WPF（Windows Presentation Foundation）是一种用于创建 Windows 桌面应用程序的技术，而阿里云矢量图标库是阿里巴巴集团提供的一套图标资源库。在 WPF 应用程序中使用阿里云矢量图标库设计需要以下步骤： 1. 首先，你需要从阿里云矢量图标库中选择适合你设计需求的图标。你可以访问阿里云矢量图标库网站（https://www.iconfont.cn/）进行浏览和选择。 2. 在选择图标后，你可以通过下载该图标的 SVG 或者字体文件（通常是 .svg 或 .ttf 格式）。SVG 文件是矢量图形文件，而字体文件则包含了一系列的图标。 3. 在 WPF 中使用 SVG 文件，你可以使用第三方的开源库，如 SvgImageSource 或者 SvgImage。这些库可以将 SVG 文件转换为 WPF 中的 Image 或者 Path 控件，使其能够显示在应用程序中。 4. 如果你选择使用字体文件，你可以将其添加到 WPF 项目中，并使用 FontIcon 控件来显示图标。FontIcon 控件使用 Unicode 字符来呈现字体文件中对应的图标。 需要注意的是，WPF 并没有原生的支持 SVG 文件的显示，所以你可能需要借助第三方库来实现。同时，你还需要了解如何在 WPF 中使用字体文件，并正确设置字体的大小和颜色等属性。 希望这些步骤能对你在 WPF 中使用阿里云矢量图标库进行设计有所帮助！如有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值