4

I want to have nice looking vector graphic in my application. And who doesn't? =D

After some researching I found that there is SVG file format (and some others), but WPF (despite its credo vector graphics, blablabla) doesn't supports it.

I tried two svg libraries, but they are really crap (so I will not say their names).

Then I found what Inkscape (free svg-editor) can save svg-files as xaml-files. Here is a peace of such file:

<?xml version="1.0" encoding="UTF-8"?>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
    <Canvas Name="svg2" Width="744" Height="1052">
        <Canvas.Resources>
        <!--Unknown tag: inkscape:perspective-->
        </Canvas.Resources>
        <!--Unknown tag: sodipodi:namedview-->
        <!--Unknown tag: metadata-->
        <Canvas Name="layer1">
            <Canvas Name="g2987">
                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path2999" Fill="#FFE9E9FF">
                <Path.Data><PathGeometry Figures="m 299.04734 376.6985  ........

Now my question is how can I use those xaml-files? I found this answer, but still I have no clue how to display my nice looking vector stuff inside button. It's Viewbox located in another xaml (not in one where window/application is defined).

How do I organize it in a way to be able easily display it, to example:

<Button>
    <Button.Content> ... display it here somehow </Button.Content>
</Button>

And to keep it as separate file (don't copy content or whatever), so that I can easily change it or edit with Inkscape.

I thought about resource dictionaries, yet I can figure out how would that looks like.

P.S.: from other point of view, I could write small converter, so that original files will be kept as SVG, then I export them as xaml and finally run my converter to make it something what I then can easily assign as content to buttons. I need guidance of how would that something looks like, to still be separate xaml and how actually attach it as content to a button.

Community
  • 1
  • 1
Sinatr
  • 20,892
  • 15
  • 90
  • 319
  • To downvotes, to whom is unclear what I am asking: **How to assign `Viewbox` to button content?** Or what should I do to assign `xaml` generated by `Inkscape` as button content. – Sinatr Jun 03 '14 at 12:51

1 Answers1

6

Start by creating ResourceDictionary add your exported view boxes to it and add a unique key to them

<ResourceDictionary>
    <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform" x:Key="buttonContent">
        <Canvas Name="svg2" Width="744" Height="1052">
        ...

merge the dictionary to your window or user control or even whole application

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ButtonDictionary.xaml" />
        </ResourceDictionary.MergedDictionaries>
        ...

then use it as follows to use with your button

<Button Content="{StaticResource buttonContent}">

this is a sample to create resource dictionary and use them

pushpraj
  • 13,458
  • 3
  • 33
  • 50
  • 1
    `x:Shared="False"` is important addition to this answer. The final solution (which I am using year later) is to keep `Canvas` as a root element for svg file, so that bunch of canvases (one for each svg file) then combined into single resource dictionary, all of them have key and then I use `ViewBox` in place where I want to display them (because I want to be able to set viewbox size). – Sinatr Aug 28 '15 at 11:32