在具有设计预览功能的 ResourceDictionary 中包含 XAML 图像

Question

我在 XAML 文件中定义了一个矢量图像

Image.xaml

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_power" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="38" Height="41.1667" Canvas.Left="19" Canvas.Top="17.4167" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z "/>
</Canvas>

如果我修改此图像的 XAML 代码（例如路径的填充属性），更改会立即显示在 Visual Studio 的设计 window 中2015.

现在我想创建一个引用此图像的 ResourceDictionary。我将 xaml 代码直接包含在 ResourceDictionary 中，但在这种情况下我失去了预览的能力（设计 windows 在 Visual Studio 中不可用，我得到 "MyResourceDictionary.xaml cannot be edited in the Design View").

MyResourceDictionary.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Project.XamlResources">

    <Canvas x:Key="appbar_power" x:Name="appbar_power" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="38" Height="41" Canvas.Left="19" Canvas.Top="17" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z "/>
    </Canvas>

</ResourceDictionary>

有没有办法以类似于以下的方式创建资源字典：

MyResourceDictionary_new.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:Project.XamlResources">

<refers_to "Image.xaml">

</ResourceDictionary>

Answer 1

希望我没有正确理解您的意图。如果不让我知道，但这是我可能会做的。

我们将您的 Path 转换为资源字典的样式，其中 this;

<Canvas x:Key="appbar_power" x:Name="appbar_power" 
        Width="76" Height="76" 
        Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="38" Height="41" Canvas.Left="19" Canvas.Top="17" 
          Stretch="Fill" Fill="#FFFFFFFF" 
          Data="F1 M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z "/>
</Canvas>

转换成这个放到你的资源字典中；

<Style x:Key="appbar_power" TargetType="{x:Type Path}">
   <Setter Property="Width" Value="38"/>
   <Setter Property="Height" Value="41"/>
   <Setter Property="Stretch" Value="Fill"/>
   <Setter Property="Fill" Value="#FFFFFFFF"/>
   <Setter Property="Data" Value="F1 M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z"/>
</Style>

据我所知，您原来的 parent Canvas 不是必需的，我只是假设这只是您制作资产所用的所见即所得编辑器的剩余内容，因为名称空间是多余的并且剪辑什么也没做？

所以现在您的 Path 是一个实际的模板。我们现在在实例中使用它;

<Path Style="{StaticResource appbar_power}"/>

它仍然允许您设置您的属性，就像您想要更改为 Fill="Red" 或任何您需要做的一样。不过现在你的问题的答案是，如果你在设计视图中，或者从文档大纲中，只需 right-click -> Edit Style -> Edit Current 并且你正在实时编辑模板，这样你的更改就会立即出现在设计中 window 但来自资源词典（您会注意到 window 更改）。

此外，对于 VS 不直观提供的任何资源资产工作，Blend 真的非常方便。希望这有帮助，干杯。

附录：

如果您想直接从您的资源词典中执行此操作，以便您可以立即看到其中的所有资源，您只需打开您的资源词典，然后打开您的资源选项卡。将 x:Name 添加到 Style 模板并运行它。为此，我个人使用 Blend。但是，现在您将在资源选项卡中看到您的模板，您可以 double-click 或 right-click -> 编辑，它可以让您主动编辑资源字典中的任何内容。来自 Blend 的图像示例；

在具有设计预览功能的 ResourceDictionary 中包含 XAML 图像

Including XAML image in ResourceDictionary with Design preview functionality

wpf

xaml

resourcedictionary

visual-studio-2015