Convert SVG to XAML (using Adobe Illustrator), populate the Path Data Geometry, show the lines on the screen | C# WPF application

Праздники ...

Праздники ...

День Октябрьской революции (7 Ноября)

Концерты, выставки ...

Концерты, выставки ...

Спектакль "Хамсин"|||г. Минск 14 сентября, 23 сентября, 17 октября, 11 ноября 2026

Спорт занятия ...

Спорт занятия ...

Настольный теннис

Спорт занятие

Компьютер, программы...

Компьютер, программы...

Объявления ...

Объявления ...

Искусственные елки оптом и в розницу от первого поставщика

Объявление

Новости ...

Новости ...

обсуждение...

Поиск

Концерты Спорт Форум Компьютер

Компьютер, программы

→

WPF. Windows Presentation Foundation (standalone .exe file)

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

посмотрели 4596 раз

обновлено: 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
Example "Create and draw a line by left-clicking on Grid"| Grid Line | C# WPF application

Next topic →
Convert SVG to XAML (using Dias SVG to UWP XAML Converter), populate the Path Data Geometry, show the lines on the screen | C# WPF application

Your feedback ... Comments ...

Объявления

Объявления

WPF Simple New Application

• Creating a New WPF Application | C#

WPF layout

• Making a layout with DockPanel and StackPanel in WPF

Events

• Example "Get the mouse coordinates when you left-click on TextBlock"| Screen Coordinates and Relative Coordinates | C# WPF application

• Example "Get the mouse coordinates when you click the left mouse button on Button"| Screen Coordinates and Relative Coordinates | C# WPF application

• Example "Get the mouse coordinates when you left-click on Grid and draw a line"| C# WPF application

• Example "When you double-click on Grid, we show the message"| C# WPF application

WPF elements

Label

• Example "Setting the text in Label" via c# code | WPF application

FontAwesome icons

• Example "I show icons, for the icon I connect the fontawesome5" library | C# WPF application

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

<BR>

TextBlock

• Example "Set the text in the TextBlock using Binding". Let"s also add double Bindning using INotifyPropertyChanged | C# WPF application

• Example "Several TextBlocks (showing the texts) and making the element where mouse (mouse over)" | C# WPF application

• Example "Get the mouse coordinates when you left-click on TextBlock"| Screen Coordinates and Relative Coordinates | C# WPF application

Button

• Example "Get the mouse coordinates when you click the left mouse button on Button"| Screen Coordinates and Relative Coordinates | C# WPF application

TextBox

• Example "Installing and getting text in a TextBox using Binding" | C# WPF application

• Example "Set text in TextBox" via c# code | WPF application

<BR>

TextBox with Place Holder

• Example "Showing the Place Holder in TextBox" | WPF application

• Example "Showing a Place Holder with an icon in TextBox", for the icon I include the fontawesome5 library | WPF application

<BR>

TextBox with text validation

• Example "Set the text in the TextBox using Binding and do validation (if the text is not correct)" | C# WPF application

<BR>

ComboBox

• Example "In ComboBox, we do text editing. Getting the text using Binding" | C# WPF application

<BR>

ItemsControl

• Example "ItemsControl, button and click handler" | WPF application

Grid

• What is Grid in WPF

• How to Add RowDefinition, ColumnDefinition to a Grid (with the mouse in the XAML design editor) | C# WPF application

• Adding vertical scrolling | WPF application

DataGrid

• Example "DataGrid doing bind data", button and click handler in DataGrid, text alignment in DataGrid, scrolling | WPF application

• How do I scroll for DataGrid? | C# WPF application

• Scrolling for DataGrid (so that scrolling works when we spin the mouse wheel and the mouse is outside the scroll bar) | C# WPF application

• How do I color row when I click on row (change background for selected row) in DataGrid? | C# WPF application

• How do I highlight a row DataGrid (make background) ? | C# WPF application

• Example "DataGrid: sorting the column according to our own algorithm (Custom Sort)" | WPF application

DataGrid inside DataGrid

• Example of an employee portfolio with task descriptions: "DataGrid inside DataGrid using RowDetailsTemplate" | WPF application

<BR>

ListView

• Example "In the ListView, expand the column when adding data (auto column width)" | WPF application

• Example "In the ListView, we use ItemTemplate DataTemplate" | WPF application

<BR>

ScrollViewer

• Adding vertical scrolling | WPF application

• How do I scroll for DataGrid? | C# WPF application

• Scrolling for DataGrid (so that scrolling works when we spin the mouse wheel and the mouse is outside the scroll bar) | C# WPF application

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

Resource file

• Add an image (jpg, bmp, png) to the project and mark it as Resource | C# WPF application

Image

• In the Image element, show the image (jpg, bmp, png) from Resource | C# WPF application

• Select the image (jpg, bmp, png) from the computer and show it in the Image element. Saving the image to the database | C# WPF application

• Example "In the Image element, make a Binding for Source" | C# WPF application

• Example "Convert the base64 text to a Bitmap image and show it in the Image element" | C# WPF application

• Example "Open an SVG file and show the image in the Image element" | C# WPF application

<BR>

Canvas

• Example "Create a Canvas and draw a picture" C# WPF

• Example "Drawing a picture with movement on Canvas" C# WPF

• Example "Drawing a picture with motion and sprite animation on Canvas" C# WPF

<BR>

Line

• How to Draw a Line | C# WPF application

• Example "Create and draw a line by left-clicking on Grid"| Grid Line | C# WPF application

Convert the image to XAML Path Geometry

• Convert SVG to XAML (using Adobe Illustrator), populate the Path Data Geometry, show the lines on the screen | C# WPF application

• Convert SVG to XAML (using Dias SVG to UWP XAML Converter), populate the Path Data Geometry, show the lines on the screen | C# WPF application

• How to Convert PNG to SVG to XAML | C# WPF application

• Converter SVG to XAML | WPF C#

• How to Convert XAML to SVG | C# WPF application

ViewBox

• Example "ViewBox Binding for Left, Top, Width, Height, ContetnPresenter binding" | C# WPF application

Width by percentage

• Divide the screen vertically (by width) into 2 equal parts of the screen (width1 = 50%, width2 = 50%), use Grid | C# WPF application

• Split the screen vertically (by width) into 2 parts (width1 = 70%, width2 = 30%), using Grid | C# WPF application

• Example "Set the width of the element as a percentage of the width of the parent element" (width in percentage), write your IValueConverter | C# WPF application

Database (Entity Framework)

• Entity Framework in a WPF application. Using Code First (we write c# code, and the tables in the database are created by ourselves)

Creating Your WPF Elements

• 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

• Example "Create your new WPF element with your own properties in the new cs and xaml files. In WPF, a new element: Title at the top, text at the bottom, and in the box | C# WPF application

WPF application with Prism library (MVVM design pattern)

• Create a new WPF application with Prism Unity (splitting the project into Services, Views, ViewModels folders). MVVM (Model-View-ViewModel) Patern | C#

• WPF application with Prism Unity. In the Tab app and splitting into separate xamls using Region.

WPF application with Locator (MVVM design pattern)

• Creating a new WPF application with Locator (dividing the project into Views, ViewModels folders)

• How do I add Dependency Injection, boot from appsettings.json in a new WPF application?

Automated Tests

• Writing an automated test for a WPF C# application (using Nuget.Appium and the AutomationProperties.AutomationId property)

Interview Questions

• What is the difference between static resource and dynamic resource? | WPF C#

Additional topics, questions

• Open the properties window for a graphic element in WPF application C#

Errors

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

Books

• WPF Study Books

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