как установить иконку AppBarButton, используя ресурс файла SVG в UWP / C #

Question

Документация Microsoft гласит, что вы можете устанавливать значки, используя файлы векторной графики SVG: https://docs.microsoft.com/en-us/windows/uwp/design/style/icons

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

<AppBarButton Label="BitmapIcon">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Svg/MyButton.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

Вот как я добавил файл Svg в свой проект: В рамках проекта я создал каталог «Svg», а внутри папки Svg я добавил файл «MyButton.svg».Свойство этого файла ресурсов svg установлено в:

BuildAction: content

Копировать в выходной каталог: не копировать

Пользовательский инструмент:

Пользовательский инструментПространство имен:

Answer 1

В настоящее время основная проблема с преобразованием файла 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 Path в теги путей 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" />
...

Answer 2

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

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

Answer 3

Вы не можете напрямую использовать файл .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