Telerik UI for WPF擁有超過100個控件來創(chuàng)建美觀、高性能的桌面應(yīng)用程序，同時還能快速構(gòu)建企業(yè)級辦公WPF應(yīng)用程序。UI for WPF支持MVVM、觸摸等，創(chuàng)建的應(yīng)用程序可靠且結(jié)構(gòu)良好，非常容易維護，其直觀的API將無縫地集成Visual Studio工具箱中。

Telerik UI for WPF中的RadSvgImage組件使開發(fā)人員能夠?qū)⒒谑噶康膱D形無縫集成到他們的應(yīng)用程序中。在之前的版本中，Telerik UI for WPF引入了開創(chuàng)性的RadSvgImage控件，這個創(chuàng)新的附加功能使開發(fā)人員能夠?qū)⒒谑噶繄D形集成到他們的應(yīng)用程序中，將用戶體驗提升到一個全新的水平。

Telerik UI for WPF 最新版下載

由于能夠在不犧牲質(zhì)量的情況下縮放圖像，RadSvgImage控件徹底改變了WPF中的UI開發(fā)。對于制作高DPI應(yīng)用程序，優(yōu)先考慮用戶滿意度，這是非常寶貴的。這一進步的基石在于可縮放矢量圖形(SVG)，這是一種基于xml的格式，允許圖形無縫地適應(yīng)所有DPI設(shè)置。

開始使用RadSvgImage

將RadSvgImage添加到項目中是很簡單的，只需要包含對Telerik.Windows.Controls程序集的引用即可！將SVG圖像顯示為獨立組件是一件輕而易舉的事，你可以這樣設(shè)置UriSource屬性：

<telerik:RadSvgImage UriSource="SVGIcon.svg" Width="128" Height="128"/>

RadSvgImage沒有默認大小，如果它被放置在一個用無窮大測量它的面板中(例如，在StackPanel中)，您需要為SVG圖像指定一個正確顯示的大小。

您也可以使用RadSvgImage作為一個標記擴展，替代將其設(shè)置為一個單獨的組件：

<Image Source="{telerik:RadSvgImageSource Source='SVGImage.svg'}"
Width="128"
Height="128"/>

自定義填充顏色

您可以通過調(diào)整OverrideColor屬性來完全替換SVG圖像的填充顏色：

動畫制作更簡單

RadSvgImage控件具有內(nèi)置的動畫支持，允許您將SVG圖像帶入生活。要應(yīng)用動畫，請利用SVG的XML中的animate、animateMotion和animateTransform元素。

<g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="12s" />
<use xlink:href="#minuteHand" />
</g>

將畫筆應(yīng)用于元素

如果您曾經(jīng)想要用色彩填充SVG圖像，所需做的就是深入到CustomBrushes屬性。它允許您輕松地將不同的色調(diào)應(yīng)用于svg中的元素，這就像給您的圖形一個個人的觸摸！提醒一下，CustomBrushes屬性是一個Dictionary<string, Brush>，這基本上意味著它是一個處理顏色變化的漂亮工具。

讓我們深入研究一個例子，假設(shè)您已經(jīng)準備好了SVG文件，可以把它想象成畫布，這里有一個片段：

<svg width="200" height="200" viewBox="130 130 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
enable-background="new 0 0 512 512" xml:space="preserve">
<defs>
<solidColor id="calendar-lines"/>
<solidColor id="calendar-datebgr"/>
<solidColor id="calendar-date"/>
</defs>
<path d="M14.5,39.8 L112.2,39.8 M14.5,55.8 L112.2,55.8 M14.5,71.8 L112.2,71.8 M14.5,87.8 L112.2,87.8 M14.5,103.8 L112.2,103.8 M22.8,31.9 L22.8,109.1 M39.0,31.9 L39.0,109.1 M55.2,31.9 L55.2,109.1 M71.5,31.9 L71.5,109.1 M87.7,31.9 L87.7,109.1 M103.9,31.9 L103.9,109.1 M116.6,1 L11.1,1 C5.8,1 1.5,5.2 1.5,10.5 L1.5,114.5 C1.5,119.7 5.8,124 11.1,124 L116.6,124 C121.9,124 126.3,119.7 126.3,114.5 L126.3,10.5 C126.3,5.2 121.9,1 116.6,1 z M1.0,21 L125.7,21"
fill="transparent"
transform="translate(170,166)"
stroke="url(#calendar-lines)" stroke-width="2" width="130" height="125" />
<rect x="224.977" y="222" width="32.4675" height="32" fill="url(#calendar-datebgr)"/>
<path d="M246.145 230.268C245.383 231.664 244.664 233.048 243.987 234.419C243.31 235.782 242.696 237.153 242.146 238.532C241.596 239.912 241.118 241.304 240.711 242.709C240.305 244.105 239.992 245.536 239.772 247H236.687C236.89 245.697 237.178 244.397 237.55 243.103C237.931 241.799 238.375 240.5 238.883 239.205C239.391 237.902 239.958 236.594 240.584 235.282C241.219 233.97 241.892 232.646 242.603 231.309H233.983V228.795H246.145V230.268Z"
fill="url(#calendar-date)" stroke="transparent" stroke-width="0"/>
</svg>

現(xiàn)在，您需要創(chuàng)建一個自定義Dictionary集合來定義顏色。

public class CustomDictionary : Dictionary<string, Brush> { }

現(xiàn)在是時候用一些充滿活力的選擇加載您的自定義字典了，看看這個：

<Grid.Resources>
<local:CustomDictionary x:Key="CustomBrushesDictionary">
<SolidColorBrush x:Key="calendar-lines" Color="#08BAB7"/>
<SolidColorBrush x:Key="calendar-datebgr" Color="#b708ba"/>
<SolidColorBrush x:Key="calendar-date" Color="Black"/>
</local:CustomDictionary>
</Grid.Resources>

最后讓我們把它們結(jié)合起來，使用CustomBrushes屬性將RadSvgImage附加到自定義字典上。

<Grid>
<Grid.Resources>
<local:CustomDictionary x:Key="CustomBrushesDictionary">
<SolidColorBrush x:Key="calendar-lines" Color="#08BAB7"/>
<SolidColorBrush x:Key="calendar-datebgr" Color="#B708BA"/>
<SolidColorBrush x:Key="calendar-date" Color="#FBFF00"/>
</local:CustomDictionary>
</Grid.Resources>
<telerik:RadSvgImage UriSource="/Images/SvgImage.svg" CustomBrushes="{StaticResource CustomBrushesDictionary}" Width="128" Height="128"/>
</Grid>

RadSvgImage現(xiàn)在搖擺自定義顏色。

視覺比較 - SVG vs PNG

下面的RadGridView示例有兩個GridViewImageColumns，一個使用SVG圖像，另一個使用PNG圖像。差異是驚人的,PNG圖像有點模糊，但SVG列保持了清晰的清晰度。

總結(jié)

總之，RadSvgImage控件提供了一個多功能和強大的解決方案，可以將高質(zhì)量的矢量圖形無縫集成到您的應(yīng)用程序中。它的靈活性，加上可定制的顏色和內(nèi)置動畫支持等功能，為創(chuàng)建令人驚嘆的用戶界面開辟了一個可能性的世界。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進群討論