wpf - 在 WPF XAML 中缩放复杂的 SVG 路径

标签 wpf xaml

我在这里有一组非常复杂的可缩放矢量图形图标，它们是使用 Illustrator 创建的，并使用 Expression Blend 和 Inkscape hack 导入到我的 WPF 应用程序中:

Convert SVG to XAML

我尝试了各种导入原始图标的方法，以上方法是它们在我的应用程序中正确导入的唯一方法。

所以现在我需要让我的应用程序在一个新的更小的分辨率下工作，即使在 ViewBox 中，这些图标也不会缩放。

如果我删除宽度/高度属性，它会破坏 SVG 并且图标基本上消失了。

  <Style x:Key="BenefitsIconFlexBox" TargetType="{x:Type Viewbox}">
    <Setter Property="MaxHeight" Value="240"/>
    <Setter Property="Height" Value="201"/>
    <Setter Property="Margin" Value="10,0,0,10"/>
</Style>

...
        <Viewbox Style="{StaticResource BenefitsIconFlexBox}">
            <Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
                <Path Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
                <Canvas Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
                </Canvas>
                <Path Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
                <Path Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
            </Canvas>
        </Viewbox>

我愿意使用转换或一些 c# 逻辑来进行分辨率数学和缩放，但更喜欢使用 View 框缩放。

我不确定为什么在删除维度数据时 SVG 会变得乱七八糟，但这肯定是问题所在。我觉得如果我可以摆脱高度和宽度属性，这将扩展。

欢迎任何建议!谢谢你。

最佳答案

ViewBox 不关心它的 child 的预设大小属性。这些仅用作基础，但 ViewBox 是相应缩放的。因此，如果我说从关联的样式模板中删除 Height/MaxHeight setter 并执行以下操作，请注意每个 ViewBox 具有不同的高度。你也可以为整个事情做一个风格，避免重复的代码，但为了一个快速肮脏的概念示例；

enter image description here

<StackPanel>

    <Viewbox Height="20" Margin="5">
        <Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
            <Canvas Canvas.Left="0" Canvas.Top="0">
                <Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
                <Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
                </Canvas>
                <Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
                <Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
            </Canvas>
        </Canvas>
    </Viewbox>

    <Viewbox Height="50" Margin="5">
        <Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
            <Canvas Canvas.Left="0" Canvas.Top="0">
                <Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
                <Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
                </Canvas>
                <Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
                <Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
            </Canvas>
        </Canvas>
    </Viewbox>

    <Viewbox Height="100" Margin="5">
        <Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
            <Canvas Canvas.Left="0" Canvas.Top="0">
                <Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
                <Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
                    <Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
                </Canvas>
                <Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
                <Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
            </Canvas>
        </Canvas>
    </Viewbox>

</StackPanel>

现在假设您将 ViewBox 放置在一个带有 * 的网格单元格中。调整列/行的大小，并且不要在 ViewBox 上设置高度/宽度值。然后它将填充任何允许的空间。随着查看媒体(大屏幕、中屏幕、小屏幕，无关紧要)的变化，它将使用其父级的测量值作为边界来相应地调整自身大小。

关于wpf - 在 WPF XAML 中缩放复杂的 SVG 路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36483179/

上一篇：apache-zeppelin - 在单个图表中显示多个数据点

下一篇：uml - UML 1 和 UML 2 之间的区别？我应该关注哪一个？

相关文章：

wpf - 指针 WPF 控件

c# - 在 WPF 中将鼠标光标悬停在禁用按钮上时将鼠标光标更改为 "stop"指针

c# - 如何在 WPF 控件内的类库中使用 .resx 文件？

c# - 代码隐藏中的 WPF C# 按钮单击事件

WPF:如何使控件在 StackPanel 中拉伸(stretch)？

wpf - 使用 WPF 延迟输入验证

c# - 不能在 'Binding' 类型的 'Source' 属性上设置 'Binding'

c# - 仅在 C# 中更改 Xamarin Forms 标签的颜色，无 XAML

WPF - 图像控件实际大小

wpf - 在 WPF 扩展器中更改标题的背景颜色

©2024 IT工具网  联系我们