Including XAML image in ResourceDictionary with Design preview functionality

Question

I have a vector image defined in a XAML file

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>

If I modify XAML code of this image (for example the Fill property of the Path) the changes are displayed instantly in the Design window of Visual Studio 2015.

Now I would like to create a ResourceDictionary that refers to this image. I included the xaml code directly in the ResourceDictionary but in this case i lose the ability of having a preview (Design windows is not available in Visual Studio, I get "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>

Is there a way to create the resource dictionary in a way similar to the following:

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

Hopefully I'm understanding your intention correctly. If not let me know but this is what I would likely do.

We take your Path and convert it to a style for the Resource Dictionary wherein 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>

Is converted to this and put in your resource dictionary;

<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>

From what I could tell your original parent Canvas wasn't necessary and I only assumed was just leftover stuff from a WYSIWYG editor you made the asset with since the namespaces would be redundant and the Clip did nothing?

So now your Path is an actual template. We use it at the instance now like;

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

Which still allows you to set your properties like if you wanted to change to Fill="Red" or whatever you need to do. The answer to your question now though is, then if you're in your design view, or from the Document Outline, just right-click -> Edit Style -> Edit Current and you're editing the template live so your changes are immediate in the design window but from the Resource Dictionary (You will notice the window change).

Also, Blend is really darn handy for any resource asset work that VS doesn't intuitively provide. Hope this helps, cheers.

ADDENDUM:

If you want to do it straight from your Resource Dictionary so you can see all your resources in there at once you would just open your Resource Dictionary, and open your Resources Tab. Add an x:Name to the Style template and run it. I use Blend personally for this. However now you'll see your template in your resources tab and you can either double-click or right-click -> Edit and it will let you edit actively anything in your resource dictionary. Image example from Blend;