本文主要介紹如何顯示SVG圖像和更改其調(diào)色板，您可以使用或任何第三方矢量圖形編輯器來(lái)創(chuàng)建SVG圖像。

DevExpress WPF v21.1高速下載

在XAML中顯示SVG圖像

DevExpress組件包括接受圖像URI的ImageSource類型的屬性，將組件的屬性設(shè)置為目標(biāo)SVG圖像URI來(lái)將SVG圖像分配給DevExpress組件：

XAML

<Window ...
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars">
<StackPanel>
<dxb:ToolBarControl>
<dxb:BarButtonItem Glyph="Images/Open2.svg"/>
<dxb:BarButtonItem Glyph="Images/Up.svg"/>
<dxb:BarButtonItem Glyph="Images/Open.svg"/>
</dxb:ToolBarControl>
</StackPanel>
</Window>

SvgImageSource標(biāo)記擴(kuò)展

將標(biāo)記擴(kuò)展與支持值的任何屬性一起使用，SvgImageSource允許您指定以下 SVG 圖像屬性：

以下代碼示例使用將SVG圖像顯示為的字形，并指定字形的 和 屬性：

XAML

<Window ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
dx:ThemeManager.ThemeName="Office2019HighContrast">
<StackPanel>
<dx:SimpleButton Glyph="{dx:SvgImageSource Uri='Images/Open2.svg', Size='20,20'}"/>
<dx:SimpleButton Glyph="{dx:SvgImageSource Uri='Images/Up.svg', Size='60,60', UsePalette='false'}"/>
<dx:SimpleButton Glyph="{dx:SvgImageSource Uri='Images/Open.svg'}"/>
</StackPanel>
</Window>

DXImage標(biāo)記擴(kuò)展

使用DXImage標(biāo)記擴(kuò)展從DevExpress.Images程序集中加載圖像。

注意：使用Image Picker工具訪問存儲(chǔ)在DevExpress.Images.v21.1.dll程序集中的SVG圖像集合。

XAML

<Window ...
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars">
<StackPanel>
<dxb:ToolBarControl>
<dxb:BarButtonItem Glyph="{dx:DXImage 'SvgImages/Actions/Open2.svg'}"/>
<dxb:BarButtonItem Glyph="{dx:DXImage 'SvgImages/Actions/Up.svg'}"/>
<dxb:BarButtonItem Glyph="{dx:DXImage 'SvgImages/Actions/Open.svg'}"/>
</dxb:ToolBarControl>
</StackPanel>
</Window>

在運(yùn)行時(shí)顯示SVG圖像

1. 指定SVG圖像的絕對(duì)路徑并將其分配給 值。

2. 將URI傳遞給 方法，將該方法分配給支持值的控件屬性：

C#

Uri uri = new System.Uri("C:/Work/SVGImages/SVGImages/Open.svg");
baritem_open.Glyph = WpfSvgRenderer.CreateImageSource(uri);

VB.NET

Dim uri As Uri = New System.Uri("C:/Work/SVGImages/SVGImages/Open.svg")
baritem_open.Glyph = WpfSvgRenderer.CreateImageSource(uri)

SVG圖像調(diào)色板

DevExpress Theme可以使 SVG 圖像的顏色適應(yīng)應(yīng)用程序主題，如果 SVG 圖像元素使用以下預(yù)定義的顏色樣式，應(yīng)用程序主題會(huì)調(diào)整 SVG 圖像顏色來(lái)匹配主題：

• 紅色
• 綠色
• 藍(lán)色
• 黃色
• 黑色
• 白色

以下 SVG 圖像使用綠色和白色顏色樣式。

XML

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g id="Add">
<circle class="Green" cx="16" cy="16" r="14"/>
<polygon class="White" points="24,14 18,14 18,8 14,8 14,14 8,14 8,18 14,18 14,24 18,24 18,18 24,18"/>
</g>
</svg>

應(yīng)用程序主題可以更改 SVG 圖像的顏色：

更改調(diào)色板顏色

以下代碼示例展示了如何使用WpfSvgPalette將主題的SVG調(diào)色板替換為自定義顏色。

SVGImage

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Open2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.Green{fill:#039C23;}
.Yellow{fill:#FFB115;}
.st0{opacity:0.75;}
.CustomBlue{fill:#2A9DF4;}
</style>
<g class="st0">
<path class="Yellow" d="M19.2,10H12V7c0-0.6-0.4-1-1-1H3C2.4,6,2,6.5,2,7v18c0,0.2,0,0.3,0.1,0.4c0,0,0.1-0.1,0.1-0.2l5.5-10
C8,14.5,8.7,14,9.5,14h13.7L19.2,10z"/>
</g>
<path class="CustomBlue" d="M29.3,16H9.6L4,26h19.8c0.5,0,1.1-0.2,1.3-0.6l4.9-8.9C30.1,16.2,29.8,16,29.3,16z"/>
<path class="Green" d="M28,8c0-3.3-2.7-6-6-6s-6,2.7-6,6c0-2.2,1.8-4,4-4s4,1.8,4,4h-4l6,6l6-6H28z"/>
</svg>

XAML

<Window ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
<Image Source="{dx:SvgImageSource Uri=Images/Open.svg}">
<dx:WpfSvgPalette.Palette>
<dx:WpfSvgPalette>
<SolidColorBrush x:Key="Green" Color="LawnGreen"/>
<SolidColorBrush x:Key="CustomBlue" Color="LightBlue"/>
</dx:WpfSvgPalette>
</dx:WpfSvgPalette.Palette>
</Image>
</Window>

覆蓋主題顏色

要忽略主題的SVG調(diào)色板，請(qǐng)將WpfSvgPalette.OverridesThemeColors屬性設(shè)置為true。 在這種情況下，SVG圖像在所有主題中都保持其原始顏色，除非您覆蓋特定WpfSvgPalette中的顏色：

XAML

<Window ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
<Image Source="{dx:SvgImageSource Uri=Images/Open.svg}">
<dx:WpfSvgPalette.Palette>
<dx:WpfSvgPalette OverridesThemeColors="True">
<SolidColorBrush x:Key="Green" Color="LawnGreen"/>
</dx:WpfSvgPalette>
</dx:WpfSvgPalette.Palette>
</Image>
</Window>

忽略SVG圖像的調(diào)色板

當(dāng)您使用SvgImageSource標(biāo)記擴(kuò)展時(shí)，可以將 屬性設(shè)置為false來(lái)忽略主題的SVG調(diào)色板并顯示SVG圖像的原始顏色。

以下代碼示例顯示兩個(gè)SVG圖像，第一個(gè)圖像的顏色來(lái)自應(yīng)用程序主題（“Office2019Black”）；第二個(gè)圖像的UsePalette屬性設(shè)置為false以忽略此主題的 SVG 調(diào)色板：

XAML

<dx:ThemedWindow ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
dx:ThemeManager.ThemeName="Office2019Black">
<StackPanel>
<dx:DXImage Source="{dx:SvgImageSource Uri='pack://application:,,,/DevExpress.Images.v20.1;component/SvgImages/Outlook Inspired/CustomerProfileReport.svg'}"/>
<dx:DXImage Source="{dx:SvgImageSource Uri='pack://application:,,,/DevExpress.Images.v20.1;component/SvgImages/Outlook Inspired/CustomerProfileReport.svg', UsePalette = false}"/>
</StackPanel>
</dx:ThemedWindow>

更改特定狀態(tài)下的SVG圖像顏色

允許您為特定狀態(tài)創(chuàng)建某些調(diào)色板，可以將綁定到任何屬性來(lái)創(chuàng)建基于此屬性的狀態(tài)。

以下代碼示例使用附加屬性在鼠標(biāo)指針懸停在圖像上時(shí)更改 SVG 圖像的顏色（綠色）：

XAML

<Window ...
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
<dx:SimpleButton Glyph="{dx:SvgImageSource Uri=Images/Open.svg}"
dx:SvgImageHelper.State="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}}">
<dx:WpfSvgPalette.Palette>
<dx:WpfSvgPalette>
<dx:WpfSvgPalette.States>
<dx:WpfSvgPalette x:Key="True">
<SolidColorBrush x:Key="Green" Color="Coral"/>
</dx:WpfSvgPalette>
</dx:WpfSvgPalette.States>
</dx:WpfSvgPalette>
</dx:WpfSvgPalette.Palette>
</dx:SimpleButton>
</Window>

支持的 SVG 元素

WPF SVG渲染引擎支持以下SVG元素：

• - <path>
• - <g>
• - <use>
• - <rect>
• - <circle>
• - <ellipse>
• - <line>
• - <polyline>
• - <polygon>

限制

DevExpress 控件僅支持基本的 SVG 元素和功能，不支持的元素列表包括（但不限于）以下項(xiàng)目：

• 動(dòng)畫和鼠標(biāo)事件
• 外部 .CSS 樣式
• Masks
• 除畫筆外的所有元素的相對(duì)值（百分比）
• 自定義字體
• 文本路徑
• 使用 enable-background 參數(shù)進(jìn)行復(fù)雜的不透明度設(shè)置
• “pattern”元素

DevExpress WPF | 下載試用

DevExpress WPF擁有120+個(gè)控件和庫(kù)，將幫助您交付滿足甚至超出企業(yè)需求的高性能業(yè)務(wù)應(yīng)用程序。通過(guò)DevExpress WPF能創(chuàng)建有著強(qiáng)大互動(dòng)功能的XAML基礎(chǔ)應(yīng)用程序，這些應(yīng)用程序?qū)Ｗ⒂诋?dāng)代客戶的需求和構(gòu)建未來(lái)新一代支持觸摸的解決方案。 無(wú)論是Office辦公軟件的衍伸產(chǎn)品，還是以數(shù)據(jù)為中心的商業(yè)智能產(chǎn)品，都能通過(guò)DevExpress WPF控件來(lái)實(shí)現(xiàn)。

DevExpress技術(shù)交流群4：715863792      歡迎一起進(jìn)群討論