SVG to DataTemplate not working which as PathGeometry

Indudhar Gowda 426 Reputation points

I have 3 Country Flags in SVG , I need to Convert SVG to DataTemplate.

Example : France Flag , this is Working

 <DataTemplate x:Key="France">
        <Grid HorizontalAlignment="Stretch">
            <Path Fill="#ECEFF1" Data="M16 9H32V39H16z"/>
            <Path Fill="#FF3D00" Data="M32 9H46V39H32z"/>
            <Path Fill="#3F51B5" Data="M2 9H16V39H2z"/>

France is working Fine,
Great Britain & Spain is not Working i need to make it has DataTemplate ...I have attached the SVG File..!Ag8QU6ar3yRugYtqSldPXz7DMWFn5Q?e=SyguPA


Universal Windows Platform (UWP)
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,635 questions
{count} votes

Accepted answer
  1. Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,851 Reputation points

    Hello @Indudhar Gowda ,

    Welcome to Microsoft Q&A

    SVG to DataTemplate not working which as PathGeometry

    I checked your attached file, uwp does not support DrawingImage xaml file, For complete svg content, the better way is use image to render, And you could also converter svg to xaml like the following.

    For example.

    <ResourceDictionary xmlns="" xmlns:x="">  
      <ControlTemplate x:Key="great_britainsvg">  
        <Viewbox Width="48" Height="48">  
          <Canvas Height="48" Width="48">  
            <Path Fill="#3F51B5" Data="M2 10H46V38H2z" />  
            <Path Fill="#FFF" Data="M2 14.216L22.81 26.935 25.939 21.815 6.608 10 2 10z" />  
            <Path Fill="#FFF" Data="M46 10L42.391 10 23.061 21.814 26.189 26.935 46 14.826z" />  
            <Path Fill="#FFF" Data="M26.189 20.271L23.061 25.391 43.691 38 46 38 46 32.379z" />  
            <Path Fill="#FFF" Data="M2 32.991L2 38 5.31 38 25.939 25.392 22.811 20.271z" />  
            <Path Fill="#FFF" Data="M2 20H46V28H2z" />  
            <Path Fill="#FFF" Data="M20 10H28V38H20z" />  
            <Canvas Height="48" Width="48">  
              <Path Fill="#E53935" Data="M17.218 20L2 10.699 2 13.043 13.382 20zM44.309 10L27.947 20 31.782 20 46 11.311 46 10zM33.082 28L46 35.895 46 33.551 36.917 28zM15.918 28L2 36.506 2 38 3.392 38 19.753 28zM2 22H46V26H2z" />  
              <Path Fill="#E53935" Data="M22 10H26V38H22z" />  

    Nico Zhu

    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

2 additional answers

Sort by: Most helpful
  1. Indudhar Gowda 426 Reputation points

    Nico for now above solution work....If any hardstop when svg is complex i will raise a new thread.

    0 comments No comments

  2. Agha Khan 161 Reputation points

    Doesn't make any sense of this flag. Try this. I did with hand.
    <Path Fill="#002377" Data="M0,37.9 0,49.8 18.2,37.9Z" />
    <Path Fill="#002377" Data="M0,7.3 0,18.8 17.7,18.8Z" />
    <Path Fill="#002377" Data="M76.3,0 50.3,0 50.3,16.9Z" />
    <Path Fill="#002377" Data="M34.7,0 8.5,0 34.7,17.1Z" />
    <Path Fill="#002377" Data="M9,56.7 34.7,56.7 34.7,39.9Z" />
    <Path Fill="#002377" Data="M85,18.8 85,7.1 67.1,18.8Z" />
    <Path Fill="#002377" Data="M50.3,56.7 75.8,56.7 50.3,40.1Z" />
    <Path Fill="#002377" Data="M85,49.9 85,37.9 66.6,37.9Z" />
    <Path Fill="#C2121F" Data="M46.9,22.8H85v11H46.9v22.8h-8.8V33.9H0v-11h38.1V0h8.8V22.8z M0,56.1v0.6h5.7l28.8-18.8h-6.6L0,56.1z M79.6,0L50.8,18.8h6.6L85,0.7V0H79.6z M56.9,37.9L85,56.2v-4.3l-21.5-14H56.9z M27.8,18.8L0,0.7V5l21.2,13.8H27.8z"/>

    0 comments No comments