CODEWITHSUNDEEP
c#xamlwindows-8microsoft-metrowindows-8.1
asitis
asitis

Reputation: 3031

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

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"  Label="print Label"  Command="{Binding ButtonCommand}" CommandParameter="print label">
         <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..!!

Upvotes: 5

Views: 2814

Answers (1)

asitis
asitis

Reputation: 3031

Got the response from msdn forum.

http://social.msdn.microsoft.com/Forums/windowsapps/en-US/b0506eca-27b2-409a-b624-66c98274bcec/how-to-create-appbar-button-pathicon-from-a-svg-image-with-multiple-paths?forum=winappswithcsharp

Thanks Matt Small for the information!

Upvotes: 2

Related Questions