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

Question

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

图像.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 代码(例如路径的 Fill 属性)，更改会立即显示在 Visual Studio 2015 的设计窗口中。

现在我想创建一个引用此图像的 ResourceDictionary。我直接在 ResourceDictionary 中包含了 xaml 代码，但在这种情况下，我失去了预览的能力(Visual Studio 中没有设计窗口，我收到“无法在设计 View 中编辑 MyResourceDictionary.xaml”)。

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并将其转换为资源字典的样式；

<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没有必要，我只是假设这只是您制作 Assets 所用的 WYSIWYG 编辑器的剩余内容，因为命名空间将是多余的，而 Clip 什么也没做？

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

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

这仍然允许您设置您的属性，就像您想更改为 Fill="Red"或者你需要做的任何事情。不过，现在您的问题的答案是，如果您在设计 View 或文档大纲中，只需 right-click -> Edit Style -> Edit Current并且您正在实时编辑模板，因此您的更改会立即出现在设计窗口中，但来自资源字典(您会注意到窗口发生了变化)。

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

附录:

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