在WPF中如何使用图标

时间:2023-01-13 16:04:24

I am new in WPF. I want to use Font-awesome Icon in textbox and button. but the icon is not bind with my textbox

我是WPF的新手。我想在文本框和按钮中使用字体很棒的图标。但是图标没有绑定到我的文本框

I install Font-awesome resource to my application.

我将Font-awesome资源安装到我的应用程序中。

Let me know the way how can I use it

让我知道怎么用它。

Thank You,

谢谢你!

I really need it please help me..

我真的需要它,请帮助我。

Example

例子

Step 1 : Download Font-Awesome

第一步:下载Font-Awesome

Tools -> Library Package Manager -> Package Manager Console Install

工具->库包管理器->包管理器控制台安装

PM > Install-Package FontAwesome.WPF

点>安装包FontAwesome.WPF

Step 2 : Add Resource

步骤2:添加资源

<Application> xmlns:fa="http://schemas.fontawesome.io/icons/" </Application>

Step 3 : Put App.xaml

步骤3:放置App.xaml

<Application.Resources>

    <Style x:Key="FontAwesome">
        <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />
    </Style>

</Application.Resources>

Step 4 : Use it in Demo.xaml

第四步:在Demo.xaml中使用

<TextBlock Style="{StaticResource FontAwesome}"
FontSize="75"
Text="&#xf133;" />

Step 5 :- Output

第五步:输出

在WPF中如何使用图标

3 个解决方案

#1


15  

First, download Font Awesome, extract the ZIP file and copy fonts/fontawesome-webfont.ttf into a Fonts folder in your solution. Set the Build Action in the properties to Resource if it isn’t already

首先,下载字体很棒,提取ZIP文件和拷贝字体/fontawesome-webfont。ttf进入解决方案中的字体文件夹。将属性中的构建操作设置为Resource(如果还没有)

在WPF中如何使用图标

Next, add a Style to the Resources in App.xaml. Don’t forget the # at the front of the font name and remember to use the internal name of the font, not the name of the file. To check the name of the font, just double click on the font file and it will open in the Windows Font Viewer. The font name will be at the top.

接下来,向App.xaml中的资源添加样式。不要忘记字体名称前面的#,记住使用字体的内部名称,而不是文件的名称。要检查字体的名称,只需双击字体文件,它就会在Windows字体查看器中打开。字体名称将在顶部。

在WPF中如何使用图标

<Application.resources>
<FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Application.resources>

Open MainWindow.xaml and replace the grid with below snippet:

打开主窗口。xaml,用下面的代码片段替换网格:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">

<StackPanel Orientation="Horizontal" >

<TextBlock Text="I" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>


<TextBlock x:Name="tbFontAwesome" Text="&#xf004;" FontFamily="{StaticResource FontAwesome}" Foreground="Red" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>
<TextBlock Text="Font Awesome" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>

</StackPanel>

</Grid>

Notice "Text" property of "tbFontAwesome" textblock, its the Unicode for Heart.

注意“tbFontAwesome”textblock的“Text”属性,它是心的Unicode。

Cheat Sheet

备忘单

#2


3  

To extend the accepted answer because it's somewhat out of date and missing information, here's what I did:

为了扩展已被接受的答案,因为它有点过时而且缺少信息,我这样做:

  • Download FontAwesome
  • 下载FontAwesome
  • Unzip the archive
  • 解压缩档案
  • Inside the unzipped folder, under the use-on-desktop folder, locate the version you want. N.B. Solid has the most icons free; some icons require a Pro payment for Regular and Light versions.
    • For me, this was Font Awesome 5 Free-Solid-900.otf.
    • 对我来说,这是字体很棒的5免费-固体-900.otf。
  • 在未压缩的文件夹中,在use-on-desktop文件夹下,找到您想要的版本。N.B. Solid拥有最多的免费图标;一些图标需要专业支付的常规和轻版本。对我来说,这是字体很棒的5免费-固体-900.otf。
  • Following the accepted answer and most tutorials, first create a sub-folder in your C# project named Fonts. Paste the fonts file inside this folder.
  • 遵循公认的答案和大多数教程,首先在c#项目中创建一个名为字体的子文件夹。将字体文件粘贴到此文件夹中。
  • I renamed this file FontAwesome.otf for brevity
  • 我把这个文件重新命名为FontAwesome。为了简便起见,我们传递
  • Set the properties of this file:
    • Build Action: Resource
    • 建立行动:资源
    • Copy to Output Directory: Copy if newer/Copy always
    • 复制到输出目录:如果更新/总是复制
  • 设置此文件的属性:Build Action:将资源复制到输出目录:如果更新/总是复制,则复制
  • In your App.xaml <Application.Resources> or other <ResourceDictionary>, insert:
  • 在你App.xaml <应用程序。资源> 或其他 ,插入:
  • <FontFamily x:Key="FontAwesome">/YOUR_PROJECT_NAME;component/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid</FontFamily>
    • Replace YOUR_PROJECT_NAME with your project name. I include this because it is needed should you use MergedDictionaries across projects.
    • 用项目名替换您的_project_name。我之所以包含这个,是因为在跨项目使用mergeddictionary是必要的。
    • If you did not place the file in a project sub-folder Fonts, rename or omit this part of the path.
    • 如果您没有将文件放在项目子文件夹字体中,请重命名或省略路径的这一部分。
    • Check that the filename matches: replace FontAwesome.otf with the filename (or rename the file itself).
    • 检查文件名是否匹配:替换FontAwesome。otf的文件名(或重命名文件本身)。
    • Check the internal font name. You can do this by following the accepted answer. (Open the .otf or .tff file from explorer to start Windows Font Viewer, copy the font name).
    • 检查内部字体名称。你可以按照公认的答案来做。(从explorer打开.otf或.tff文件以启动Windows字体查看器,复制字体名称)。
    • Replace the Font Awesome 5 Free Solid with the font name (after the #).
    • 用字体名称(在#之后)替换字体Awesome 5 Free Solid。
    • Do not install the font otherwise you cannot verify that you have followed these steps correctly and the font may not work across computers that do not have the font installed.
    • 不要安装字体,否则您无法验证您是否正确地遵循了这些步骤,并且字体可能无法在没有安装字体的计算机之间工作。
  • < FontFamily x:关键= " FontAwesome " > / YOUR_PROJECT_NAME;组件/字体/ FontAwesome。用你的项目名替换你的_project_name。我把它包括进来,因为在项目中使用mergeddictionary是必要的。如果您没有将文件放在项目子文件夹字体中,请重命名或省略路径的这一部分。检查文件名是否匹配:替换FontAwesome。otf的文件名(或重命名文件本身)。检查内部字体名称。你可以按照公认的答案来做。(从explorer打开.otf或.tff文件以启动Windows字体查看器,复制字体名称)。用字体名称(在#之后)替换字体Awesome 5*实体。不要安装字体,否则您无法验证您是否正确地遵循了这些步骤,并且字体可能无法在没有安装字体的计算机之间工作。

#3


0  

You could as well manually select FontAwesome from the FontFamily property of the TextBlock.That will solve the problem.

您也可以从TextBlock的FontFamily属性手动选择FontAwesome。这将解决问题。

If FontAwesome is not among the list of fonts then you probably need to import the font file just like the first answer suggested.

如果FontAwesome不在字体列表中,那么您可能需要像建议的第一个答案一样导入字体文件。

#1


15  

First, download Font Awesome, extract the ZIP file and copy fonts/fontawesome-webfont.ttf into a Fonts folder in your solution. Set the Build Action in the properties to Resource if it isn’t already

首先,下载字体很棒,提取ZIP文件和拷贝字体/fontawesome-webfont。ttf进入解决方案中的字体文件夹。将属性中的构建操作设置为Resource(如果还没有)

在WPF中如何使用图标

Next, add a Style to the Resources in App.xaml. Don’t forget the # at the front of the font name and remember to use the internal name of the font, not the name of the file. To check the name of the font, just double click on the font file and it will open in the Windows Font Viewer. The font name will be at the top.

接下来,向App.xaml中的资源添加样式。不要忘记字体名称前面的#,记住使用字体的内部名称,而不是文件的名称。要检查字体的名称,只需双击字体文件,它就会在Windows字体查看器中打开。字体名称将在顶部。

在WPF中如何使用图标

<Application.resources>
<FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Application.resources>

Open MainWindow.xaml and replace the grid with below snippet:

打开主窗口。xaml,用下面的代码片段替换网格:

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">

<StackPanel Orientation="Horizontal" >

<TextBlock Text="I" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>


<TextBlock x:Name="tbFontAwesome" Text="&#xf004;" FontFamily="{StaticResource FontAwesome}" Foreground="Red" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>
<TextBlock Text="Font Awesome" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>

</StackPanel>

</Grid>

Notice "Text" property of "tbFontAwesome" textblock, its the Unicode for Heart.

注意“tbFontAwesome”textblock的“Text”属性,它是心的Unicode。

Cheat Sheet

备忘单

#2


3  

To extend the accepted answer because it's somewhat out of date and missing information, here's what I did:

为了扩展已被接受的答案,因为它有点过时而且缺少信息,我这样做:

  • Download FontAwesome
  • 下载FontAwesome
  • Unzip the archive
  • 解压缩档案
  • Inside the unzipped folder, under the use-on-desktop folder, locate the version you want. N.B. Solid has the most icons free; some icons require a Pro payment for Regular and Light versions.
    • For me, this was Font Awesome 5 Free-Solid-900.otf.
    • 对我来说,这是字体很棒的5免费-固体-900.otf。
  • 在未压缩的文件夹中,在use-on-desktop文件夹下,找到您想要的版本。N.B. Solid拥有最多的免费图标;一些图标需要专业支付的常规和轻版本。对我来说,这是字体很棒的5免费-固体-900.otf。
  • Following the accepted answer and most tutorials, first create a sub-folder in your C# project named Fonts. Paste the fonts file inside this folder.
  • 遵循公认的答案和大多数教程,首先在c#项目中创建一个名为字体的子文件夹。将字体文件粘贴到此文件夹中。
  • I renamed this file FontAwesome.otf for brevity
  • 我把这个文件重新命名为FontAwesome。为了简便起见,我们传递
  • Set the properties of this file:
    • Build Action: Resource
    • 建立行动:资源
    • Copy to Output Directory: Copy if newer/Copy always
    • 复制到输出目录:如果更新/总是复制
  • 设置此文件的属性:Build Action:将资源复制到输出目录:如果更新/总是复制,则复制
  • In your App.xaml <Application.Resources> or other <ResourceDictionary>, insert:
  • 在你App.xaml <应用程序。资源> 或其他 ,插入:
  • <FontFamily x:Key="FontAwesome">/YOUR_PROJECT_NAME;component/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid</FontFamily>
    • Replace YOUR_PROJECT_NAME with your project name. I include this because it is needed should you use MergedDictionaries across projects.
    • 用项目名替换您的_project_name。我之所以包含这个,是因为在跨项目使用mergeddictionary是必要的。
    • If you did not place the file in a project sub-folder Fonts, rename or omit this part of the path.
    • 如果您没有将文件放在项目子文件夹字体中,请重命名或省略路径的这一部分。
    • Check that the filename matches: replace FontAwesome.otf with the filename (or rename the file itself).
    • 检查文件名是否匹配:替换FontAwesome。otf的文件名(或重命名文件本身)。
    • Check the internal font name. You can do this by following the accepted answer. (Open the .otf or .tff file from explorer to start Windows Font Viewer, copy the font name).
    • 检查内部字体名称。你可以按照公认的答案来做。(从explorer打开.otf或.tff文件以启动Windows字体查看器,复制字体名称)。
    • Replace the Font Awesome 5 Free Solid with the font name (after the #).
    • 用字体名称(在#之后)替换字体Awesome 5 Free Solid。
    • Do not install the font otherwise you cannot verify that you have followed these steps correctly and the font may not work across computers that do not have the font installed.
    • 不要安装字体,否则您无法验证您是否正确地遵循了这些步骤,并且字体可能无法在没有安装字体的计算机之间工作。
  • < FontFamily x:关键= " FontAwesome " > / YOUR_PROJECT_NAME;组件/字体/ FontAwesome。用你的项目名替换你的_project_name。我把它包括进来,因为在项目中使用mergeddictionary是必要的。如果您没有将文件放在项目子文件夹字体中,请重命名或省略路径的这一部分。检查文件名是否匹配:替换FontAwesome。otf的文件名(或重命名文件本身)。检查内部字体名称。你可以按照公认的答案来做。(从explorer打开.otf或.tff文件以启动Windows字体查看器,复制字体名称)。用字体名称(在#之后)替换字体Awesome 5*实体。不要安装字体,否则您无法验证您是否正确地遵循了这些步骤,并且字体可能无法在没有安装字体的计算机之间工作。

#3


0  

You could as well manually select FontAwesome from the FontFamily property of the TextBlock.That will solve the problem.

您也可以从TextBlock的FontFamily属性手动选择FontAwesome。这将解决问题。

If FontAwesome is not among the list of fonts then you probably need to import the font file just like the first answer suggested.

如果FontAwesome不在字体列表中,那么您可能需要像建议的第一个答案一样导入字体文件。