少有人走的路

勇哥的工业自动化技术网站

wpf中画svg格式(矢量格式)图标

本节虽然说是使用SVG格式,画矢量图标,但是其实我们只是使用了svg转为Geometry的数据画矢量图标。


image.png


svg是一种通用的矢量图格式

而wpf是不能直接支持svg的。

wpf有自己的矢量图,就是Geometry。

这个例子中出现的Geometry数据,其实是svg转过来的数据。


在图标资源 IconResources.xaml 中,勇哥定义了两种资源:

一是Geometry

二是DrawingImage

前者需要Path来绘制。

后者是一种组合绘制方式,它支持图层的概念。它可以直接赋值给按钮、图片等控件的Source属性。


app.xaml 中则指定了程序用到的资源。


解决方案:

image.png


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>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Path Data="{StaticResource   Icon_Save}" 
                  Width="64" Height="64" 
                  Fill="#27AE60" 
                  Stretch="Uniform"/>
            <Image Source="{StaticResource Image_3D_PointLineDistance}" 
                   Width="64" Height="64" 
                   Stretch="Uniform"/>
        </StackPanel>
    </Grid>
</Window>


IconResources.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:o="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">


    <Geometry x:Key="Icon_Save" o:Freeze="True">M896 296.533333v528.356267q0 28.8-21.1552 49.9552T824.8896 896H199.1104q-28.8 0-49.9552-21.1552T128 824.8896V199.1104q0-28.8 21.1552-49.9552T199.1104 128H727.466667l168.533333 168.533333z m-71.1104 31.288534L696.178133 199.1104H199.1104v625.7792h625.7792V327.821867zM511.832533 764.4448q48.522667 0 82.656-33.966933 34.133333-33.965867 34.133334-82.488534 0-48.522667-33.965867-82.656-33.965867-34.132267-82.488533-34.132266-48.522667 0-82.656 33.965866-34.133333 33.965867-34.133334 82.488534 0 48.522667 33.965867 82.656 33.965867 34.133333 82.488533 34.133333zM251.021867 409.6H633.6V251.021867H251.021867V409.6z m-51.911467-81.778133v497.067733-625.7792 128.711467z</Geometry>



    <DrawingImage x:Key="Image_3D_PointLineDistance" o:Freeze="True">
        <DrawingImage.Drawing>
            <DrawingGroup>
                <GeometryDrawing Brush="#E74C3C" Geometry="M 48.666016 7.5351562 C 44.707373 7.5351563 41.393693 8.5902478 38.724609 10.703125 C 36.085517 12.787836 33.897605 15.761571 32.158203 19.621094 L 33.642578 20.296875 C 36.761507 15.620373 40.644567 13.28125 45.292969 13.28125 C 48.171986 13.28125 50.570896 14.183343 52.490234 15.986328 C 54.439566 17.761146 55.414063 20.09831 55.414062 23 C 55.414062 25.225564 54.874554 27.269575 53.794922 29.128906 C 52.715296 30.988238 50.975349 32.580225 48.576172 33.904297 C 46.206988 35.228369 43.837941 36.03078 41.46875 36.3125 L 41.46875 37.580078 L 42.908203 37.580078 C 45.247401 37.580078 47.541791 38.044944 49.791016 38.974609 C 52.040247 39.876108 53.810051 40.890713 55.099609 42.017578 C 56.029288 42.834557 56.88433 44.031757 57.664062 45.609375 C 58.713701 47.722253 59.238281 49.891623 59.238281 52.117188 C 59.238281 55.159738 58.097577 57.793967 55.818359 60.019531 C 53.569128 62.245096 50.916365 63.357422 47.857422 63.357422 C 46.59785 63.357422 45.412353 63.202471 44.302734 62.892578 C 43.612975 62.723552 42.369697 62.201451 40.570312 61.328125 C 38.770928 60.426633 37.61529 59.906485 37.105469 59.765625 C 36.325736 59.540252 35.560289 59.427734 34.810547 59.427734 C 33.820887 59.427734 32.967799 59.737642 32.248047 60.357422 C 31.558284 60.977195 31.212891 61.694733 31.212891 62.511719 C 31.212891 63.610411 31.94652 64.637864 33.416016 65.595703 C 34.915501 66.553542 37.719535 67.033203 41.828125 67.033203 C 50.135277 67.033203 56.478926 64.666442 60.857422 59.933594 C 64.216265 56.299444 65.896484 52.003144 65.896484 47.044922 C 65.896484 43.579799 64.936916 40.565577 63.017578 38.001953 C 61.098233 35.438329 58.264335 33.466356 54.515625 32.085938 C 60.093706 27.634809 62.880859 23.325659 62.880859 19.15625 C 62.880859 16.620793 61.891427 14.239236 59.912109 12.013672 C 57.303005 9.0274689 53.554337 7.5351563 48.666016 7.5351562 z M 75.117188 8.71875 L 75.117188 10.28125 L 77.412109 10.28125 C 79.721314 10.28125 81.461261 10.901066 82.630859 12.140625 C 83.470572 13.042117 83.888672 15.281565 83.888672 18.859375 L 83.888672 55.876953 C 83.888672 59.116703 83.560163 61.201194 82.900391 62.130859 C 81.820758 63.680304 79.99122 64.455078 77.412109 64.455078 L 75.117188 64.455078 L 75.117188 66.019531 L 102.37891 66.019531 C 114.22485 66.019531 123.04208 63.032954 128.83008 57.060547 C 133.98831 51.707926 136.56641 45.044864 136.56641 37.072266 C 136.56641 31.128038 135.11213 25.889164 132.20312 21.353516 C 129.32412 16.817867 125.5008 13.576657 120.73242 11.632812 C 115.99405 9.6889644 109.06608 8.71875 99.949219 8.71875 L 75.117188 8.71875 z M 101.74805 11.929688 C 108.94558 11.929688 114.83931 14.211569 119.42773 18.775391 C 124.01616 23.339206 126.31055 29.579842 126.31055 37.496094 C 126.31055 45.355999 124.01616 51.581839 119.42773 56.173828 C 114.83931 60.765817 109.06699 63.060547 102.10938 63.060547 C 99.53026 63.060547 96.336047 62.667712 92.527344 61.878906 L 92.527344 13.154297 C 95.97616 12.337318 99.048966 11.929688 101.74805 11.929688 z M 125.04297 103.98242 L 115.14453 107.94141 L 123.69727 128.98828 L 133.5957 125.03125 L 125.04297 103.98242 z M 137.87305 135.55664 L 127.97461 139.51562 L 136.52734 160.5625 L 146.42773 156.60547 L 137.87305 135.55664 z M 150.70312 167.13086 L 140.80469 171.08789 L 149.35938 192.13672 L 159.25586 188.17969 L 150.70312 167.13086 z M 163.53516 198.70312 L 153.63672 202.66211 L 162.18945 223.70898 L 172.08789 219.75195 L 163.53516 198.70312 z M 283.6582 199.0957 L 279.01562 200.95508 L 180.48828 240.42383 L 176.36523 230.27734 L 166.4668 234.23438 L 170.59375 244.38672 L 77.671875 281.60938 L 73.03125 283.4707 L 76.75 292.75391 L 81.392578 290.89258 L 282.73438 210.23828 L 287.37695 208.37891 L 283.6582 199.0957 z " />
                <GeometryDrawing Brush="{DynamicResource BrushIconMiddle}" Geometry="" />
                <GeometryDrawing Brush="Blue" Geometry="m 114.01261,71.236353 c -7.37313,0.01618 -14.544532,4.222151 -17.814452,11.18164 -4.35987,9.279316 -0.19018,20.063117 9.271482,23.978507 9.46167,3.91537 20.75731,-0.46873 25.11719,-9.748038 4.35988,-9.279332 0.19015,-20.063143 -9.27148,-23.978515 -2.36542,-0.97884 -4.84503,-1.438986 -7.30274,-1.433594 z M 290.86027,184.05666 c -7.37313,0.0162 -14.54454,4.22216 -17.81446,11.18164 -4.35989,9.27932 -0.19016,20.06314 9.27149,23.97851 9.46168,3.91537 20.75732,-0.46872 25.11719,-9.74804 4.35989,-9.27935 0.19015,-20.06316 -9.27149,-23.97852 -2.36541,-0.97884 -4.84502,-1.43899 -7.30273,-1.43359 z M 65.149325,274.35744 c -7.373127,0.0162 -14.544537,4.22214 -17.814453,11.18164 -4.359876,9.27931 -0.190162,20.06315 9.271484,23.97851 9.461668,3.91538 20.759252,-0.46873 25.119142,-9.74804 4.35988,-9.27934 0.19016,-20.06312 -9.271485,-23.97852 -2.36541,-0.97884 -4.846979,-1.43899 -7.304688,-1.43359 z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>

</ResourceDictionary>


app.xaml

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <ResourceDictionary Source="IconResources.xaml"/>
    </Application.Resources>
</Application>




发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«    2026年2月    »
1
2345678
9101112131415
16171819202122
232425262728
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接

Powered By Z-BlogPHP 1.7.3

Copyright www.skcircle.com Rights Reserved.

鄂ICP备18008319号


站长QQ:496103864 微信:abc496103864