Конвертируем SVG в XAML(используя Adobe Illustrator), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение

Поиск

Программирование, разработка, тестирование

→

WPF. Windows Presentation Foundation (отдельное приложение exe файл)

→

Конвертируем SVG в XAML(используя Adobe Illustrator), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение

Посмотрели 1932 раз(а)

Конвертируем SVG в XAML(используя Adobe Illustrator), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение

последнее обновление: 23 июня 2024

Шаг 1. Открываем картинку svg в Adobe Illustrator

Есть вот такая svg картинка:
Скачать ...

Открываем Adobe Illustrator CS5 ...
Если у вас не установлена Adobe Illustrator CS5 нужно скачать и установить пробную версию Adobe CS5 Master Collection ...

Открываем svg файл:

Шаг 2. Картинку svg конвертируем в XAML

В Adobe Illustrator в меню нажимаем: File -> Export

Выбираем опцию XAML for WPF

На заметку! В Adobe Illustrator по умолчанию опция XAML for WPF отсутствует.
Читаем как: поставить plugin в Adobe Illustrator чтобы опция XAML for WPF появилась ...

После конвертации получился вот такой файл:

house.xaml

<Viewbox Width="388.942" Height="390.873"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

     <Canvas Width="388.942" Height="390.873">

          
          <Path Data="F1 M 346.016,196.922 L 194.471,45.265 L 42.925,196.922 L 42.925,376.744 C 42.925,378.489 43.291,380.148 43.931,381.661 C 44.571,383.173 45.469,384.540 46.613,385.684 C 47.757,386.829 49.124,387.726 50.637,388.367 C 52.149,389.006 53.809,389.373 55.554,389.373 L 194.471,389.373 L 333.387,389.373 C 335.133,389.373 336.793,389.006 338.305,388.367 C 339.819,387.726 341.184,386.829 342.329,385.684 C 343.473,384.540 344.372,383.173 345.010,381.661 C 345.651,380.148 346.016,378.489 346.016,376.744 L 346.016,196.922 Z">
               <Path.Fill>
                    <LinearGradientBrush MappingMode="Absolute" StartPoint="471.666,821.656" EndPoint="471.666,509.398">
                         <LinearGradientBrush.GradientStops>
                              <GradientStop Offset="0.00" Color="#ffc8c8c8"/>
                              <GradientStop Offset="1.00" Color="#ffffffff"/>
                         </LinearGradientBrush.GradientStops>
                         <LinearGradientBrush.Transform>
                              <MatrixTransform Matrix="1.102,0.000,0.000,1.102,-325.304,-516.092" />
                         </LinearGradientBrush.Transform>
                    </LinearGradientBrush>
               </Path.Fill>
          </Path>

          
          <Path Fill="#fff1f1f1" Data="F1 M 353.170,151.101 L 207.770,5.478 C 205.979,3.689 203.812,2.275 201.512,1.343 C 199.211,0.412 196.779,-0.038 194.248,0.002 C 191.813,0.037 189.409,0.525 187.207,1.455 C 185.005,2.385 183.005,3.757 181.283,5.478 L 35.772,151.101 L 35.772,204.075 L 194.471,45.265 L 353.170,204.075 L 353.170,151.101 Z"/>

          
          <Path Fill="#ffb2b2b2" Data="F1 M 346.016,143.949 L 207.770,5.478 C 205.979,3.689 203.812,2.275 201.512,1.343 C 199.211,0.412 196.779,-0.038 194.248,0.002 C 191.813,0.037 189.409,0.525 187.207,1.455 C 185.005,2.385 183.005,3.757 181.283,5.478 L 42.925,143.949 L 42.925,196.922 L 194.471,45.265 L 346.016,196.922 L 346.016,143.949 Z"/>

          
          <Path Fill="#ffa90000" Data="F1 M 55.542,25.248 C 53.797,25.248 52.164,25.640 50.652,26.280 C 49.139,26.920 47.767,27.788 46.623,28.932 C 45.478,30.077 44.577,31.449 43.937,32.961 C 43.296,34.474 42.938,36.141 42.938,37.885 L 42.938,196.918 L 109.987,129.799 L 109.987,37.885 C 109.987,36.141 109.629,34.474 108.989,32.961 C 108.349,31.449 107.447,30.077 106.303,28.932 C 105.158,27.788 103.786,26.920 102.273,26.280 C 100.761,25.640 99.094,25.248 97.349,25.248 L 55.542,25.248 Z"/>

          
          <Path Fill="#ff4b4b4b" Data="F1 M 194.248,0.002 C 189.378,0.072 184.728,2.036 181.283,5.478 L 5.486,181.388 C -1.829,188.702 -1.829,200.561 5.486,207.875 C 12.800,215.189 24.659,215.189 31.973,207.875 L 194.471,45.265 L 356.969,207.875 C 364.284,215.189 376.143,215.189 383.456,207.875 C 390.770,200.561 390.770,188.702 383.456,181.388 L 207.770,5.478 C 204.189,1.899 199.311,-0.077 194.248,0.002 L 194.248,0.002 Z"/>

          
          <Path StrokeThickness="3.0" Stroke="#ff000000" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 267.338,389.373 L 121.604,389.373 L 121.604,209.551 C 121.604,207.806 121.970,206.146 122.610,204.634 C 123.250,203.122 124.147,201.754 125.292,200.611 C 126.436,199.466 127.803,198.569 129.315,197.928 C 130.828,197.289 132.488,196.922 134.232,196.922 L 254.709,196.922 C 256.454,196.922 258.114,197.289 259.627,197.928 C 261.139,198.569 262.506,199.466 263.651,200.611 C 264.794,201.754 265.692,203.122 266.333,204.634 C 266.973,206.146 267.338,207.806 267.338,209.551 L 267.338,389.373 Z">
               <Path.Fill>
                    <LinearGradientBrush MappingMode="Absolute" StartPoint="471.666,820.337" EndPoint="471.666,647.017">
                         <LinearGradientBrush.GradientStops>
                              <GradientStop Offset="0.00" Color="#ff698ec5"/>
                              <GradientStop Offset="1.00" Color="#ff96b8eb"/>
                         </LinearGradientBrush.GradientStops>
                         <LinearGradientBrush.Transform>
                              <MatrixTransform Matrix="1.102,0.000,0.000,1.102,-325.304,-516.092" />
                         </LinearGradientBrush.Transform>
                    </LinearGradientBrush>
               </Path.Fill>
          </Path>

          
          <Path Data="F1 M 145.251,207.938 C 143.507,207.938 141.839,208.296 140.327,208.937 C 138.814,209.577 137.442,210.479 136.298,211.623 C 135.153,212.767 134.286,214.139 133.646,215.652 C 133.006,217.165 132.613,218.832 132.613,220.577 L 132.613,288.177 L 132.613,290.209 L 132.923,290.209 C 135.822,301.217 162.261,265.758 194.463,265.758 C 226.665,265.758 253.137,301.217 256.038,290.209 L 256.313,290.209 L 256.313,288.177 L 256.313,220.577 C 256.313,218.832 255.954,217.165 255.314,215.652 C 254.674,214.139 253.772,212.767 252.627,211.623 C 251.483,210.479 250.112,209.577 248.598,208.937 C 247.086,208.296 245.418,207.938 243.674,207.938 L 145.251,207.938 Z">
               <Path.Fill>
                    <LinearGradientBrush MappingMode="Absolute" StartPoint="471.658,658.193" EndPoint="471.658,733.643">
                         <LinearGradientBrush.GradientStops>
                              <GradientStop Offset="0.00" Color="#ffffffff"/>
                              <GradientStop Offset="1.00" Color="#ffffffff"/>
                         </LinearGradientBrush.GradientStops>
                         <LinearGradientBrush.Transform>
                              <MatrixTransform Matrix="1.102,0.000,0.000,1.102,-325.304,-516.092" />
                         </LinearGradientBrush.Transform>
                    </LinearGradientBrush>
               </Path.Fill>
          </Path>

          
          <Path Fill="#ff4b4b4b" Data="F1 M 256.313,293.147 C 256.323,301.842 249.282,308.898 240.586,308.908 C 231.893,308.917 224.836,301.876 224.827,293.182 C 224.827,293.170 224.827,293.159 224.827,293.147 C 224.817,284.453 231.858,277.397 240.552,277.387 C 249.247,277.377 256.303,284.418 256.313,293.113 C 256.313,293.125 256.313,293.136 256.313,293.147 Z"/>

          
          <Path Opacity="0.5" Fill="#ffe5e5e5" Data="F1 M 240.575,281.738 C 234.274,281.738 229.141,286.836 229.141,293.136 C 229.141,297.424 231.635,301.035 235.133,302.986 C 234.937,302.632 234.604,302.363 234.445,301.987 C 233.867,300.622 233.549,299.120 233.549,297.544 C 233.549,295.969 233.867,294.467 234.445,293.102 C 235.022,291.737 235.891,290.519 236.924,289.486 C 237.958,288.454 239.174,287.619 240.540,287.042 C 241.905,286.463 243.408,286.146 244.983,286.146 C 246.557,286.146 248.059,286.463 249.424,287.042 C 249.798,287.199 250.072,287.500 250.424,287.696 C 248.475,284.187 244.870,281.738 240.575,281.738 Z"/>

     </Canvas>

</Viewbox>

Шаг 3. Создаем новый проект

Создаем новый проект WPF Application...
Внутри файла MainWindow.xaml добавим сгенерированный код:

<Window x:Class="WpfApp1.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:WpfApp1"
          mc:Ignorable="d"
          Title="MainWindow" Height="450" Width="800">
     <Grid>

     <Viewbox Width="388.942" Height="390.873"
     ...
     </Viewbox>

     </Grid>
</Window>

Запустим и увидим:

← Предыдущая тема
Пример "Создаем и рисуем линию при нажатии левой клавишей мыши на Grid"| Grid Line | C# WPF приложение

Следующая тема →
Конвертируем SVG в XAML(используя Dias SVG to UWP XAML Converter), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение

Ваши Отзывы ... комментарии ...

Объявления

Объявления

WPF простое новое приложение

• Создаем новое WPF приложение | C#

WPF layout

• Делаем layout с DockPanel и StackPanel в WPF

События

• Пример "Получаем координаты мыши при нажатии левой клавишей мыши на TextBlock"| координаты экрана и относительные координаты | C# WPF приложение

• Пример "Получаем координаты мыши при нажатии левой клавишей мыши на Button"| координаты экрана и относительные координаты | C# WPF приложение

• Пример "Получаем координаты мыши при нажатии левой клавишей мыши на Grid и рисуем линию"| C# WPF приложение

• Пример "При двойном нажатии левой клавишей мыши на Grid показываем сообщение"| C# WPF приложение

WPF элементы

Label

• Пример "Устанавливаем текст в Label" через c# код | WPF приложение

иконки FontAwesome

• Пример "Показываю иконки, для иконки подключаю библиотеку fontawesome5" | C# WPF приложение

• Пример "Делаю анимацию для иконки, библиотека fontawesome5" | C# WPF приложение

TextBlock

• Пример "Устанавливаем текст в TextBlock используя Binding". Еще добавим двойной Bindning используя INotifyPropertyChanged | C# WPF приложение

• Пример "Несколько TextBlock (показываем тексты) и делаем так чтобы при mouse move выделялся элемент где мышка (mouse over)" | C# WPF приложение

• Пример "Получаем координаты мыши при нажатии левой клавишей мыши на TextBlock"| координаты экрана и относительные координаты | C# WPF приложение

Button

• Пример "Получаем координаты мыши при нажатии левой клавишей мыши на Button"| координаты экрана и относительные координаты | C# WPF приложение

TextBox

• Пример "Устанавливаем и получаем текст в TextBox используя Binding" | C# WPF приложение

• Пример "Устанавливаем текст в TextBox" через c# код | WPF приложение

TextBox с Place Holder

• Пример "Показываем Place Holder в TextBox" | WPF приложение

• Пример "Показываем Place Holder с иконкой в TextBox", для иконки подключаю библиотеку fontawesome5 | WPF приложение

TextBox с проверкой текста (валидация)

• Пример "Устанавливаем текст в TextBox используя Binding и делаем валидацию (если текст не правильный)" | C# WPF приложение

ComboBox

• Пример "В ComboBox делаем редактирование текста. Получаем текст используя Binding" | C# WPF приложение

ItemsControl

• Пример "ItemsControl, кнопка и обработчик нажатия" | WPF приложение

Grid

• Что такое Grid в WPF

• Как добавить RowDefinition, ColumnDefinition в Grid (мышкой в XAML design editor) | C# WPF приложение

• В Grid добавляем vertical scrolling | WPF приложение

DataGrid

• Пример "DataGrid делаем bind данных", кнопка и обработчик нажатия в DataGrid, выравнивание текста в DataGrid, scrolling | WPF приложение

• Как сделать scrolling для DataGrid ? | C# WPF приложение

• Scrolling для DataGrid (чтобы скролинг работал когда мы крутим колесо мышки и мышка находится вне scroll bar) | C# WPF приложение

• Как выделить row цветом при нажатии на row мышкой (change background for selected row) в DataGrid ? | C# WPF приложение

• Как row DataGrid выделить цветом (сделать background) ? | C# WPF приложение

• Пример "DataGrid делаем сортировку колонки по своему алгоритму (Custom Sort)" | WPF приложение

DataGrid внутри DataGrid

• Пример портфолио сотрудников с описанием задач: "DataGrid внутри DataGrid используя RowDetailsTemplate" | WPF приложение

ListView

• Пример "В ListView расширяем колонку при добавлении данных (auto column width)" | WPF приложение

• Пример "В ListView используем ItemTemplate DataTemplate" | WPF приложение

ScrollViewer

• В Grid добавляем vertical scrolling | WPF приложение

• Как сделать scrolling для DataGrid ? | C# WPF приложение

• Scrolling для DataGrid (чтобы скролинг работал когда мы крутим колесо мышки и мышка находится вне scroll bar) | C# WPF приложение

• Пример "Делаем ScrollBar меньше(больше) в ScrollViewer" | C# WPF приложение

Resource файл

• Добавляем картинку (jpg, bmp, png) в проект и помечаем как Resource | C# WPF приложение

Image

• В элементе Image показываем картинку (jpg, bmp, png) из Resource | C# WPF приложение

• Выбираем картинку (jpg, bmp, png) из компьютера и показываем в элементе Image. Сохраняем картинку в базу данных | C# WPF приложение

• Пример "В Image элементе делаем Binding для Source" | C# WPF приложение

• Пример "Конвертируем текст base64 в картинку Bitmap и показываем в Image элементе" | C# WPF приложение

• Пример "Открываем SVG файл и показываем картинку в Image элементе" | C# WPF приложение

Canvas

• Пример "Создаем Canvas и рисуем картинку" C# WPF

• Пример "Рисуем картинку с движением на Canvas" C# WPF

• Пример "Рисуем картинку с движением и анимацией sprite на Canvas" C# WPF

Line

• Рисуем Line (сплошная и штриховая линии) | C# WPF приложение

• Пример "Создаем и рисуем линию при нажатии левой клавишей мыши на Grid"| Grid Line | C# WPF приложение

Конвертируем картинку в XAML Path Geometry

• Конвертируем SVG в XAML(используя Adobe Illustrator), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение

• Конвертируем SVG в XAML(используя Dias SVG to UWP XAML Converter), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение

• Конвертируем PNG в SVG в XAML | C# WPF приложение

• Converter SVG to XAML | WPF C#

• Конвертируем XAML в SVG | C# WPF приложение

ViewBox

• Пример "ViewBox делаем Binding для Left, Top, Width, Height, ContetnPresenter binding" | C# WPF приложение

Width by percentage

• Разделить экран по вертикали (по ширине) на 2 равные части экран (width1 = 50%, width2 = 50%), используем Grid | C# WPF приложение

• Разделить экран по вертикали (по ширине) на 2 части (width1 = 70%, width2 = 30%), используем Grid | C# WPF приложение

• Пример "Устанавливаем ширину элемента в процентах от ширины родительского элемента" (width in percentage), пишем свой IValueConverter | C# WPF приложение

База данных (Entity Framework)

• Entity Framework в приложении WPF. Используем Code First (пишем c# код, а таблицы в базе данных создаются сами)

Создаем свои WPF элементы

• Пример "Создаем свой WPF элемент используя Style и новый xaml файл. Новый элемент это: вверху Title, внизу текст в рамке. Используем Binding | C# WPF приложение

• Пример "Создаем свой новый WPF элемент со своими свойсвами в новом cs и xaml файлах. В WPF новом элементе: вверху Title, снизу текст и в рамке | C# WPF приложение

WPF приложение с библиотекой Prism (MVVM шаблон проектирования)

• Создаем новое WPF приложение с Prism Unity (разделение проекта на папки Services, Views, ViewModels). Патерн MVVM (Model-View-ViewModel) | C#

• WPF приложение с Prism Unity. В приложении Tab и разделения на отдельные xaml используя Region.

WPF приложение с Locator (MVVM шаблон проектирования)

• Создаем новое WPF приложение с Locator (разделение проекта на папки Views, ViewModels)

• Как добавить Dependency Injection, загрузку из appsettings.json в новом WPF приложении ?

Автоматические тесты

• Пишем автоматический тест для WPF C# приложения (используем Nuget.Appium и свойство AutomationProperties.AutomationId)

Вопросы на собеседованиях

• В чем отличие static resource от dynamic resource ? | WPF C#

Дополнительные темы, вопросы

• Открываем окно свойств (properties) для графического элемента в WPF приложении C#

Ошибки

• Ошибка "To run this application, you must install .NET. Would you like to download it now?" | Запускаю WPF приложение на C#

Книги

• Книги для изучения WPF

Ваши вопросы присылайте по почте: info@dir.by