Сначала путь наценка может показаться довольно запутанной. Основные отличия, которые необходимо учитывать в отношении вашего вопроса: M, Q, L и Z.
M - отправная точка для нового пути. Поскольку ваше изображение содержит 2 элемента (пути), вы будете использовать 2 M разметки - один для галочки, другой для поля.
Q обозначает квадратичную кривую Безье. Ему нужны две точки. Первый определяет, где тянуть линию, а вторая - это конечная точка. Важно отметить, что предыдущее заданное значение обозначает начало кривой.
L предназначен для прямой линии. Это критическое значение после кривой Безье в противном случае вызывает ошибку. Очевидно, парсер видит Q, обрабатывает первые два набора чисел, а затем видит третью, которая не привязана к разметке и BOOM. В вашем случае L используется, так как мы делаем линию. Однако мы могли бы использовать другой Q, чтобы сделать волнистую линию.
Z закроет путь и подключит его к отправной точке.
Глядя на исходное изображение, Единственные наценки Необходимые M и Z. Ваш путь значение свойства данных будет:
M 263,99 263.115 87.115 87.340 311.340 311.221 327.221 327.355 73.355 73,99 Z M 186.323 105.238 143.195 186,240,351,68 391.112 Z
Надеюсь, этот образ поможет объяснить вышеуказанные цифры: Outline Image
Единственное дополнение можно было бы добавить свойство заливку Пути и использовать ту же величину, ваш ход (# 808080). Это дает вам то же изображение, что и ваш оригинал. Не беспокойтесь, что это большие числа. Как векторная графика, они будут уменьшаться, чтобы соответствовать их контейнеру!
(Для тех, кто интересуется тем, как я придумал эти цифры, я взял изображение в Photoshop, развернул холст, чтобы сделать квадрат, а затем просто отметил все точки X, Y в фотошопе и использовал эти цифры.)
что касается кривых ...
Это где Q разметки приходит, а также L. Надеюсь, следующие иллюстрации помогут. Здесь мы имеем простой угол 90 градусов:
RightAngle
Чтобы бросить кривую на это, мы должны использовать Q-разметку. Если вы хотите сделать идеальную кривую, вы должны использовать точку, в которой пересекаются две линии. Поскольку это угол 90 градусов, это довольно легко понять. Это будет точка, к которой тянется кривая. В нашем примере выше это будет точка 0,0. Далее нам нужно знать, где мы хотим, чтобы кривая начиналась и заканчивалась. Чем дальше от точки привязки, тем больше кривая.В приведенной ниже иллюстрации я использовал 50:
CurvedAngle
На простом языке M 100,0 50,0 В 0,0 0,50 л 0100 переводит к: Глядя на точке 100,0, привлечь к точке 50,0, оттуда начнется вытягивание кривой до точки 0,0 и завершение в точке 0,50. Теперь нарисуем линию до 0,100.
Надеюсь, это объясняет, как сделать кривые в пути. На самом деле это довольно легко, как только вы получите это. С небольшим творчеством вы действительно можете многое сделать с помощью путей.
С учетом вышесказанного, разметка я думаю вы ищете это (НЕ ЗАБУДЬТЕ ДОБАВИТЬ заливку СОБСТВЕННОСТЬ!):
Data = "M 263,99 263115 113,115 Q 87,115 87,139 L 87315 Q 87340 113340 L 287340 311340 311315 Q L 311221 327221 327315 Q 327355 287355 113355 л Q 73355 73315 л 73139 В 73,99 113,99
ZM 186323 105238 143195 391112 186,240,351,68 Z»
Вышеуказанная наценка дает вам: CurvedCheckBox
Вот ссылка на команды разметки: MarkupCommands
Вот несколько примеров создания форм: MakingShapes
Используйте Rectangle вместо Path, или RectangleGeometry для данных РАТНЫ. – Clemens
Кроме того, установка Stretch to Fill с этими координатами выглядит странно. – Clemens
Данные пути - это единственное, что может это сделать. он не смотрит так, как вы хотите, потому что данные не инструктируют его. – Logan