locked
How to create appbar button PathIcon from a svg image with multiple paths?

    Question

  • Am creating window 8.1 application application bar button in a view.

    Am trying to create appbar button image from this svg image paths.

     <AppBarButton  AutomationProperties.Name="Label" RequestedTheme="Default">
             <AppBarButton.Icon>
                  <PathIcon Data="M13.5,14.25v-5h13v5h-2v-2.5h13v2.5H13.5z"/>
             </AppBarButton.Icon>
     </AppBarButton>

    Below is svg image in Text format

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <g>
    <g>
        <path fill="#FFFFFF" d="M26.508,14.365h-0.12l-13.14-0.021c-0.581,0-1.051-0.476-1.049-1.056c0-0.58,0.469-1.052,1.05-1.052
            l13.141,0.008c0.582,0,1.053,0.482,1.053,1.062c-0.002,0.578-0.473,1.06-1.053,1.06"/>
        <path fill="#FFFFFF" d="M21.198,11.71h0.066l-2.89-0.108c-0.389-0.002-0.702-0.364-0.7-0.752s0.274-0.72,0.702-0.724l2.891-0.005
            c0.389,0.004,0.701,0.41,0.699,0.799c-0.001,0.385-0.312,0.79-0.699,0.79"/>
        <g>
            <g>
                <path fill="#FFFFFF" d="M26.39,15.34h-13.03l0.083,1.465c0,0.042-0.009,0.08-0.007,0.122l0.569,11.524
                    c0.043,0.871,0.793,1.587,1.67,1.587h8.399c0.875,0,1.624-0.716,1.67-1.587l0.568-11.524c0.002-0.042-0.005-0.08-0.007-0.122
                    L26.39,15.34z M16.398,28.466c0,0-0.017,0.001-0.024,0.001c-0.383,0-0.699-0.301-0.713-0.686l-0.371-9.987
                    c-0.016-0.391,0.292-0.724,0.685-0.738c0.381-0.005,0.725,0.294,0.74,0.688l0.372,9.982
                    C17.101,28.12,16.795,28.451,16.398,28.466z M20.513,27.754c0,0.39-0.312,0.701-0.699,0.701
                    c-0.389-0.001-0.701-0.313-0.701-0.701l0.014-9.985c0-0.387,0.312-0.7,0.7-0.7h0.002c0.385,0.001,0.7,0.314,0.7,0.7
                    L20.513,27.754z M23.968,27.782c-0.015,0.384-0.328,0.685-0.712,0.685c-0.009,0-0.016-0.001-0.028-0.001
                    c-0.392-0.015-0.7-0.349-0.685-0.74l0.396-9.981c0.015-0.395,0.34-0.703,0.74-0.688c0.391,0.017,0.7,0.349,0.684,0.74
                    L23.968,27.782z"/>
            </g>
        </g>
     </g>
     </g>
    </svg>

    I created PathIcon Image if there is only one path data in the svg image.
    But how to handle the above case where they used more than one path for creating it.
    If any idea please..!!


    • Edited by asitis dobt Monday, February 17, 2014 9:51 AM
    Wednesday, February 12, 2014 10:04 AM

Answers

  • I don't think that there's a built-in solution for this problem.  That said, you probably need to figure out a way to combine the paths into a single path and then you'll be ok.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, February 12, 2014 1:29 PM
    Moderator

All replies

  • I don't think that there's a built-in solution for this problem.  That said, you probably need to figure out a way to combine the paths into a single path and then you'll be ok.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, February 12, 2014 1:29 PM
    Moderator
  • The XAML output by Inkscape often does not render correctly in Visual Studio.

    After some searching I got it to render correctly by printing to XPS and extracting the correct data string from the XPS file as shown in this tutorial: http://benpittoors.wordpress.com/2009/03/17/convert-svg-to-xaml/

    The result should render correctly and you can move it using ScaleTransform and TranslateTransform like shown here: http://stackoverflow.com/questions/5109058/wpf-the-right-way-to-scale-a-path

    To get multiple Paths into one, I used the "Path/Combine" command in Inkscape.

    cheers


    Life is unsure - always eat the dessert first!

    Friday, April 11, 2014 5:27 PM