界面控件Telerik UI for WPF中文教程 - 用RadSvgImage升级应用程序UI

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等创建的应用程序可靠且结构良好非常容易维护其直观的API将无缝地集成Visual Studio工具箱中。Telerik UI for WPF中的RadSvgImage组件使开发人员能够将基于矢量的图形无缝集成到他们的应用程序中。在之前的版本中Telerik UI for WPF引入了开创性的RadSvgImage控件这个创新的附加功能使开发人员能够将基于矢量图形集成到他们的应用程序中将用户体验提升到一个全新的水平。由于能够在不牺牲质量的情况下缩放图像RadSvgImage控件彻底改变了WPF中的UI开发。对于制作高DPI应用程序优先考虑用户满意度这是非常宝贵的。这一进步的基石在于可缩放矢量图形(SVG)这是一种基于xml的格式允许图形无缝地适应所有DPI设置。开始使用RadSvgImage将RadSvgImage添加到项目中是很简单的只需要包含对Telerik.Windows.Controls程序集的引用即可将SVG图像显示为独立组件是一件轻而易举的事你可以这样设置UriSource属性telerik:RadSvgImage UriSourceSVGIcon.svg Width128 Height128/RadSvgImage没有默认大小如果它被放置在一个用无穷大测量它的面板中(例如在StackPanel中)您需要为SVG图像指定一个正确显示的大小。您也可以使用RadSvgImage作为一个标记扩展替代将其设置为一个单独的组件Image Source{telerik:RadSvgImageSource SourceSVGImage.svg} Width128 Height128/自定义填充颜色您可以通过调整OverrideColor属性来完全替换SVG图像的填充颜色动画制作更简单RadSvgImage控件具有内置的动画支持允许您将SVG图像带入生活。要应用动画请利用SVG的XML中的animate、animateMotion和animateTransform元素。g animateTransform attributeNametransform attributeTypeXML typerotate from0 to360 begin0s dur12s / use xlink:href#minuteHand / /g将画笔应用于元素如果您曾经想要用色彩填充SVG图像所需做的就是深入到CustomBrushes属性。它允许您轻松地将不同的色调应用于svg中的元素这就像给您的图形一个个人的触摸提醒一下CustomBrushes属性是一个Dictionarystring, Brush这基本上意味着它是一个处理颜色变化的漂亮工具。让我们深入研究一个例子假设您已经准备好了SVG文件可以把它想象成画布这里有一个片段svg width200 height200 viewBox130 130 200 200 fillnone xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlink x0px y0px enable-backgroundnew 0 0 512 512 xml:spacepreserve defs solidColor idcalendar-lines/ solidColor idcalendar-datebgr/ solidColor idcalendar-date/ /defs path dM14.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 filltransparent transformtranslate(170,166) strokeurl(#calendar-lines) stroke-width2 width130 height125 / rect x224.977 y222 width32.4675 height32 fillurl(#calendar-datebgr)/ path dM246.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 fillurl(#calendar-date) stroketransparent stroke-width0/ /svg现在您需要创建一个自定义Dictionary集合来定义颜色。public class CustomDictionary : Dictionarystring, Brush { }现在是时候用一些充满活力的选择加载您的自定义字典了看看这个Grid.Resources local:CustomDictionary x:KeyCustomBrushesDictionary SolidColorBrush x:Keycalendar-lines Color#08BAB7/ SolidColorBrush x:Keycalendar-datebgr Color#b708ba/ SolidColorBrush x:Keycalendar-date ColorBlack/ /local:CustomDictionary /Grid.Resources最后让我们把它们结合起来使用CustomBrushes属性将RadSvgImage附加到自定义字典上。Grid Grid.Resources local:CustomDictionary x:KeyCustomBrushesDictionary SolidColorBrush x:Keycalendar-lines Color#08BAB7/ SolidColorBrush x:Keycalendar-datebgr Color#B708BA/ SolidColorBrush x:Keycalendar-date Color#FBFF00/ /local:CustomDictionary /Grid.Resources telerik:RadSvgImage UriSource/Images/SvgImage.svg CustomBrushes{StaticResource CustomBrushesDictionary} Width128 Height128/ /GridRadSvgImage现在摇摆自定义颜色。视觉比较 - SVG vs PNG下面的RadGridView示例有两个GridViewImageColumns一个使用SVG图像另一个使用PNG图像。差异是惊人的,PNG图像有点模糊但SVG列保持了清晰的清晰度。总结总之RadSvgImage控件提供了一个多功能和强大的解决方案可以将高质量的矢量图形无缝集成到您的应用程序中。它的灵活性加上可定制的颜色和内置动画支持等功能为创建令人惊叹的用户界面开辟了一个可能性的世界。