• <menu id="w2i4a"></menu>
  •
    logo Devexpress WPF控件文檔中心

    SVG 圖像

    立即下載DevExpress WPF

    本主題介紹如何顯示 SVG 圖像并更改其調(diào)色板。

    您可以使用SVG Icon Builder 或任何第三方矢量圖形編輯器來創(chuàng)建 SVG 圖像。

    在 XAML 中顯示 SVG 圖像

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

    XML： 

    <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>
    WPF svg svgimagesource圖像
    SvgImageSource標(biāo)記擴(kuò)展

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

    擴(kuò)展屬性 描述
    SvgImageSourceExtension.Uri 獲取或設(shè)置System.Uri 對(duì)象，該對(duì)象指定SVG圖像的文件。
    BaseSvgImageSourceExtension.Size 獲取或設(shè)置SVG圖像的輸出寬度和高度。
    BaseSvgImageSourceExtension.UsePalette 獲取或設(shè)置圖像是否使用WpfSvgPalette。

    提示：SvgImageSource不能處理可凍結(jié)對(duì)象。

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

    XML： 

    <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>
    DevExpress SVG 圖像

    View Example：How to use the SvgImageSource extension to specify a vector iamge as BarButtonitem's glyph

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

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

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

    XML： 

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

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

    將URI傳遞給WpfSvgRenderer.CreateImageSource方法，將該方法賦給一個(gè)支持ImageSource值的控件屬性：

    View Example：How to Specify SVG images manually

    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)

    該示例從圖像路徑創(chuàng)建imagesource_對(duì)象，并在列表框中顯示圖像。

    SVG圖像調(diào)色板

    DevExpress主題可以根據(jù)應(yīng)用程序主題調(diào)整SVG圖像的顏色，如果SVG圖像元素使用以下預(yù)定義的顏色樣式，則應(yīng)用程序主題將調(diào)整SVG圖像顏色來匹配主題：

    • Red
    • Green
    • Blue
    • Yellow
    • Black
    • White

    下面的SVG圖像使用了綠色和白色的顏色樣式：

    DevExpress WinForm 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圖像的顏色：

    WinForm修改后的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>

    使用SvgImageSourceExtension或DXImage類來顯示自定義的SVG圖像：

    XML： 

    <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>
    WinForm svg圖像自定義顏色
    覆蓋主題顏色

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

    XML： 

    <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>
    WinForm svg圖像覆蓋主題顏色
    忽略 SVG 圖像的調(diào)色板

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

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

    XML： 

    <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.v23.1;component/SvgImages/Outlook Inspired/CustomerProfileReport.svg'}"/>
<dx:DXImage Source="{dx:SvgImageSource Uri='pack://application:,,,/DevExpress.Images.v23.1;component/SvgImages/Outlook Inspired/CustomerProfileReport.svg', UsePalette = false}"/>
</StackPanel>
</dx:ThemedWindow>
    WinForm svg 圖像源擴(kuò)展
    更改特定狀態(tài)下的 SVG 圖像顏色

    WpfSvgPalette允許您為特定的狀態(tài)創(chuàng)建特定的調(diào)色板，可以將SvgImageHelper.State綁定到任何屬性來基于該屬性的創(chuàng)建狀態(tài)。

    下面的代碼示例使用SvgImageHelper.State附加屬性來更改SVG圖像的顏色(綠色)，當(dāng)鼠標(biāo)指針在圖像上時(shí)：

    XML： 

    <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>
    WinForm svg圖像狀態(tài)

    支持的SVG元素

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

    局限性

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

    • 動(dòng)畫和 mouse 事件
    • External .CSS styles
    • Masks
    • 除筆刷外的所有元素的相對(duì)值(百分比)
    • 自定義字體
    • 文本路徑
    • 使用enable-background參數(shù)設(shè)置復(fù)雜的不透明度
    • “模式”元素
    • display屬性
    • 梯度中的href屬性
    • 一個(gè)元素的多個(gè)CSS類
    • 基于類和id屬性的樣式
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();