Как установить значок AppBarButton с использованием файлового ресурса svg в UWP / C#

Вы не можете напрямую использовать файл .svg в качестве значка AppBarButton. Чтобы загрузить файл значка SVG в AppBarButton.Icon, вы можете преобразовать его в PNG, шрифт или путь, а затем использовать FontIcon, BitmapIcon и PathIcon для его отображения. Более подробно вы можете заглянуть в эту похожую ветку:

https://social.msdn.microsoft.com/Forums/en-US/1d32a8b5-a4e1-472b-acce-85c92380b799/uwp-how-to-load-svg-icon-into-appbarbuttonicon?forum=wpdevelop

В настоящее время основная проблема с преобразованием файла SVG в PathIcon заключается в том, что PathIcon указывается в XAML как один оператор XAML «Path». Таким образом, каждый путь в файле SVG должен быть разбит на один и тот же оператор «путь», чтобы быть совместимым с форматом XAML с одним путем для указания PathIcon. Это больше соответствует способу указания шрифтов.

Однако с учетом сказанного SVG легко переводится или конвертируется в XAML, поскольку он указан в формате XML:

<ResourceDictionary>
    <Canvas 
           x:Key = "appbar_icon1" 
           Width = "76" Height = "76" 
           ...>
        <Path ... />
        <Path ... />
        <Path ... />
        ...
    </Canvas>
</ResourceDictionary>

Три метода получения данных XAML PATH из файла SVG.

Метод 1: Inkscape

1) Откройте или создайте свой SVG в Inkscape

2) Файл -> Сохранить как…

3) В типах файлов выберите Microsoft XAML (внизу)

4) В окне у вас есть вариант совместимости с Silverlight. Я бы выбрал, поскольку он генерирует более чистый XML

Метод 2: формат XPS

1) Распечатайте SVG на принтере XPS

2) Принтер XPS запросит имя файла. Сохраните это где-нибудь

3) Переименуйте расширение файла в .ZIP.

4) Распакуйте все файлы в zip-архивы. Это создаст кучу файлов и папок.

5) Найдите файл. Скорее всего, он находится в разделе "Документы> 1> Страницы> 1.fpage".

Метод 3: вырезать и вставить файл SVG XML

SVG - это формат файла XML. Вы можете открыть его в своем любимом текстовом редакторе. Если вы открываете файл и прокручиваете его вниз, просмотрите содержимое ниже.

1) Откройте файл SVG в редакторе:

<g
       transform = "translate(0,0)"
       id = "layer1">
    <path
        id = "path3388"
        d = "m 15.6,5 c 0,40 0,40 0,40"
        .../>
    <path
        id = "path3390"
        d = "m 35,5 c 0,40 0,40 0,40"
        .../>
    ...
</g>

2) Вручную конвертируйте теги пути XML в теги пути XAML:

XAML:

<Path Data = "F1 m 15.6,5 c 0,40 0,40 0,40" 
      Stroke = "Black" 
      StrokeThickness = "1" />
<Path Data = "F1 m 35,5 c 0,40 0,40 0,40" 
      Stroke = "Black" 
      StrokeThickness = "1" />
...

Если вам нужен значок векторизации для AppBarButton или Navigationviewitem.Icon, а стандартных значков, предоставляемых Microsoft, недостаточно, то лучший способ найти значок - это найти в Интернете бесплатный «Шрифт значков» и загрузить его в свое приложение как ресурс, затем используйте FontIcon для установки значка. (См. https://www.webpagefx.com/blog/web-design/free-icon-fonts).

Другой альтернативой является создание собственного шрифта и использование программного обеспечения для создания шрифтов, такого как «FontBird» (https://birdfont.org/).

Вы всегда можете поместить содержание в свой элемент AppBarButton. Итак, используйте Изображение и SvgImageSource, чтобы поместить значок в содержимое AppBarButton. Здесь я использовал изображение 16p x 16 пикселей SVG.

Исходный SVG:

AppBarButton с меткой:

А вот остальной код

this.MyAppBarButton.Content = new Image()
        {
            Source = new SvgImageSource()
            {
                UriSource = new Uri("ms-appx:///Assets/logo.svg")
            }
        };