Include XAML image in ResourceDictionary with design preview function

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 ZM 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 change the XAML code of this image (for example, the Fill property for Path), the changes are displayed instantly in the Design window in Visual Studio 2015.

Now I would like to create a ResourceDictionary that references this image. I included the xaml code directly in the ResourceDictionary, but in this case I lose the ability to have a preview (design windows are 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 ZM 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 a resource dictionary so that it looks like this:

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

I hope I understand your intention correctly. If you do not let me know, but this is what I will most likely do.

We take your Path and convert it to a style for a resource dictionary in which it is:

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

Converts to this and fits into the 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 ZM 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 the fact that I could say that your original parent Canvas not needed, and I just assumed that it was just the remaining material from the WYSIWYG editor with which you made this asset, since the namespaces will be redundant and the clip did nothing?

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

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

What else allows you to set your properties as if you wanted to switch to Fill="Red" or whatever you need to do. The answer to your question now, although there is, if you are in your design view or from the outline of the document, just right-click -> Edit Style -> Edit Current and you are editing the template live so that your changes are immediate in the window design, but from the Dictionary resource (you will notice a window change).

In addition, Blend is really suitable for any resource operation that VS does not intuitively provide. Hope this helps, welcomes.

ADDITION:

If you want to do this directly from your resource dictionary to immediately see all your resources, you simply open your resource dictionary and open the "Resources" tab. Add the x:Name template to the Style template and run it. I personally use Blend for this. However, now you will see your template in the resources tab, and you can either double-click or right-click → Edit, and it will allow you to actively edit anything in your resource dictionary. Sample image from Blend;