在WPF縮放複雜的SVG路徑XAML

我這裏有一組其使用Illustrator中創建不相稱複雜的可伸縮矢量圖形圖標，並使用Expression Blend中導入到我的WPF應用程序和Inkscape的破解：在WPF縮放複雜的SVG路徑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＃的邏輯去做分辨率數學和縮放，但寧願用與視圖框縮放。

我不確定爲什麼SVG在維度數據被移除時變成奇聞趣事，但肯定是這個問題。我覺得如果我可以擺脫這種規模的高度和寬度屬性。

歡迎任何建議！謝謝。

來源

2016-04-07 nocarrier

我剛測試過這個，它對你如何擁有它很好。默認的Stretch枚舉是'Uniform'，當我改變Height值時，它就像預期的那樣工作。哦，我刪除了SVG標記，因爲WPF使用了[Path Markup Syntax]（https://msdn.microsoft.com/en-us/library/ms752293%28v=vs.100%29.aspx），它非常接近SVG ，但不完全。 –

哦，PS，我會建議（因爲你使用的是初學者的Illustrator）反而使用Mike Swanson的[AI to XAML]（http://www.mikeswanson.com/xamlexport/）插件而不是其他方法你已經列出。注意：導出到WPF爲它，導出到Silverlight的XAML任何其他像UWP，WP等 –

是的，如果我手動更改代碼中的高度屬性它會縮放，但在視圖框中它不會自動縮放像其他WPF元素的確如此。爲了做到這一點，我需要從畫布容器中移除HEIGHT和WIDTH（

ViewBox不關心它的孩子的預設尺寸屬性。這些僅用作基礎，但ViewBox是相應縮放的。所以，如果我說從相關的樣式模板中移除Height/MaxHeight設置器並執行以下操作，請注意每個ViewBox具有不同的高度。你也可以創建一個整體風格，避免重複代碼，但是爲了一個快速骯髒的概念例子;

<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>

現在說你有視框放置在說一個網格單元與*上漿列/行，你不要對視框一個高度/寬度值。然後它將填充任何允許的空間。由於觀看媒介（大屏幕，中畫面，小畫面，無所謂）發生了變化，因此它將根據其父母的測量結果作爲邊界進行相應的調整。

來源

2016-04-07 18:49:53

你知道，你是完全正確的。儘管它的高度和寬度會縮放，但我擁有它的網格（或其他父元素）阻止了縮放。我太習慣網絡......嘿。謝謝克里斯。 – nocarrier

@nocarrier不用擔心男人，我在做了一段時間的桌面工作並開始消除生鏽之後，在反向轉換回網絡內容時出現了同樣的細微差別問題。如果你遇到困難只是hollar。 –

在WPF縮放複雜的SVG路徑XAML

回答

相關問題