Perubahan warna XAML SVG saat runtime

Kami memiliki satu set SVG yang disimpan dalam kamus sumber daya.

Contoh:

<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="#FF000000" 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>

Jika Anda memperhatikan GeometryDrawing Brush diatur ke #ff000000 (hitam). Masalah yang kami hadapi adalah mengizinkan tampilan untuk menampilkan SVG ini dan menetapkan warna saat runtime (melalui pengikatan)

Jendela kami (tampilan) memiliki Kamus Sumber Daya dengan ikon di dalam Jendela. Sumber Daya.

Kami mencari solusi seperti ini:

<Image Source="{StaticResource Bell}" Fill="#FF884422"/>

svg wpf xaml
person Sean Hobbs    schedule 08.04.2015    source sumber
comment
Sepertinya banyak kesalahan, secara pribadi saya hanya mengekspornya sebagai XAML dan mengubahnya menjadi ContentControl bertemplat di mana saya bisa meneruskan semua hal itu sebagai Properti Ketergantungan ke elemen anak dalam satu liner dan menyimpan templat dalam kamus sumber daya.   -  person Chris W.    schedule 08.04.2015
comment
Sepertinya ini jalan yang akan saya ambil, apakah Anda punya contoh yang bisa Anda bagikan?   -  person Sean Hobbs    schedule 09.04.2015
comment
Ya, aku ada rapat yang akan dimulai sebentar lagi, tapi aku akan kembali ke rapat ini setelah makan siang dan menemuimu begitu aku punya waktu sebentar.   -  person Chris W.    schedule 09.04.2015
comment
Terima kasih! Kamu laki-laki!   -  person Sean Hobbs    schedule 09.04.2015
comment
Chris, di template Anda, apa yang Anda masukkan ke dalamnya? Nilai PathGeometry atau hanya Path?   -  person Sean Hobbs    schedule 09.04.2015
comment
Anda dapat membuang apa pun yang Anda suka di sana, saya lupa saya menjawab pertanyaan serupa di sini sehingga Anda memiliki referensi, lalu Anda dapat menyetel penyetel untuk properti ketergantungan yang ingin Anda capai di templat selama Anda menggunakan {TemplateBinding blah} yang memungkinkan Anda melakukannya sesuatu seperti ‹ContentControl Fill=Red Stroke=Blue/› dll, dll.   -  person Chris W.    schedule 09.04.2015
comment
Karena keterbatasan komentar, saya harus membagi tanggapan saya menjadi beberapa menjadi dua tanggapan. Saya mencoba yang berikut ini (menghapus beberapa xaml), tetapi {TemplateBinding Background}. Sepertinya tidak berhasil.   -  person Sean Hobbs    schedule 09.04.2015
comment
‹Style x:Key=SomeStyle TargetType=ContentControl› ‹Setter Property=Template› ‹Setter.Value› ‹ControlTemplate TargetType=ContentControl› ‹Image› ‹Image.Source› ‹DrawingImage› .... ‹GeometryDrawing Brush={TemplateBinding Background }/› .... ‹/DrawingImage› ‹/Image.Source› ‹/Image› ‹/ControlTemplate› ‹/Setter.Value› ‹/Setter› ‹/Style›   -  person Sean Hobbs    schedule 09.04.2015
comment
Bagaimana Anda menambahkan properti ketergantungan baru ke kontrol konten? Apakah Anda membuat kontrol konten khusus yang mewarisi dan menambahkan properti baru? Bagaimana jika saya ingin mengikat beberapa warna pada ikon ini?   -  person Sean Hobbs    schedule 09.04.2015
comment
Mari kita melanjutkan diskusi ini dalam chat.   -  person Sean Hobbs    schedule 09.04.2015
comment
Mengerti, Anda dapat menghapusnya, saya akan mengirimkan email berisi apa yang saya tulis di obrolan.   -  person Sean Hobbs    schedule 09.04.2015

Jawaban (3)


arrow_upward
1
arrow_downward

Dengan memanfaatkan jawaban Paolo yang tidak berfungsi, saya dapat menyelesaikan ini.

Kelas Gambar Saya:

Public Class MyImage
    Inherits System.Windows.Controls.Image

    Public Property Color As System.Windows.Media.SolidColorBrush

End Class

Di dalam kamus sumber daya, tetapkan DrawingImage ke penyetel Sumber gaya 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>

Di dalam file XAML jendela:

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

Inilah hasilnya: https://i.stack.imgur.com/7JNyH.png

person Brandon Hood    schedule 10.04.2015

arrow_upward
2
arrow_downward

Lihat alat ini: https://github.com/BerndK/SvgToXaml

Itu dapat mengkonversi semua svg secara otomatis menjadi satu xaml. Warnanya dipisahkan dan dapat diatur untuk semua gambar sekaligus atau hanya untuk satu gambar. Kode contoh untuk mengubah warna selama runtime disertakan.

Alat ini juga merupakan browser svg, penampil ...

person BerndK    schedule 07.05.2015
comment
@Joseph: perpustakaan dirancang untuk mengubah SVG menjadi objek .NET Path. Yang ini secara desain tidak diwarnai, jadi Anda bisa (dan harus) mengatur warna yang Anda suka. Ini bagus untuk ikon satu warna yang digunakan oleh desain modern. Jika Anda menginginkan ikon multi-warna, Anda dapat menggabungkan beberapa jalur (seperti yang ditunjukkan dalam demo SvgToXaml), tetapi saya akan mempertimbangkan untuk menggunakan file png. Dengan melakukan hal ini, Anda mungkin kehilangan keuntungan dari jalur/geometri: dapat diskalakan tanpa kehilangan kualitas. - person BerndK; 22.06.2020

arrow_upward
0
arrow_downward

DrawingImage akan menerima konteks data yang sama dengan jendela, sehingga Anda dapat mengikat warna ke properti pada model tampilan jendela.

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

Jendela Tes Saya.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>

Maka model tampilan akan memerlukan properti IconColor.

person MHollis    schedule 08.04.2015