devexpress-examples / wpf-svg-images-use-palettes-to-replace-image-colors

Change SVG image colors for a theme

WPF SVG Images - Use Palettes to Replace Image Colors

This example demonstrates how to change SVG image colors for a theme.

DevExpress Themes can adapt an SVG image's colors to the application theme. You can create image states that define how to change image colors based on the applied theme:

1. Create an image state.
2. Specify the WpfSvgPalette.Key property to identify the state.
3. Define a Brush that replaces colors. The SolidColorBrush.Key property specifies the color replaced with the SolidColorBrush.Color property.
4. Attach the dx:SvgImageHelper.State property to the image. This property applies the state based on its Key property value.

This example changes the color from #333333 to #FFFFFE if the Office2016Black theme is applied:

<Image Source="{dx:SvgImageSource Uri=Images/logo.svg}" Width="164" 
       dx:SvgImageHelper.State="{Binding Path=(dx:ThemeManager.TreeWalker).ThemeName, RelativeSource={RelativeSource Self}}">
    <dx:WpfSvgPalette.Palette>
        <dx:WpfSvgPalette>
            <dx:WpfSvgPalette.States>
                <dx:WpfSvgPalette x:Key="Office2016Black">
                    <SolidColorBrush x:Key="#333333" Color="#FFFFFE"/>
                </dx:WpfSvgPalette>
            </dx:WpfSvgPalette.States>
        </dx:WpfSvgPalette>
    </dx:WpfSvgPalette.Palette>
</Image>

Files to Review

• MainWindow.xaml (VB: MainWindow.xaml)
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)

Documentation

• SVG Images
• SVG Image Palettes
• WpfSvgPalette
• SvgImageHelper
• SvgImageSourceExtension

More Examples

• WPF SvgImageSource Extension - Specify a Vector Image as a Glyph
• Specify SVG Images Manually