none
How to change the color of an svg icon in xaml? RRS feed

  • Question

  • I want to load an svg image in xaml whose default color is black, I want to change the svg image color on pointerentry and exit events. How to do that in UWP?
    • Edited by Dheepakji Tuesday, August 11, 2020 11:58 AM
    • Moved by CoolDadTx Wednesday, August 12, 2020 1:33 PM UWA related
    Tuesday, August 11, 2020 5:48 AM

All replies

  • Hi Dheepakji, 
    Could you explain what your project type is?  Winforms? Wpf? Or other types?
    Best Regards,
    Daniel Zhang


    "Windows Forms General" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Windows Forms General" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Tuesday, August 11, 2020 9:22 AM
  • By building on top of Paolo's non-working answer, I was able to solve this.

    The "MyImage" class:

    Public Class MyImage
        Inherits System.Windows.Controls.Image

        Public Property Color As System.Windows.Media.SolidColorBrush

    End Class
    Inside the resource dictionary, assign the DrawingImage to the Source setter of a MyImage style:

    <Style TargetType="{x:Type local:MyImage}" x:Key="Bell">
        <Setter Property="Source">
            <Setter.Value>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <DrawingGroup Opacity="1">
                            <DrawingGroup.Children>
                                <DrawingGroup Opacity="1">
                                    <DrawingGroup.Children>
                                        <DrawingGroup Opacity="1">
                                            <DrawingGroup.Children>
                                                <GeometryDrawing Brush="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:MyImage}}, Path=Color}"  Pen="{x:Null}">
    with the rest of it following as you'd expect.

    Inside the window's XAML file:

    <Window
        ...
        xmlns:local="clr-namespace:AppNameHere">
        <Window.Resources>
            <ResourceDictionary Source="DictionaryName.xaml" />
        </Window.Resources>
        ....
        <Grid Background="Black">
            <local:MyImage Color="Chartreuse" Width="30" Height="30" Style="{StaticResource Bell}" />
        </Grid>
        ...
    </Window>
    Tuesday, August 11, 2020 9:57 AM
  • I'm developing an UWP application using xaml & c#
    Tuesday, August 11, 2020 11:56 AM
  • Hi Dheepakji,
    The Visual C# forum discusses and asks questions about the C# programming language, IDE, libraries, samples, and tools.
    About UWP, I suggest you ask the question on the Microsoft Q&A forum and you can get more professional answer.
    Thank you for your understanding.
    Best Regards,
    Daniel Zhang


    "Windows Forms General" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Windows Forms General" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Wednesday, August 12, 2020 1:53 AM
  • By building on top of Paolo's non-working answer, I was able to solve this.

    The "MyImage" class:

    Public Class MyImage
        Inherits System.Windows.Controls.Image

        Public Property Color As System.Windows.Media.SolidColorBrush

    End Class
    Inside the resource dictionary, assign the DrawingImage to the Source setter of a MyImage style:

    <Style TargetType="{x:Type local:MyImage}" x:Key="Bell">
        <Setter Property="Source">
            <Setter.Value>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <DrawingGroup Opacity="1">
                            <DrawingGroup.Children>
                                <DrawingGroup Opacity="1">
                                    <DrawingGroup.Children>
                                        <DrawingGroup Opacity="1">
                                            <DrawingGroup.Children>
                                                <GeometryDrawing Brush="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:MyImage}}, Path=Color}"  Pen="{x:Null}">
    with the rest of it following as you'd expect.

    Inside the window's XAML file:

    <Window
        ...
        xmlns:local="clr-namespace:AppNameHere">
        <Window.Resources>
            <ResourceDictionary Source="DictionaryName.xaml" />
        </Window.Resources>
        ....
        <Grid Background="Black">
            <local:MyImage Color="Chartreuse" Width="30" Height="30" Style="{StaticResource Bell}" />
        </Grid>
        ...
    </Window>
    Wednesday, August 12, 2020 11:04 AM
  • Ok Thank you
    Monday, August 17, 2020 6:17 AM