evAPPs 26 авг 2020 в 14:24

Использование SVG ресурсов в Xamarin

12 мин

6.1K

C#*Дизайн мобильных приложений*Xamarin*

Комментарии 10

AlexNovikovAlex 26 авг 2020 в 14:48

Я бы и рад вам лайк поставить, но к сожалению не хватает рейтинга.

-2

russ99 26 авг 2020 в 15:28

спасибо полезно!!!

-3

JosephFekadu 26 авг 2020 в 15:28

вот тоже самое, понравилось, но на лайк тоже не хватает.

-3

kz0t1 26 авг 2020 в 15:28

Я не разработчик, но в форматах в каких лучше размещать изображения всегда путаюсь, так что первая часть статьи была прям кстати. Спасибо.

-1

ruma46 27 авг 2020 в 09:02

В WPF для таких относительно простых иконок можно использовать объекты Geometry, скопировав в них path прямо из SVG. И вынести их все в одельный ResourceDictionary, очень удобно получается. То есть вообще никакие сторонние библиотеки не нужны. Не знаю, будет ли это работать в Xamarin[.Forms], но должно, учитывая, что они очень похожи.

SVG

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
  <g>
    <path id="path1" transform="rotate(0,24,24) translate(0,0) scale(1.5,1.5)  " fill="#000000" d="M14.246002,23.394012L16.850006,23.394012 16.850006,26.235001 14.246002,26.235001z M15.785995,5.7660065C17.520004,5.7660065 18.862,6.2390137 19.809006,7.1880035 20.833008,8.2109985 21.347,9.5140076 21.347,11.090012 21.347,12.432007 20.872009,13.575012 19.927002,14.522003 19.374008,15.075012 18.624008,15.825012 17.677002,16.768005 16.970001,17.479004 16.613998,18.546005 16.613998,19.964005L14.483002,19.964005C14.483002,18.229004 14.759003,16.92601 15.311005,16.061005 15.706009,15.430008 16.456009,14.561005 17.559006,13.456009 18.190002,12.827011 18.507004,12.077011 18.507004,11.208008 18.507004,10.106003 18.229004,9.276001 17.677002,8.7230072 17.20401,8.25 16.535995,8.0140076 15.667007,8.0140076 14.956009,8.0140076 14.363998,8.25 13.893005,8.7230072 13.104004,9.5140076 12.710007,10.695999 12.710007,12.274002L9.9869995,12.274002C9.9869995,10.223007 10.658997,8.526001 11.999008,7.1880035 12.945999,6.2390137 14.208008,5.7660065 15.785995,5.7660065z M16,3.131012C8.8910065,3.131012 3.1290054,8.8930054 3.1290054,16 3.1290054,23.108002 8.8910065,28.869003 16,28.869003 23.104996,28.869003 28.867004,23.108002 28.867004,16 28.867004,8.8930054 23.104996,3.131012 16,3.131012z M16,0C24.820007,0 32,7.178009 32,16 32,24.822006 24.820007,32 16,32 7.1760025,32 0,24.822006 0,16 0,7.178009 7.1760025,0 16,0z" />
  </g>
</svg>

XAML

<Geometry x:Key="IconQuestion">M14.246002,23.394012L16.850006,23.394012 16.850006,26.235001 14.246002,26.235001z M15.785995,5.7660065C17.520004,5.7660065 18.862,6.2390137 19.809006,7.1880035 20.833008,8.2109985 21.347,9.5140076 21.347,11.090012 21.347,12.432007 20.872009,13.575012 19.927002,14.522003 19.374008,15.075012 18.624008,15.825012 17.677002,16.768005 16.970001,17.479004 16.613998,18.546005 16.613998,19.964005L14.483002,19.964005C14.483002,18.229004 14.759003,16.92601 15.311005,16.061005 15.706009,15.430008 16.456009,14.561005 17.559006,13.456009 18.190002,12.827011 18.507004,12.077011 18.507004,11.208008 18.507004,10.106003 18.229004,9.276001 17.677002,8.7230072 17.20401,8.25 16.535995,8.0140076 15.667007,8.0140076 14.956009,8.0140076 14.363998,8.25 13.893005,8.7230072 13.104004,9.5140076 12.710007,10.695999 12.710007,12.274002L9.9869995,12.274002C9.9869995,10.223007 10.658997,8.526001 11.999008,7.1880035 12.945999,6.2390137 14.208008,5.7660065 15.785995,5.7660065z M16,3.131012C8.8910065,3.131012 3.1290054,8.8930054 3.1290054,16 3.1290054,23.108002 8.8910065,28.869003 16,28.869003 23.104996,28.869003 28.867004,23.108002 28.867004,16 28.867004,8.8930054 23.104996,3.131012 16,3.131012z M16,0C24.820007,0 32,7.178009 32,16 32,24.822006 24.820007,32 16,32 7.1760025,32 0,24.822006 0,16 0,7.178009 7.1760025,0 16,0z</Geometry>

Пример использования

<Button>
    <Path Data="{StaticResource IconQuestion}" Height="16" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform"/>
</Button>

Если SVG сложный и состоит из нескольких path, то их можно скопировать один за другим: <Geometry...>M...zM...zM...z</Geometry>

evAPPs 27 авг 2020 в 16:39

Да, такой вариант Xamarin.Forms предусматривает.
Похожий функционал появился в версии 4.7 и пока является экспериментальным — это Xamarin.Forms.Shapes. Для его использования нужно его для начала «включить», изменив конструктор в классе App.xaml.cs:

        public App()
        {
            Device.SetFlags(new string[] { "Shapes_Experimental" });
            InitializeComponent();

            MainPage = new MainPage();
        }

Затем добавить в ресурсы страницы или всего приложения нужную иконку:

Пример иконки

<Application.Resources>
        <Path x:Key="pp" Data="F1 M 24.0033,56.0078L 24.0033,38.0053L 22.0031,40.0056L 19.0027,35.0049L 38.0053,20.0028L 45.0063,25.5299L 45.0063,21.753L 49.0068,21.0029L 49.0068,28.6882L 57.008,35.0049L 54.0075,40.0056L 52.0073,38.0053L 52.0073,56.0078L 24.0033,56.0078 Z M 38.0053,26.9204L 27.0038,36.005L 27.0038,53.0074L 33.0046,53.0074L 33.0046,42.006L 43.006,42.006L 43.006,53.0074L 49.0068,53.0074L 49.0068,36.005L 38.0053,26.9204 Z" />
</Application.Resources>

Написать конвертер, который переведет его в объект PathFiguresCollection:

Пример конвертера

public class PathToFiguresConverter : IValueConverter
    {
        public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
        {
            var path = value as Path;
            var figures = (path.Data as PathGeometry).Figures;
            return figures;
        }

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

Далее уже можно использовать как угодно, например при создании кастомного контрола или добавления на экран как отдельного элемента управления.

Пример кода для использования как элемента управления

<StackLayout
        Padding="30"
        Spacing="20">
        <Path
            Fill="Red"
            HorizontalOptions="Center"
            Aspect="Uniform"
            WidthRequest="100"
            HeightRequest="100">
            <Path.Data>
                <PathGeometry
                    Figures="{Binding Source={StaticResource pp}, Converter={StaticResource converter}}" />
            </Path.Data>
            <Path.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
            </Path.GestureRecognizers>
        </Path>
    </StackLayout>

Результат

Напрямую в кнопку загрузить к сожалению не получится, потому что класс Xamarin.Forms.Shape наследуется от View, зато поэтому его объекты можно использовать как контролы.

А вот с какими-то более сложными изображениями, которые состоят из нескольких path, придется больше возиться, поскольку предложенный Вами способ в данный не укладывается. Или мы чего-то не учли.

semmaxim 23 сен 2020 в 10:04

InkScape позволяет экспортировать прямо в XAML объекты практически любой сложности.

ruma46 23 сен 2020 в 13:32

Спасибо, на будущее пригодится такая функция.

А я пользуюсь бесплатной MetroStudio от Syncfusion — по сути, эта прога — набор векторных иконок, и тоже может сохранять как XAML, но только свои (т.е. которые в ней).