How to create a round button button with an SVG image inserted into it, in XAML?

Question

C++ / C#

Hello.
I have some SVG image that I converted to this XAML code (using Inkscape):

<Path Name="Question" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FF808080">
                                        <Path.Data>
                                            <PathGeometry Figures="M 8.004 9.531 8 9.284 C 8 8.959 8.052 8.975 8.157 8.739 8.234 8.562 8.357 8.383 8.528 8.203 8.654 8.071 8.881 7.879 9.208 7.627 9.535 7.375 9.747 7.174 9.846 7.024 9.944 6.874 9.993 6.711 9.993 6.533 9.993 6.212 9.849 5.93 9.563 5.687 9.276 5.445 8.925 5.208 8.508 5.208 8.106 5.208 7.77 5.433 7.501 5.653 7.232 5.873 7.056 6.217 6.972 6.685 L 6 6.584 C 6.088 5.957 6.348 5.478 6.78 5.144 7.211 4.811 7.772 4.396 8.482 4.396 c 0.751 0 1.363 0.427 1.81 0.785 0.448 0.358 0.672 0.79 0.672 1.298 0 0.293 -0.078 0.564 -0.235 0.812 C 10.572 7.539 10.263 7.84 9.806 8.195 9.497 8.432 9.295 8.608 9.201 8.72 9.107 8.834 9.037 8.964 8.991 9.111 8.946 9.258 8.92 9.201 8.913 9.531 l -0.909 0 z M 7.84 12 l 0 -1.271 1.29 0 0 1.271 -1.29 0 z" FillRule="NonZero"/>
                                        </Path.Data>
                                    </Path>
                                    <Path Name="Circle" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FF808080">
                                        <Path.Data>
                                            <PathGeometry Figures="M 8.5 0 C 3.806 0 0 3.806 0 8.5 0 13.194 3.806 17 8.5 17 13.194 17 17 13.194 17 8.5 17 3.806 13.194 0 8.5 0 Z m 0 16 C 4.358 16 1 12.642 1 8.5 1 4.358 4.358 1 8.5 1 12.642 1 16 4.358 16 8.5 16 12.642 12.642 16 8.5 16 Z" FillRule="NonZero"/>
                                        </Path.Data>
                                    </Path>

The SVG image is a question mark inside a circle.
How to get such a round button inside which this vector image would be located?

Answer 1

1) remake/convert the image to be a Drawing:

<GeometryDrawing Brush="#FF8B0000">
      <GeometryDrawing.Geometry>
        <PathGeometry ....... />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>

If there is more than one PathGeometry, use DrawingGroup.
2) put the resulting XAML into resources;
3) try my bike for putting image in button:
Converter code:

public class ResourceUriToDrawingImageConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      Uri uri =
        value is Uri ?
          value as Uri :
        value is string ?
          new Uri(value as string, UriKind.RelativeOrAbsolute) :
          null;

      if (uri == null)
      {
        throw new Exception("Invalid URI value");
      }

      StreamResourceInfo sri = Application.GetResourceStream(uri);
      if (sri == null)
      {
        throw new Exception("Resource not found");
      }

      using (Stream stream = sri.Stream)
      {
        var drawing = XamlReader.Load(stream) as Drawing;
        if (drawing == null)
        {
          throw new Exception("Resource cannot be converted to drawing");
        }

        return new DrawingImage(drawing);
      }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      throw new NotImplementedException();
    }
  }

PS Follow the turnip https://github.com/Nipheris/SharpVectors.MSBuild - soon there will be MSBuild-tasks for converting SVG directly during the build of the project.