WPF——ICON按钮制作

embedded/2024/11/28 8:37:13/

前言

首先ICON按钮,即带图标按钮,即图标按钮。

图标按钮在开发时,主要是有两种方式来进行。一是在Button的Content内添加Image,然后设置Image的属性Source来实现,这种方式主要是简单易操作,对于初学者来说,很快就能掌握;二是通过Style来实现,此在初学是比较麻烦的,需要对style足够熟悉后才能掌握。

随着技术的发展,目前使用字体图标来替代图片图标已经是一种趋势。使用字体图标的好处:字体图标是矢量图,放大不存在失真问题;再就是字体图标设置颜色,可根据需要,由开发者自行决定,这为美工减少了大量的工作(美工不再需要为同一个图标制作多种颜色的图标,而只需要制作一个),同时软件可以集中管理图标的颜色,便于软件风格的切换。

也就是说当下制作图标按钮,算上字体图标的加入的话,可以说有了3种主要的方法。(本文不讲如何获取或制作字体图标,做法参考文末给出的参考。)

实现

下述代码演示的是以Style的形式来完成IconButon的制作:

<Windowx:Class="DicomReader.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:local="clr-namespace:DicomReader"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="DicomReader"Width="1200"Height="800"Background="#353535"mc:Ignorable="d"><Window.Resources><Style x:Key="IconButtonTb" TargetType="TextBlock"><Setter Property="FontFamily" Value="pack://application:,,,/DicomReader;component/Fonts/#iconfont" /><Setter Property="FontSize" Value="30" /><Setter Property="Foreground" Value="White" /><Setter Property="FontWeight" Value="Bold" /></Style><Style x:Key="IconButton" TargetType="Button"><Setter Property="Background" Value="#333337" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid Background="{TemplateBinding Background}"><!--<Ellipse Fill="{TemplateBinding Background}" />--><TextBlockHorizontalAlignment="Center"VerticalAlignment="Center"Style="{StaticResource IconButtonTb}"Text="{TemplateBinding Content}" /></Grid></ControlTemplate></Setter.Value></Setter></Style><Style TargetType="Grid"><Setter Property="Background" Value="#252525" /></Style></Window.Resources><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="4*" /></Grid.ColumnDefinitions><StackPanel Orientation="Vertical"><Grid Height="50"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Buttonx:Name="OpenDicom"Grid.Column="0"Content="&#xe662;"Style="{StaticResource IconButton}"ToolTip="打开DICOM文件夹" /><ButtonGrid.Column="1"Content="&#xe995;"Style="{StaticResource IconButton}"ToolTip="快速浏览" /><ButtonGrid.Column="3"Content="&#xe6fc;"Style="{StaticResource IconButton}"ToolTip="3D浏览" /><ButtonGrid.Column="2"Content="&#xe619;"Style="{StaticResource IconButton}"ToolTip="MRP浏览" /><ButtonGrid.Column="4"Content="&#xe61b;"Style="{StaticResource IconButton}"ToolTip="融合浏览" /></Grid><Grid Height="Auto" Margin="0,10" /></StackPanel><Grid Grid.Column="1" /></Grid>
</Window>

显示效果

注意

上述代码中的<Setter Property="FontFamily" Value="pack://application:,,,/DicomReader;component/Fonts/#iconfont" />这句代码中的DicomReader是项目上名,Fonts是项目下的Fonts文件夹,iconfont是字体文件名(注意在字体文件名前的#号,必须要有)。

设置控件的style时,注意StaticResource后写的的style的key值,若你将你所写的style命名时命名的是x:Name,将会导致在写完StaticResource时没有智能提示,强行写下你style名称时也会报错。此请一定要注意。

另就是一定要将字体文件输出,否则字体图标不能正常显示。

其它做法

在正常将字体图标输出的情况下,下述代码也是可行的。但不推荐此做法,原因就不说了。

<Grid Height="Auto" Margin="0,10"><Button Background="Aqua"><TextBlock Text="&#xe608;" /></Button>
</Grid>

字体图标制作方法

关于如何制作自己的字体图标,请参考WPF 字体图标的使用 - lxiamul - 博客园。感谢博主对于字体图标的分享。


http://www.ppmy.cn/embedded/141146.html

相关文章

计算机网络基础回顾

网络有几层&#xff1f; OSI 模型 OSI&#xff08;开放系统互联&#xff09;模型由七层构成&#xff0c;分别是&#xff1a; 物理层 (Physical Layer)&#xff1a;负责传输原始比特流&#xff0c;处理物理连接和电气信号。 数据链路层 (Data Link Layer)&#xff1a;负责节点…

一文理解多模态大语言模型——上

作者&#xff1a;Sebastian Raschka 博士&#xff0c; 翻译&#xff1a;张晶&#xff0c;Linux Fundation APAC Open Source Evangelist 编者按&#xff1a;本文并不是逐字逐句翻译&#xff0c;而是以更有利于中文读者理解的目标&#xff0c;做了删减、重构和意译&#xff0c…

Linux系统之fuser命令的基本使用

Linux系统之fuser命令的基本使用 一、fuser命令介绍二、fuser命令使用帮助2.1 help帮助信息2.1 基本语法①通用选项②文件/设备相关选项③网络相关选项④进程操作选项⑤其他选项 三、fuser命令的基本使用3.1 查找挂载点的进程3.2 查看指定设备进程信息3.3 查找监听特定端口的进…

Maven高级篇

本篇主要讲解做项目过程中学习到一些关于maven使用的知识&#xff0c;主要包括分模块设计、继承&#xff0c;继承中的版本锁定&#xff0c;maven的聚合以及maven私服。 目录 一、分模块设计 二、继承 三、继承中的版本锁定 四、maven的聚合 五、maven私服 一、分模块设计…

设计模式学习之——责任链模式

责任链模式的基本概念 定义&#xff1a;责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许多个对象按照一定顺序处理请求&#xff0c;并且每个对象可以选择自己是否处理该请求或者将其传递给下一个对象处理。 核心思…

详解PyTorch中的Sequential容器:构建与优化简单卷积神经网络

详解PyTorch中的Sequential容器&#xff1a;构建与优化简单卷积神经网络 Sequential 是 PyTorch 中的一个容器模块&#xff0c;它按照在构造函数中添加它们的顺序来组织多个子模块&#xff08;通常是网络层&#xff09;。Sequential 容器允许用户快速串联多个模块&#xff0c;…

[UUCTF 2022 新生赛]ez_rce

[UUCTF 2022 新生赛]ez_rce 我们来分析一下这个代码&#xff1a; 首先是isset看我们有没有传一个为空的值&#xff0c;如果为空就输出居然都不输入参数&#xff0c;可恶!!!!!!!!!不为空就GET传参赋值给$code &#xff0c;接着 如果 $code 中不包含这些模式中的任何一个&#x…

git merge 排除文件

方法一&#xff1a; 在Git中&#xff0c;如果你想在合并时排除特定文件&#xff0c;你可以使用.gitattributes文件来指定合并策略。你可以设置一个自定义合并策略来忽略特定文件的合并。 首先&#xff0c;在仓库的根目录下创建或编辑.gitattributes文件&#xff0c;并添加以…