Storing an (abstract) ImageSource object in a resource dictionary?

Question

I have a number of images in my project which I would like to add to a resource dictionary so that they are only loaded once & can be reused. The image files are compiled into the assembly as resource files.

The image files are SVG format which are manipulated by the SharpVectors library.

Right now the code loads them like this:

<Image Source="{svgc:SvgImage Source=/path/to/file.svg}" Width="..." ... />

svgc:SvgImage is a markup extension which returns an ImageSource object, exactly the type needed by the Source attribute of the Image.

I want to be able to do something like this:

<Image Source="{StaticResource SomeImageKey}" Width="..." ... />

But I haven't figured out yet how to move that source into a resource dictionary. Part of the problem is that the ImageSource class is abstract, so you can't just create one like <ImageSource .../> and give it some value.

I've seen similar examples using BitmapSource but I don't think that is the right type to use because I don't want to prematurely fix the dimensions of the SVG image, actually convert it to a bitmap in the dictionary, or cause it to rescale later, which I think would happen. (SVG is a re-sizable vector format).

---

What I'm doing right now as a sort of workaround is this:

<Image Source="{x:Static l:Images.SomeImageName}" .../>

where l:Images is a static C# class that has properties like:

    static public System.Windows.Media.ImageSource SomeImageName = 
        new SharpVectors.Converters.SvgImageExtension("path/to/file.svg"))
            .ProvideValue(null) as System.Windows.Media.ImageSource;

This actually works... it is calling the markup extension in code and saving its value. The key here is that plain C# of course is happy to define a property of the abstract ImageSource type.

There may be nothing wrong with this approach, but if there is a cleaner more standard XAML way to do this, that seems preferable. (Less for someone else to figure out in the future, maybe).

---

I've searched for examples of storing abstract types in resource dictionaries, but didn't find anything pertinent.

Answer 1

1)Convert your SVG to XAML using this tool or this open source or any other which you think good.

2) Create a Resource.xaml where you can store your converted svg image path like below example (you can store more svg like that just replace)

<Viewbox x:Key="YourImageName" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Rectangle Width="32" Height="32">
        <Rectangle.Fill>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <GeometryDrawing Brush="#FFFACB51" Geometry="M118.432,269.633C117.525,270.541 117.55,975.272 118.458,976.175 118.903,976.617 121.606,976.83 127.606,976.896 132.291,976.947 136.329,977.116 136.58,977.271 136.832,977.427 137.323,976.915 137.672,976.135 138.326,974.67 140.077,972.799 141.846,971.674 143.057,970.903 146.821,970.452 152.887,970.352 156.488,970.292 157.413,970.12 157.659,969.463 158.845,966.282 162.366,964.928 170.733,964.434L177.246,964.049 179.418,961.921C182.936,958.472,184.928,957.907,194.396,957.672L199.917,957.535 201.151,955.492C203.025,952.389 204.089,952.031 212.336,951.724 218.938,951.479 219.667,951.36 220.174,950.442 220.482,949.886 220.961,949.264 221.239,949.06 221.517,948.855 221.539,948.685 221.287,948.68 220.852,948.673 223.49,946.189 224.02,946.106 224.159,946.084 224.728,945.967 225.284,945.844 225.841,945.722 228.799,945.498 231.858,945.346 239.198,944.982 239.29,944.956 240.404,942.887 241.656,940.56 245.418,939.08 250.209,939.028 255.848,938.966 259.016,938.345 259.813,937.146 261.604,934.448 262.898,933.507 264.828,933.501 268.036,933.492 268.758,933.373 269.134,932.793 269.333,932.487 269.106,932.083 268.629,931.894 267.924,931.614 267.975,931.544 268.901,931.515L270.039,931.479 269.912,622.63C269.811,375.874 269.658,313.805 269.153,313.906 268.805,313.976 268.578,313.748 268.647,313.401 268.734,312.966 267.943,312.746 266.112,312.696 263.395,312.623 258.967,310.117 258.928,308.631 258.907,307.827 257.838,307.556 253.35,307.218 251.264,307.061 249.216,306.86 248.799,306.771 248.382,306.683 247.13,306.449 246.018,306.252 243.687,305.84 240.708,304.474 240.708,303.817 240.708,301.803 238.446,300.936 232.957,300.847 227.347,300.755 223.515,300.118 223.515,299.277 223.515,299.016 223.341,298.91 223.13,299.04 222.508,299.425 221.165,298.2 220.74,296.861 219.988,294.491 219.399,294.297 213.051,294.327 209.767,294.342 206.738,294.276 206.321,294.179 203.874,293.611 201.77,292.627 201.77,292.05 201.77,291.684 201.429,291.254 201.011,291.094 200.594,290.934 200.253,290.508 200.253,290.147 200.253,288.838 195.579,287.737 190.02,287.737 184.023,287.737 181.251,286.725 178.155,283.404 176.795,281.945 175.546,281.408 173.917,281.58 170.154,281.978 163.4,281.408 162.604,280.625 162.34,280.364 161.684,280.152 161.146,280.152 160.608,280.152 159.094,279.061 157.782,277.728 155.451,275.36 155.321,275.302 152.161,275.233 142.832,275.029 139.499,274.227 138.797,272.015 138.629,271.484 138.278,271.049 138.019,271.049 137.76,271.049 137.547,270.594 137.547,270.038 137.547,268.81 119.635,268.431 118.432,269.633"/>
                            <GeometryDrawing Brush="#FFFACB51" Geometry="M117.859,264.017C117.912,268.445 118.085,269.98 118.486,269.58 119.639,268.427 137.547,268.857 137.547,270.038 137.547,270.594 137.76,271.049 138.019,271.049 138.278,271.049 138.629,271.484 138.797,272.015 139.499,274.227 142.832,275.029 152.161,275.233 155.321,275.302 155.451,275.36 157.782,277.728 159.094,279.061 160.608,280.152 161.146,280.152 161.684,280.152 162.34,280.364 162.604,280.625 163.4,281.408 170.154,281.978 173.917,281.58 175.546,281.408 176.795,281.945 178.155,283.404 181.251,286.725 184.023,287.737 190.02,287.737 195.579,287.737 200.253,288.838 200.253,290.147 200.253,290.508 200.594,290.934 201.011,291.094 201.429,291.254 201.77,291.684 201.77,292.05 201.77,292.627 203.874,293.611 206.321,294.179 206.738,294.276 209.767,294.342 213.051,294.327 219.399,294.297 219.988,294.491 220.74,296.861 221.165,298.2 222.508,299.425 223.13,299.04 223.341,298.91 223.515,299.016 223.515,299.277 223.515,300.118 227.347,300.755 232.957,300.847 238.446,300.936 240.708,301.803 240.708,303.817 240.708,304.474 243.687,305.84 246.018,306.252 247.13,306.449 248.382,306.683 248.799,306.771 249.216,306.86 251.264,307.061 253.35,307.218 257.838,307.556 258.907,307.827 258.928,308.631 258.967,310.117 263.395,312.623 266.112,312.696 267.712,312.74 268.734,312.987 268.675,313.316 268.621,313.618 268.888,313.864 269.267,313.864 269.804,313.864 269.957,312.74 269.957,308.791 269.957,302.899 269.664,302.444 265.866,302.418L263.464,302.402 263.464,300.126C263.464,296.061,262.89,295.828,252.845,295.828L244.248,295.828 244.248,293.401C244.248,289.778 244.199,289.76 234.286,289.76 226.292,289.76 225.537,289.683 225.534,288.875 225.519,283.905 223.989,283.193 213.332,283.189L205.93,283.186 205.596,280.956C205.067,277.431 203.558,276.932 192.733,276.699 184.674,276.525 183.929,276.432 183.703,275.566 183.567,275.047 183.026,274.486 182.5,274.319 181.975,274.153 181.404,273.456 181.233,272.772 180.734,270.785 179.575,270.544 170.515,270.544L161.949,270.544 161.703,267.985C161.343,264.233,161.37,264.243,151.683,264.063L143.11,263.903 143.11,262.705C143.11,261.165 142.207,258.79 141.435,258.299 141.105,258.089 135.648,257.913 129.31,257.909L117.786,257.901 117.859,264.017 M269.223,932.709C268.937,933.454 268.766,933.487 265.081,933.5 262.874,933.507 261.679,934.334 259.813,937.146 259.016,938.345 255.848,938.966 250.209,939.028 245.418,939.08 241.656,940.56 240.404,942.887 239.29,944.956 239.198,944.982 231.858,945.346 228.799,945.498 225.841,945.722 225.284,945.844 224.728,945.967 224.159,946.084 224.02,946.106 223.49,946.189 220.852,948.673 221.287,948.68 221.539,948.685 221.517,948.855 221.239,949.06 220.961,949.264 220.482,949.886 220.174,950.442 219.667,951.36 218.938,951.479 212.336,951.724 204.089,952.031 203.025,952.389 201.151,955.492L199.917,957.535 194.396,957.672C184.928,957.907,182.936,958.472,179.418,961.921L177.246,964.049 170.733,964.434C162.366,964.928 158.845,966.282 157.659,969.463 157.413,970.12 156.488,970.292 152.887,970.352 146.821,970.452 143.057,970.903 141.846,971.674 140.077,972.799 138.326,974.67 137.672,976.135 137.323,976.915 136.828,977.424 136.572,977.266 136.316,977.108 132.221,976.942 127.472,976.896 122.723,976.851 118.837,976.627 118.837,976.397 118.837,976.168 118.64,975.98 118.4,975.98 118.159,975.98 117.988,978.654 118.02,981.922L118.078,987.863 128.445,988.016C142.371,988.22,143.11,987.955,143.11,982.743L143.11,981.542 152.149,981.542 161.188,981.542 161.504,979.962C161.678,979.093,161.82,977.728,161.82,976.928L161.82,975.474 170.402,975.474C180.789,975.474,183.67,974.483,185.474,970.291L186.072,968.9 192.783,968.863C204.351,968.8,205.305,968.527,205.683,965.173L205.938,962.914 214.637,962.746C224.555,962.556,224.826,962.45,225.359,958.564L225.675,956.258 233.664,956.258C243.749,956.258,244.248,956.092,244.248,952.731L244.248,950.19 253.069,950.19C263.14,950.19 263.464,950.052 263.464,945.779 263.464,943.658 263.499,943.614 265.234,943.54 268.098,943.417 268.251,943.386 268.64,942.857 268.866,942.548 269.014,942.609 269.019,943.013 269.023,943.377 269.216,943.558 269.448,943.415 269.871,943.153 270.139,931.985 269.722,931.985 269.6,931.985 269.375,932.311 269.223,932.709" />
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Rectangle.Fill>
    </Rectangle>
</Viewbox>

(here you can see Geometry and Brush just paste converted xaml line by line and select brush color code which you want. Reference my dictionary for any help)

3) Reference it in app.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Resources/MyImageResources.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>        
</Application.Resources>

4) then use it where you want

<Image Source="{StaticResource YourImageName}" Width="..." ... />

At last i added here my dictionary which was created using this method you can take a look and use this where you want, hoe you like it...

this is the most simple and best way to use svg and crystal clear hd light xaml images in apps as we done in android development

Answer 2

You may use an ObjectDataProvider resource like

<Window.Resources>
    <ObjectDataProvider x:Key="SomeImageKey"
                        ObjectInstance="{svgc:SvgImage Source=/path/to/file.svg}"/>
</Window.Resources>

and use it like

<Image Source="{Binding Source={StaticResource SomeImageKey}}"/>