在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代码(例如Path的Fill属性),则会立即在Visual Studio 2015的"设计"窗口中显示更改.

现在我想创建一个引用此图像的ResourceDictionary.我将xaml代码直接包含在ResourceDictionary中,但在这种情况下我失去了预览的能力(Visual Studio中没有设计窗口,我得到"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>

据我所知，您的原始父级Canvas是不必要的，我只是假设只是您制作资产的所见即所得编辑器中剩下的东西，因为名称空间是多余的，并且剪辑什么也不做？

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

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

它仍然允许您设置属性，例如您是否想更改为Fill="Red"或您需要执行的任何操作。现在问题的答案是，如果您在设计视图中，或者在文档大纲中，那么right-click -> Edit Style -> Edit Current您正在实时编辑模板，这样您的更改就可以立即在设计窗口中进行，但可以从资源词典中进行（您会注意到窗口的变化）。

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

附录：

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