You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在WPF应用中使用多路径SVG图像作为按钮图标?解决TEX图标显示异常问题

解决WPF按钮中使用多路径SVG作为图标的问题

我来帮你搞定这个问题!你遇到的核心问题是WPF的Path控件默认没有填充/描边,而且没有处理SVG中的坐标变换,导致路径要么看不见,要么不在可视区域内。下面给出几种可行的解决方案:

方法1:修正现有代码,添加变换和填充

直接调整你的按钮代码,补上SVG中的平移变换,给每个Path设置填充色,同时用Canvas来承载路径(更适合处理坐标变换):

<Button Width="36" Height="36" ToolTip="Test for svg image">
    <Viewbox Stretch="Uniform">
        <!-- Canvas尺寸和SVG的viewBox一致 -->
        <Canvas Width="22.189789" Height="7.6945963">
            <!-- 应用SVG中<g>标签的平移变换 -->
            <Canvas.RenderTransform>
                <TranslateTransform X="-58.420205" Y="-39.930404"/>
            </Canvas.RenderTransform>
            <!-- 给每个Path添加Fill,这里用黑色,你可以换成需要的颜色 -->
            <Path Data="M 65.210466,41.41868 H 62.80752 V 47.625 h -1.984369 v -6.20632 h -2.402946 v -1.488276 h 6.790261 z" Fill="Black"/>
            <Path Data="m 71.969722,47.625 h -5.565534 v -7.694596 h 5.565534 v 1.488276 h -3.591501 v 1.32808 h 3.33312 v 1.488277 h -3.33312 v 1.901686 h 3.591501 z" Fill="Black"/>
            <Path Data="M 80.609994,47.625 H 78.315568 L 76.65676,45.092863 74.966946,47.625 h -2.191074 l 2.728507,-3.87572 -2.671663,-3.818876 h 2.289258 l 1.601965,2.397779 1.648473,-2.397779 h 2.196241 l -2.687166,3.741362 z" Fill="Black"/>
        </Canvas>
    </Viewbox>
</Button>

方法2:将SVG转换为WPF Drawing资源(推荐复用)

把路径转换为WPF本地坐标系(去掉SVG的平移变换),封装成DrawingImage资源,方便在多个地方复用:

首先在Window/UserControl的资源中定义:

<Window.Resources>
    <DrawingImage x:Key="TEXIcon">
        <DrawingImage.Drawing>
            <GeometryDrawing Brush="Black">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <!-- 坐标已减去SVG的translate值:x-58.420205,y-39.930404 -->
                        <PathGeometry Figures="M 6.790261,1.488276 H 4.387315 V 7.694596 h -1.984369 v -6.20632 h -2.402946 v -1.488276 h 6.790261 z"/>
                        <PathGeometry Figures="m 13.549517,7.694596 h -5.565534 v -7.694596 h 5.565534 v 1.488276 h -3.591501 v 1.32808 h 3.33312 v 1.488277 h -3.33312 v 1.901686 h 3.591501 z"/>
                        <PathGeometry Figures="M 22.189789,7.694596 H 19.895363 L 18.236555,5.162459 16.546741,7.694596 h -2.191074 l 2.728507,-3.87572 -2.671663,-3.818876 h 2.289258 l 1.601965,2.397779 1.648473,-2.397779 h 2.196241 l -2.687166,3.741362 z"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingImage.Drawing>
    </DrawingImage>
</Window.Resources>

然后在按钮中使用:

<Button Width="36" Height="36" ToolTip="Test for svg image">
    <Image Source="{StaticResource TEXIcon}" Stretch="Uniform"/>
</Button>

方法3:使用第三方控件直接加载SVG(最简单)

如果你的项目是.NET Core 3.0+或.NET 5+,可以使用Windows Community Toolkit中的SvgImage控件,直接加载整个SVG文件,无需手动处理路径:

  1. 安装NuGet包:
Install-Package Microsoft.Toolkit.Wpf.UI.Controls
  1. 在XAML中引用命名空间:
xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
  1. 按钮中使用:
<Button Width="36" Height="36" ToolTip="Test for svg image">
    <controls:SvgImage Source="pack://application:,,,/YourProjectName;component/drawing-1_plain_Path.svg" Stretch="Uniform"/>
</Button>

(注意替换YourProjectName为你的项目名称,确保SVG文件的生成操作设置为"资源")

为什么你的原始代码无法显示?

  • 缺少填充/描边:WPF的Path默认没有FillStroke,所以即使路径存在,也看不到内容。
  • 未处理坐标变换:SVG中的<g>标签有transform="translate(-58.420205,-39.930404)",这个偏移让路径的实际位置超出了按钮的可视范围。
  • 容器不合适:用Grid承载多个大坐标的路径,会导致路径被挤压到不可见的区域,换成Canvas或调整坐标才能解决。

内容的提问来源于stack exchange,提问作者nam

火山引擎 最新活动