Как создать круглую кнопку button со вставленным в неё SVG-изображением, на языке XAML?

Question

[Алексей Смирнов]

Здравствуйте.

У меня есть некоторое SVG-изображение, которое я преобразовал в такой XAML-код (с помощью программы 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>

В качестве SVG-изображения выступает знак вопроса расположенный внутри круга.

Как получить такую круглую кнопку внутри которой располагалось бы данное векторное изображение?

Answer 1

[Станислав Макаров]

1) переделайте/сконвертируйте изображение так, чтобы это был Drawing:

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

Если PathGeometry несколько, используйте DrawingGroup.
2) поместите полученный XAML в ресурсы;
3) попробуйте мой велосипед для того, чтобы поместить изображение в кнопку:

<Image Source="{Binding Source=путь_к/картинке.xaml, Converter={StaticResource ResourceUriToDrawingImageConverter}}" />

Код конвертера:

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();
		}
	}

P.S. Следите за репой https://github.com/Nipheris/SharpVectors.MSBuild - там скоро появятся MSBuild-таски для конвертирования SVG прямо во время сборки проекта.