矢量图像作为可重用的 XAML 片段 [英] Vector image as reusable XAML fragment

问题描述

我想在一些 WPF 应用程序/库中重用一些 XAML 片段作为图像.

I want to reuse some XAML fragment as image in some WPF application/library.

问题背景如下:

在 WPF 应用程序中重用位图图像很容易.图像可以作为资源添加，我可以在 XAML 的很多地方使用 <Image Source="packURI"/> 使图像相同.

It's easy to reuse a bitmap image in a WPF application. The image can be added as a resource, I can use <Image Source="packURI"/> at many places in XAML so the image will be the same.

但我想有可能对矢量图像做同样的事情.图像本身可以表示为 Path，但我不能重用相同的 Path 作为资源，因为只是在几个不同的地方(可能来自多个 UI 线程)使用它被禁止(UI 元素只能有一个逻辑父元素).

But I'd like to have a possibility to do the same for a vector image. The image itself can be represented as Path, but I cannot reuse the same Path as a resource, because simply using it at several different places (and possibly from several UI threads) is prohibited (UI element can have only one logical parent).

此外，如果我想从多个 Path 构建图像"，问题会变得更加复杂，为此使用 Canvas.或者一些任意的 XAML 代码.

Moreover, the question gets more complicated if I'd like to build the "image" from several Paths, use a Canvas for it. Or some arbitrary XAML code.

我尝试对 Path 使用 Style，因此图像以这样的方式表示:

I tried using a Style for the Path, so the image is represented in such a way:

<Path Style={StaticResource VectorImage1}/>

这似乎是一种可重用的方式，但我担心两个问题:

This seems to be a reusable way, but I am concerned with two problems:

1. 如果矢量图像的实现从 Path 更改为(例如)Canvas，我不仅需要在样式中替换它，而且在使用它的源代码中随处可见.
2. 使用样式定义路径似乎过于冗长.
3. 我认为没有办法概括这种使用 Canvas 或任意 XAML 代码的方法.
4. 语法似乎很不自然.

1. If the implementation of a vector image is changed from Path to a (for instance) Canvas, I'll need to replace it not only in the style, but everywhere in the source code which uses it.
2. Definition of a path using a style seems to be too verbose.
3. I see no way to generalize this approach for using Canvas or arbitrary XAML code.
4. The syntax seems to be quite unnatural.

通过定义一个UserControl，还有其他方法可以获得可重用的XAML 片段，但是为每个矢量图像定义一个单独的用户控件似乎有点矫枉过正.

There is other way to have a reusable XAML fragment, through defining a UserControl, but defining a separate user control for each vector image seems to be an overkill.

是否有更好、更好、正确的方法来定义可重用的 XAML 片段?

Is there a better, nice, right way to define a reusable XAML fragment?

推荐答案

您可以将 x:Shared 属性添加到 Path Resource 并将其用作 StaticResource.如果MyVectorImage"更改为其他内容，这将起作用

You can add the x:Shared attribute to the Path Resource and use it as a StaticResource. This will work if "MyVectorImage" changes to something else

更新
可能最好使用 ContentControl 或类似物来添加属性，例如 Margin 等.

Update
Probably better to use a ContentControl or similar to be able to add Properties, such as Margin etc.

<Window.Resources>
    <Path x:Key="MyVectorImage"
          x:Shared="False"
          Stroke="DarkGoldenRod"
          StrokeThickness="3"
          Data="M 10,20 C 10,25 40,35 40,17 H 28"
          Stretch="Fill"
          Width="100"
          Height="40"/>
</Window.Resources>
<StackPanel>
    <ContentControl Margin="10" Content="{StaticResource MyVectorImage}"/>
    <ContentControl Margin="10" Content="{StaticResource MyVectorImage}"/>
</StackPanel>

示例.您将MyVectorImage"替换为包含两个路径的 StackPanel.

Example. You replace "MyVectorImage" with a StackPanel containing two Paths.

<Window.Resources>
    <StackPanel x:Key="MyVectorImage"
                x:Shared="False">
        <Path Stroke="DarkGoldenRod"
              StrokeThickness="3"
              Data="M 10,20 C 10,25 40,35 40,17 H 28"
              Stretch="Fill"
              Width="100"
              Height="40"/>
        <Path Stroke="DarkGoldenRod"
              StrokeThickness="3"
              Data="M 10,20 C 10,25 40,35 40,17 H 28"
              Stretch="Fill"
              Width="100"
              Height="40"/>
    </StackPanel>
</Window.Resources>

这篇关于矢量图像作为可重用的 XAML 片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！