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

Search

Programming, development, testing

→

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

→

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

Looked at 1931 times

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

last updated: 23 June 2024

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

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

Открываем Adobe Illustrator CS5 ...
If you don't have Adobe Illustrator CS5 installed, you need to Download and install the trial version 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>

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

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

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

Your feedback ... Comments ...

Объявления

Объявления

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 приложение

• Example "I make animations for icons, library fontawesome5" | C# WPF application

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 приложение

• Example "Do ScrollBar less(more) in ScrollViewer" | C# WPF application

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 элементы

• Example "Create your own WPF element using Style and a new xaml file. The new element is: at the top Title, at the bottom the text in the frame. Using Binding | C# WPF application

• Пример "Создаем свой новый 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#

Ошибки

• Error "To run this application, you must install .NET. Would you like to download it now?" | I run WPF the application on C#

Книги

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

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