如何使用 XAML 格式图标？

Question

已经从 VS 图标库中复制了图标文件 Backwards.xaml 到项目目录中。如何在 XAML 中引用？

<Button x:Name="btn">
  <!--如何在此处引用 Resources/Backwards.xaml，使按钮中显示其图标？-->
</Button>

要求：

①不把图标文件的内容直接复制到引用处。

②部署时不出现 xaml 文件。

③直接在 XAML 中引用，不在代码中动态设置。

---

追问：用以下方法可避免更改图标本身 XAML 内容，但在用户控件和使用该控件的窗口的设计器中均不能正常显示图标，只在运行时显示：

1. 将图标 XAML 文件的生成操作设为页（Page）。
2. 在按钮中用 Frame 控件显示图标：

      <Button x:Name="BackButton">
          <Frame Source="/Resources/Backwards.xaml"/>
      </Button>
   

能否让设计器也正常显示图标？

Answer 1

确保 Backwards.xaml 的构建操作设置为 Page，这样它会被编译为 BAML 格式并嵌入到程序集资源中，而不会作为独立的文件部署。

你可以参考下面的示例。

Backwards.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <DrawingBrush x:Key="BackwardsIcon">

  

        <DrawingBrush.Drawing>

           

            <GeometryDrawing Brush="LightPink" Geometry="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395" />

        </DrawingBrush.Drawing>

    </DrawingBrush>

</ResourceDictionary>

在 App.xaml 中将 Backwards.xaml 合并到应用程序资源中。pack://application:,,,/YourAssemblyName;component/Resources/Backwards.xaml 是资源文件的路径格式，其中 YourAssemblyName 需要替换为你实际的程序集名称。

<Application x:Class="WpfApp1.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:local="clr-namespace:WpfApp1"

             StartupUri="MainWindow.xaml">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="pack://application:,,,/WpfApp1;component/Resources/Backwards.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>

 <Button x:Name="btn" Content="Backwards" Width="100" Height="30">
     <Button.Background>
         <StaticResource ResourceKey="BackwardsIcon" />
     </Button.Background>
 </Button>

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。

注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。