同时在多个地方使用从 ResourceDictionary 加载的 XAML canvas

Use a XAML canvas loaded from ResourceDictionary on multiple places at same time

我有一个 XAML 带有矢量字形集的 ResourceDictionary。

ResourceDictionary 示例(带有单个字形):

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

    <Canvas Width="32" Height="32">
        <Path Fill="#FF444444">
            <Path.Data>
                <PathGeometry Figures="M27.125 21.688c0-0.438-0.125-0.875-0.5-1.188l-3.688-3.688c-0.313-0.375-0.75-0.5-1.25-0.5s-0.875 0.188-1.25 0.563c0 0 0.125 0.125 0.313 0.313s0.313 0.313 0.375 0.375c0.063 0.063 0.188 0.188 0.313 0.375 0.125 0.125 0.188 0.25 0.188 0.438 0.063 0.125 0.063 0.313 0.063 0.5 0 0.438-0.125 0.875-0.5 1.188-0.313 0.313-0.688 0.5-1.188 0.5-0.188 0-0.313 0-0.5-0.063-0.125-0.063-0.313-0.125-0.438-0.25-0.188-0.063-0.25-0.188-0.375-0.25-0.063-0.063-0.188-0.188-0.375-0.375s-0.25-0.313-0.313-0.313c-0.375 0.313-0.563 0.75-0.563 1.25s0.125 0.938 0.5 1.25l3.625 3.688c0.375 0.313 0.75 0.5 1.25 0.5 0.438 0 0.875-0.188 1.188-0.5l2.625-2.563c0.375-0.375 0.5-0.75 0.5-1.25zM14.563 9.125c0-0.5-0.125-0.875-0.5-1.188l-3.625-3.75c-0.375-0.313-0.75-0.5-1.25-0.5-0.438 0-0.875 0.188-1.188 0.5l-2.625 2.625c-0.375 0.313-0.5 0.75-0.5 1.188 0 0.5 0.125 0.875 0.5 1.188l3.688 3.75c0.313 0.313 0.75 0.5 1.25 0.5s0.875-0.188 1.25-0.563c0-0.063-0.125-0.188-0.313-0.375s-0.313-0.313-0.375-0.375c-0.063-0.063-0.188-0.188-0.313-0.313-0.125-0.188-0.188-0.313-0.188-0.438-0.063-0.188-0.063-0.313-0.063-0.5 0-0.5 0.125-0.875 0.5-1.25 0.313-0.313 0.688-0.5 1.188-0.5 0.188 0 0.313 0.063 0.5 0.063 0.125 0.063 0.313 0.125 0.438 0.25 0.188 0.125 0.25 0.188 0.375 0.25 0.063 0.063 0.188 0.188 0.375 0.375s0.25 0.313 0.313 0.375c0.375-0.375 0.563-0.813 0.563-1.313zM30.563 21.688c0 1.438-0.5 2.688-1.5 3.625l-2.625 2.625c-1 1-2.188 1.5-3.625 1.5s-2.688-0.5-3.625-1.5l-3.688-3.75c-1-0.938-1.5-2.188-1.5-3.625s0.5-2.688 1.563-3.688l-1.563-1.563c-1 1-2.25 1.563-3.688 1.563s-2.688-0.5-3.688-1.5l-3.688-3.75c-1-1-1.5-2.188-1.5-3.625s0.5-2.625 1.5-3.625l2.625-2.625c1-1 2.188-1.438 3.625-1.438s2.688 0.5 3.625 1.5l3.688 3.688c1 1 1.5 2.188 1.5 3.625s-0.5 2.688-1.563 3.75l1.563 1.563c1-1.063 2.25-1.563 3.688-1.563s2.688 0.5 3.688 1.5l3.688 3.688c1 1 1.5 2.25 1.5 3.625z" FillRule="NonZero"/>
            </Path.Data>
        </Path>
    </Canvas>
</ResourceDictionary>

我需要在我的 WPF 应用程序的不同位置同时使用这些字形。但仍然只有第一个实例被加载(呈现给用户),其他实例抛出异常:

Specified element is already the logical child of another element. Disconnect it first

我尝试使用

渲染这些字形
<Viewbox Stretch="Uniform" Height="44" Child="{StaticResource LinkGlyph}" />

还有

<Viewbox Stretch="Uniform" Height="44" >
    <ContentControl Content="{StaticResource LinkGlyph}" />
</Viewbox>

(第二种方法不会抛出异常,但仍然只呈现字形的第一个实例)

那么,如何同时使用 RecourceDictionary 中的多个画布实例?

我找到了解决方案:

ResourceDictionary 中的字形需要包裹在 ControlTemplate 中,因此它应该看起来:

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

    <ControlTemplate x:Key="LinkGlyph">
        <Viewbox Stretch="Uniform">
            <Canvas Width="32" Height="32">
                <Path Fill="#FF444444">
                    <Path.Data>
                        <PathGeometry Figures="M27.125 21.688c0-0.438-0.125-0.875-0.5-1.188l-3.688-3.688c-0.313-0.375-0.75-0.5-1.25-0.5s-0.875 0.188-1.25 0.563c0 0 0.125 0.125 0.313 0.313s0.313 0.313 0.375 0.375c0.063 0.063 0.188 0.188 0.313 0.375 0.125 0.125 0.188 0.25 0.188 0.438 0.063 0.125 0.063 0.313 0.063 0.5 0 0.438-0.125 0.875-0.5 1.188-0.313 0.313-0.688 0.5-1.188 0.5-0.188 0-0.313 0-0.5-0.063-0.125-0.063-0.313-0.125-0.438-0.25-0.188-0.063-0.25-0.188-0.375-0.25-0.063-0.063-0.188-0.188-0.375-0.375s-0.25-0.313-0.313-0.313c-0.375 0.313-0.563 0.75-0.563 1.25s0.125 0.938 0.5 1.25l3.625 3.688c0.375 0.313 0.75 0.5 1.25 0.5 0.438 0 0.875-0.188 1.188-0.5l2.625-2.563c0.375-0.375 0.5-0.75 0.5-1.25zM14.563 9.125c0-0.5-0.125-0.875-0.5-1.188l-3.625-3.75c-0.375-0.313-0.75-0.5-1.25-0.5-0.438 0-0.875 0.188-1.188 0.5l-2.625 2.625c-0.375 0.313-0.5 0.75-0.5 1.188 0 0.5 0.125 0.875 0.5 1.188l3.688 3.75c0.313 0.313 0.75 0.5 1.25 0.5s0.875-0.188 1.25-0.563c0-0.063-0.125-0.188-0.313-0.375s-0.313-0.313-0.375-0.375c-0.063-0.063-0.188-0.188-0.313-0.313-0.125-0.188-0.188-0.313-0.188-0.438-0.063-0.188-0.063-0.313-0.063-0.5 0-0.5 0.125-0.875 0.5-1.25 0.313-0.313 0.688-0.5 1.188-0.5 0.188 0 0.313 0.063 0.5 0.063 0.125 0.063 0.313 0.125 0.438 0.25 0.188 0.125 0.25 0.188 0.375 0.25 0.063 0.063 0.188 0.188 0.375 0.375s0.25 0.313 0.313 0.375c0.375-0.375 0.563-0.813 0.563-1.313zM30.563 21.688c0 1.438-0.5 2.688-1.5 3.625l-2.625 2.625c-1 1-2.188 1.5-3.625 1.5s-2.688-0.5-3.625-1.5l-3.688-3.75c-1-0.938-1.5-2.188-1.5-3.625s0.5-2.688 1.563-3.688l-1.563-1.563c-1 1-2.25 1.563-3.688 1.563s-2.688-0.5-3.688-1.5l-3.688-3.75c-1-1-1.5-2.188-1.5-3.625s0.5-2.625 1.5-3.625l2.625-2.625c1-1 2.188-1.438 3.625-1.438s2.688 0.5 3.625 1.5l3.688 3.688c1 1 1.5 2.188 1.5 3.625s-0.5 2.688-1.563 3.75l1.563 1.563c1-1.063 2.25-1.563 3.688-1.563s2.688 0.5 3.688 1.5l3.688 3.688c1 1 1.5 2.25 1.5 3.625z" FillRule="NonZero"/>
                    </Path.Data>
                </Path>
            </Canvas>
        </Viewbox>
    </ControlTemplate>
</ResourceDictionary>

然后 glyps 被放置为:

<ContentControl Template="{StaticResource LinkGlyph}" Height="44" />

感谢这篇文章:http://learnwpf.com/post/2006/06/04/How-do-I-Include-Vector-Based-Image-Resources-in-my-WPF-Application.aspx

您可以简单地在 Canvas 资源上设置 x:Shared="False"

<Canvas x:Key="LinkGlyph" x:Shared="False" Width="32" Height="32">
    <Path Fill="#FF444444" Data="F1 M27.125 ... 3.625z"/>
</Canvas>

你可能甚至不需要 Canvas:

<Path x:Key="LinkGlyph" x:Shared="False"
      Width="32" Height="32" Fill="#FF444444" 
      Data="F1 M27.125 ... 3.625z"/>