WPF 在 WPF 中使用 SVG 文件作为图标的正确方法是什么 [英] WPF What is the correct way of using SVG files as icons in WPF

问题描述

有人可以描述推荐的逐步执行此操作的程序吗?

Can someone describe a recommended Step by Step procedure for doing this?

第一步.将 SVG 转换为 XAML...很简单

Step1. Convert SVG to XAML... thats easy

步骤 2.现在怎么办?

Step2. Now what?

推荐答案

您的技术将取决于您的 SVG 到 XAML 转换器生成的 XAML 对象.它会产生图纸吗?一个图像?网格?画布?路径?几何?在每种情况下，您的技术都会有所不同.

Your technique will depend on what XAML object your SVG to XAML converter produces. Does it produce a Drawing? An Image? A Grid? A Canvas? A Path? A Geometry? In each case your technique will be different.

在下面的示例中，我假设您在按钮上使用图标，这是最常见的情况，但请注意，相同的技术适用于任何 ContentControl.

In the examples below I will assume you are using your icon on a button, which is the most common scenario, but note that the same techniques will work for any ContentControl.

使用绘图作为图标

要使用绘图，请使用绘图刷绘制适当大小的矩形:

To use a Drawing, paint an approriately-sized rectangle with a DrawingBrush:

<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>

          <Drawing ... /> <!-- Converted from SVG -->

        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Button>

使用图像作为图标

可以直接使用图片:

<Button>
  <Image ... />  <!-- Converted from SVG -->
</Button>

使用网格作为图标

可以直接使用网格:

<Button>
  <Grid ... />  <!-- Converted from SVG -->
</Button>

或者，如果您需要控制大小，也可以将其包含在 Viewbox 中:

Or you can include it in a Viewbox if you need to control the size:

<Button>
  <Viewbox ...>
    <Grid ... />  <!-- Converted from SVG -->
  </Viewbox>
</Button>

使用画布作为图标

这就像使用图像或网格，但由于画布没有固定大小，您需要指定高度和宽度(除非 SVG 转换器已经设置了这些):

This is like using an image or grid, but since a canvas has no fixed size you need to specify the height and width (unless these are already set by the SVG converter):

<Button>
  <Canvas Height="100" Width="100">  <!-- Converted from SVG, with additions -->
  </Canvas>
</Button>

使用路径作为图标

您可以使用路径，但您必须明确设置笔触或填充:

You can use a Path, but you must set the stroke or fill explicitly:

<Button>
  <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

或

<Button>
  <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

使用几何图形作为图标

您可以使用路径来绘制几何图形.如果应该描边，设置描边:

You can use a Path to draw your geometry. If it should be stroked, set the Stroke:

<Button>
  <Path Stroke="Red" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

或者如果应该填充，设置填充:

or if it should be filled, set the Fill:

<Button>
  <Path Fill="Blue" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

如何绑定数据

如果您在代码中进行 SVG -> XAML 转换并希望使用数据绑定显示生成的 XAML，请使用以下方法之一:

If you're doing the SVG -> XAML conversion in code and want the resulting XAML to appear using data binding, use one of the following:

绑定绘图:

<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
    </Rectangle.Fill>
  </Rectangle>
</Button>

绑定图像:

<Button Content="{Binding Image}" />

绑定网格:

<Button Content="{Binding Grid}" />

在 Viewbox 中绑定网格:

Binding a Grid in a Viewbox:

<Button>
  <Viewbox ...>
    <ContentPresenter Content="{Binding Grid}" />
  </Viewbox>
</Button>

绑定画布:

<Button>
  <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>

绑定路径:

<Button Content="{Binding Path}" />  <!-- Fill or stroke must be set in code unless set by the SVG converter -->

绑定几何:

<Button>
  <Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>

这篇关于WPF 在 WPF 中使用 SVG 文件作为图标的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！