WPF使用矢量图标和SVG图标

阿里巴巴矢量图库https://www.iconfont.cn/ 选择要使用的图标加入购物车,添加至项目。

资源管理➡我的项目,Unciode-下载至本地

在IDE中复制

xxxx.ttf文件复制到项目Fonts文件夹中,xxx.html中查看图标编号

(检查文件属性是否为资源)

“./”:代表目前所在的目录。 " . ./"代表上一层目录。 “/”:代表根目录

注意代码与资源的位置

FontFamily="./Fonts/xxxx.ttf#xxxx"

 <TextBlock Text="&#xe645;" FontFamily="./Fonts/iconfont.ttf#iconfont">

 button中的使用的情况

<Button FontFamily="pack://application,,,/Helper/Fonts/#iconfont" FontSize="24" Style="{Binding Source={StaticResource RoundCornerButtonStyle1}}" Height="25" Width="50" HorizontalAlignment="Right" Margin="8 0 0 0">
    &#xe679;
</Button>

同上所述下载图标的SVG格式,然后使用工具转成XAML(工具地址:https://github.com/BerndK/SvgToXaml.git)得到XAML后,我们可以把它放进资源字典

    <DrawingImage x:Key="SvgOpen">
        <DrawingImage.Drawing>
            <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                <GeometryDrawing Brush="#FFE6A23C" Geometry="F1 M1024,1024z M0,0z M369.056,172.8L462.944,243.2A64,64,0,0,0,501.344,256L738.272,256A84.608,84.608,0,0,1,822.56,340.928L822.56,811.072A84.608,84.608,0,0,1,738.24,896L148.288,896A84.608,84.608,0,0,1,64,811.072L64,244.928A84.608,84.608,0,0,1,148.288,160L330.688,160A64,64,0,0,1,369.088,172.8z" />
                <GeometryDrawing Brush="#FFFCF5EB" Geometry="F1 M1024,1024z M0,0z M128,320 M192,320L704,320Q768,320,768,384L768,768Q768,832,704,832L192,832Q128,832,128,768L128,384Q128,320,192,320z" />
                <GeometryDrawing Brush="#FFE6A23C" Geometry="F1 M1024,1024z M0,0z M889.76,443.072C928.544,443.072 960,474.752 960,513.856 960,522.336 958.496,530.752 955.52,538.688L839.648,850.08A70.272,70.272,0,0,1,773.888,896L165.344,896A70.496,70.496,0,0,1,95.104,825.216C95.104,816.736,96.64,808.32,99.584,800.384L215.488,489.024A70.272,70.272,0,0,1,281.248,443.072L889.76,443.072z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>

前台绑定

                    <Button Height="20" Width="100">
                        <Button.ToolTip>
                            <TextBlock Text="Open" FontSize="14" FontWeight="Bold"/> <!-- 鼠标悬停提示 -->
                        </Button.ToolTip>
                        <Image Source="{StaticResource SvgOpen}"/>
                    </Button>

 

posted @ 2023-11-08 19:54  WilsonH  阅读(129)  评论(0编辑  收藏  举报