发布
社区首页 >问答首页 >在WPF中使用SVG文件作为图标的正确方法是什么

在WPF中使用SVG文件作为图标的正确方法是什么
EN

Stack Overflow用户
提问于 2010-08-20 05:23:26
回答 9查看 123.3K关注 0票数 85

有人能描述一种推荐的循序渐进的程序来完成这项工作吗?

Step1。将SVG转换为XAML...这很容易

Step2。这次又是什么?

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2010-08-20 13:56:11

您的技术将取决于SVG到XAML转换器生成的XAML对象。它会生成图画吗?一张图片?网格?画布?一条路?几何图形?在每种情况下,你的技术都是不同的。

在下面的示例中,我将假设您在按钮上使用图标,这是最常见的场景,但请注意,相同的技术也适用于任何ContentControl。

将图形用作图标的

要使用绘图,请使用DrawingBrush绘制一个适当大小的矩形:

代码语言:javascript
复制
<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>

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

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

使用图像作为图标的

镜像可以直接使用:

代码语言:javascript
复制
<Button>
  <Image ... />  <!-- Converted from SVG -->
</Button>

将网格用作图标的

可以直接使用网格:

代码语言:javascript
复制
<Button>
  <Grid ... />  <!-- Converted from SVG -->
</Button>

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

代码语言:javascript
复制
<Button>
  <Viewbox ...>
    <Grid ... />  <!-- Converted from SVG -->
  </Viewbox>
</Button>

使用画布作为图标的

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

代码语言:javascript
复制
<Button>
  <Canvas Height="100" Width="100">  <!-- Converted from SVG, with additions -->
  </Canvas>
</Button>

使用路径作为图标的

您可以使用路径,但必须显式设置描边或填充:

代码语言:javascript
复制
<Button>
  <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

代码语言:javascript
复制
<Button>
  <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

使用几何体作为图标的

您可以使用路径来绘制几何图形。如果应对其进行笔划,请设置Stroke:

代码语言:javascript
复制
<Button>
  <Path Stroke="Red" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

或者,如果需要填充,请设置填充:

代码语言:javascript
复制
<Button>
  <Path Fill="Blue" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

如何数据绑定

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

绑定图形:

代码语言:javascript
复制
<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
    </Rectangle.Fill>
  </Rectangle>
</Button>

绑定镜像:

代码语言:javascript
复制
<Button Content="{Binding Image}" />

绑定网格:

代码语言:javascript
复制
<Button Content="{Binding Grid}" />

在Viewbox中绑定网格:

代码语言:javascript
复制
<Button>
  <Viewbox ...>
    <ContentPresenter Content="{Binding Grid}" />
  </Viewbox>
</Button>

绑定画布:

代码语言:javascript
复制
<Button>
  <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>

绑定路径:

代码语言:javascript
复制
<Button Content="{Binding Path}" />  <!-- Fill or stroke must be set in code unless set by the SVG converter -->

绑定几何体:

代码语言:javascript
复制
<Button>
  <Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>
票数 164
EN

Stack Overflow用户

发布于 2014-03-01 06:53:34

安装SharpVectors

代码语言:javascript
复制
Install-Package SharpVectors

在XAML中添加以下内容

代码语言:javascript
复制
<UserControl xmlns:svgc="http://sharpvectors.codeplex.com/svgc">
    <svgc:SvgViewbox Source="/Icons/icon.svg"/>
</UserControl>
票数 60
EN

Stack Overflow用户

发布于 2017-07-06 05:12:39

Windows 10 build 15063“创建者更新”原生支持SVG图像(尽管有一些问题)到针对Windows 10的UWP/UAP应用程序。

如果您的应用程序是WPF应用程序而不是UWP/UAP应用程序,您仍然可以使用此API (在经历了许多困难之后):Windows 10 build 17763“2018年10月更新”引入了XAML岛的概念(作为一种“预览”技术,但我相信在应用程序商店中是允许的;在所有情况下,随着Windows 10 build 18362“2019年5月更新”XAML岛不再是预览功能,并且完全支持),允许您在WPF应用程序中使用UAP和控件。

您需要首先使用,并使用某些与用户数据或系统交互的Windows10API(例如,在Windows10UWP webview中从磁盘加载图像或使用toast通知API来显示toast),您还需要将您的WPF应用程序与包标识关联(在Visual Studio2019中非常容易)。不过,使用Windows.UI.Xaml.Media.Imaging.SvgImageSource类应该不需要这样做。

使用方法(如果你在UWP上,或者你已经按照上面的说明在WPF下添加了XAML岛支持)就像将<Image />Source设置为SVG的路径一样简单。这相当于使用SvgImageSource,如下所示:

代码语言:javascript
复制
<Image>
    <Image.Source>
        <SvgImageSource UriSource="Assets/svg/icon.svg" />
    </Image.Source>
</Image>

然而,以这种方式(通过XAML)加载的SVG图像是may load jagged/aliased。一种解决方法是指定一个double+您的实际高度/宽度的RasterizePixelHeightRasterizePixelWidth值:

代码语言:javascript
复制
<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->

这可以通过在基本镜像的ImageOpened事件中创建一个新的SvgImageSource来动态解决:

代码语言:javascript
复制
var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon));
PrayerIcon.ImageOpened += (s, e) =>
{
    var newSource = new SvgImageSource(svgSource.UriSource);
    newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2;
    newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2;
    PrayerIcon2.Source = newSource;
};
PrayerIcon.Source = svgSource;

混叠可能很难在非高dpi屏幕上看到,但这里尝试说明它。

这是上述代码的结果:一个Image使用初始SvgImageSource,其下的第二个Image使用在ImageOpened事件中创建的SvgImageSource:

这是上图的放大视图:

而这是底部(抗锯齿,正确的)图像的放大视图:

(您需要在新的选项卡中打开图像并以全尺寸查看,以欣赏其中的差异)

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3526366

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档