XAML SVG เปลี่ยนสีเมื่อรันไทม์

ด้วยการสร้างคำตอบที่ไม่ทำงานของเปาโล ฉันสามารถแก้ไขปัญหานี้ได้

คลาส MyImage:

Public Class MyImage
    Inherits System.Windows.Controls.Image

    Public Property Color As System.Windows.Media.SolidColorBrush

End Class

ภายในพจนานุกรมทรัพยากร ให้กำหนด DrawingImage ให้กับตัวตั้งค่าแหล่งที่มาของสไตล์ MyImage:

<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}" />
                                            </DrawingGroup.Children>
                                        </DrawingGroup>
                                    </DrawingGroup.Children>
                                </DrawingGroup>
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Setter.Value>
        </Setter>
</Style>

ภายในไฟล์ XAML ของหน้าต่าง:

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

ผลลัพธ์ที่ได้คือ https://i.stack.imgur.com/7JNyH.png

ดูเครื่องมือนี้: https://github.com/BerndK/SvgToXaml

มันสามารถแปลง svg ทั้งหมดเป็น xaml เดียวโดยอัตโนมัติ สีจะถูกแยกออกจากกันและสามารถตั้งค่าให้กับทุกภาพในคราวเดียวหรือเพียงภาพเดียวก็ได้ รวมโค้ดตัวอย่างสำหรับการเปลี่ยนสีระหว่างรันไทม์ด้วย

เครื่องมือนี้ยังเป็นเบราว์เซอร์ svg โปรแกรมดู ...

DrawingImage จะได้รับบริบทข้อมูลเดียวกันกับหน้าต่าง ดังนั้นคุณจึงสามารถผูกสีเข้ากับคุณสมบัติบนโมเดลมุมมองของหน้าต่างได้

พจนานุกรม1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DrawingImage x:Key="Bell">
        <DrawingImage.Drawing>
            <DrawingGroup Opacity="1">
                <DrawingGroup.Children>
                    <DrawingGroup Opacity="1">
                        <DrawingGroup.Children>
                            <DrawingGroup Opacity="1">
                                <DrawingGroup.Children>
                                    <GeometryDrawing Brush="{Binding IconColor}" Pen="{x:Null}">
                                        <GeometryDrawing.Geometry>
                                            <PathGeometry FillRule="Nonzero" Figures="........." />
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup.Children>
                            </DrawingGroup>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>
</ResourceDictionary>

MyTestWindow.xaml

<Window x:Class="MyTestWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">        
    <Window.Resources>
        <ResourceDictionary Source="Dictionary1.xaml" />
    </Window.Resources>
    <Grid>
        <Image Source="{StaticResource Bell}" />
    </Grid>
</Window>

จากนั้นโมเดลมุมมองจะต้องมีคุณสมบัติ IconColor