{"id":974,"date":"2016-05-23T08:20:04","date_gmt":"2016-05-23T08:20:04","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?p=974"},"modified":"2020-09-25T11:32:56","modified_gmt":"2020-09-25T11:32:56","slug":"wpf-tricks-icons-zur-laufzeit-faerben","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/","title":{"rendered":"WPF-Tricks: Icons zur Laufzeit f\u00e4rben"},"content":{"rendered":"\n<p>Icons helfen&nbsp;Nutzern sich in einer Anwendungsoberfl\u00e4che zurecht zu finden. Gut gemachte Icons sind schnell erfassbar&nbsp;und leisten damit einen wichtigen Beitrag zur intuitiven Bedienbarkeit. Sie geh\u00f6ren daher in jede Anwendung \u2013 k\u00f6nnen Entwickler aber auch vor unerwartete Probleme stellen.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Das Problem<\/h2>\n\n\n\n<p>Auf einem Button soll ein Icon erscheinen.&nbsp;Je nach Zustand (normal, hover, disabled) sollen sich Vorder- und Hintergrundfarbe des Controls \u00e4ndern und damit auch die Farbe des Icons. In meinem Beispiel sorgt die relativ dunkle Hintergrundfarbe beim Hover daf\u00fcr, dass&nbsp;die Farbe des&nbsp;Icons von schwarz zu wei\u00df wechseln muss. Da die Hintergrundfarbe durch die CI des Kunden vorgegeben wird, l\u00e4sst sie sich auch nicht ohne Weiteres \u00e4ndern.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"387\" height=\"45\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/06\/201605_WPF-Tricks-1_1.png\" alt=\"\" class=\"wp-image-978\"\/><figcaption><em>Abbildung 1: Je nach Zustand (normal, hover, disabled) soll auch die Farbe des Icons wechseln<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\u00dcblicherweise&nbsp;braucht es jetzt verschiedene Icon-Sets und die Grafiken m\u00fcssen zur Laufzeit ausgetauscht werden.&nbsp;<em>W\u00e4re es nicht toll, man k\u00f6nnte die Icons einfach zur Laufzeit beliebig einf\u00e4rben?<\/em><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">So geht\u2019s<\/h2>\n\n\n\n<p>Wir ersetzen das Control-Template des Buttons per Style. Der&nbsp;eigentliche Inhalt&nbsp;wird dabei hinter einem Border und einem Rectangle&nbsp;versteckt. Wichtig ist,&nbsp;dass beide genau so gro\u00df wie der originale Content sind.&nbsp;Die Hintergrundfarbe des Borders wird per Template-Binding auf die Hintergrundfarbe des Buttons&nbsp;gebunden. Die F\u00fcllfarbe des Rectangles&nbsp;binden wir auf die Vordergrundfarbe. In dieser Farbe wird dann der Inhalt des Buttons sichtbar.<\/p>\n\n\n\n<p>Den jetzt verdeckten Content-Presenter&nbsp;des Buttons&nbsp;verwenden wir, mit Hilfe eines Visualbrush, als Opacity-Mask f\u00fcr das Rectangle. Das Rectangle wird nun \u201causgestanzt\u201d: An den Stellen, an denen der Content&nbsp;sichtbar ist, bleibt das Rectangle ebenfalls sichtbar. An allen anderen wird es transparent. Der Inhalt des Buttons&nbsp;wird also in der gesetzten Vordergrundfarbe sichtbar!<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"150\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/08\/201605_WPF-Tricks-1_2.png\" alt=\"\" class=\"wp-image-1702\"\/><figcaption><em>Abbildung 2: Der Inhalt des Buttons&nbsp;wird in der gesetzten Vordergrundfarbe sichtbar.<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Hier eine gek\u00fcrzte Version des Control-Templates (einige Properties fehlen):<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;Border\n     Background=\"{TemplateBinding Background}\" \n     BorderBrush=\"{TemplateBinding BorderBrush}\" \n     BorderThickness=\"{TemplateBinding BorderThickness}\">\n     &lt;Grid>\n      &lt;ContentPresenter x:Name=\"MyContentPresenter\" \n                Content=\"{TemplateBinding Content}\"\/>\n      &lt;Border Background=\"{TemplateBinding Background}\">\n       &lt;Rectangle \n        Fill=\"{TemplateBinding Foreground}\" \n        Width=\"{Binding ElementName=MyContentPresenter, Path=ActualWidth}\" \n        Height=\"{Binding ElementName=MyContentPresenter, Path=ActualHeight}\">\n        &lt;Rectangle.OpacityMask>\n         &lt;VisualBrush Stretch=\"None\" Visual=\"{Binding ElementName=MyContentPresenter}\"\/>\n        &lt;\/Rectangle.OpacityMask>\n       &lt;\/Rectangle>\n      &lt;\/Border>\n     &lt;\/Grid>\n    &lt;\/Border><\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Der Button kann weiterhin mit beliebigem Content bef\u00fcllt werden:<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;Button>\n     &lt;StackPanel Orientation=\"Horizontal\">\n      &lt;Image  Source=\"{StaticResource Icon}\" Margin=\"2\" \/>\n      &lt;TextBlock VerticalAlignment=\"Center\">los gehts!&lt;\/TextBlock>\n     &lt;\/StackPanel>\n    &lt;\/Button><\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>(Am Ende des Artikels findet&nbsp;befindet sich der&nbsp;komplette Style)<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p>Mit diesem kleinen Trick ist es m\u00f6glich, Icons zur Laufzeit praktisch beliebig einzuf\u00e4rben. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig, hat aber auch Einschr\u00e4nkungen: Graustufige oder Mehrfarbige Icons, lassen sich bspw.&nbsp;nicht verwenden.<\/p>\n\n\n\n<p>Das Prinzip&nbsp;ist nat\u00fcrlich nicht nur f\u00fcr Buttons&nbsp;sinnvoll, sondern kann auch bei beliebigen anderen Controls Anwendung finden.&nbsp;Durch das Binding der Farbe w\u00e4ren letztendlich sogar Farbverl\u00e4ufe oder gar Animationen machbar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"100\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/06\/201605_WPF-Tricks-1_3.png\" alt=\"Schriftzug &quot;Ende&quot;\" class=\"wp-image-976\"\/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Der komplette Style:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;Style TargetType=\"Button\">\n     &lt;Setter Property=\"Background\" Value=\"WhiteSmoke\" \/>\n     &lt;Setter Property=\"Foreground\" Value=\"Black\" \/>\n     &lt;Setter Property=\"SnapsToDevicePixels\" Value=\"True\" \/>\n     &lt;Setter Property=\"FontWeight\" Value=\"Normal\"\/>\n     &lt;Setter Property=\"MinWidth\" Value=\"50\"\/>\n     &lt;Setter Property=\"Padding\" Value=\"1\"\/>\n     &lt;Setter Property=\"BorderBrush\" Value=\"LightGray\"\/>\n     &lt;Setter Property=\"BorderThickness\" Value=\"1\"\/>\n     &lt;Setter Property=\"VerticalContentAlignment\" Value=\"Center\"\/>\n     &lt;Setter Property=\"HorizontalContentAlignment\" Value=\"Center\"\/>\n     &lt;Setter Property=\"Template\">\n      &lt;Setter.Value>\n       &lt;ControlTemplate TargetType=\"{x:Type Button}\">\n        &lt;Border\n         Background=\"{TemplateBinding Background}\" \n         BorderBrush=\"{TemplateBinding BorderBrush}\" \n         BorderThickness=\"{TemplateBinding BorderThickness}\" \n         MinWidth=\"{TemplateBinding MinWidth}\">\n         &lt;Grid>\n          &lt;ContentPresenter x:Name=\"MyContentPresenter\" \n           Content=\"{TemplateBinding Content}\" \n           HorizontalAlignment=\"{TemplateBinding HorizontalContentAlignment}\" \n           VerticalAlignment=\"{TemplateBinding VerticalContentAlignment}\" \n           Margin=\"{TemplateBinding Padding}\"\/>\n          &lt;Border Background=\"{TemplateBinding Background}\">\n           &lt;Rectangle \n            Fill=\"{TemplateBinding Foreground}\" \n            Margin=\"{TemplateBinding Padding}\"\n            Width=\"{Binding ElementName=MyContentPresenter, Path=ActualWidth}\" \n            Height=\"{Binding ElementName=MyContentPresenter, Path=ActualHeight}\" \n            HorizontalAlignment=\"{TemplateBinding HorizontalContentAlignment}\" \n            VerticalAlignment=\"{TemplateBinding VerticalContentAlignment}\">\n            &lt;Rectangle.OpacityMask>\n             &lt;VisualBrush Stretch=\"None\" Visual=\"{Binding ElementName=MyContentPresenter}\"\/>\n            &lt;\/Rectangle.OpacityMask>\n           &lt;\/Rectangle>\n          &lt;\/Border>\n         &lt;\/Grid>\n        &lt;\/Border>\n        &lt;ControlTemplate.Triggers>\n         &lt;Trigger Property=\"IsMouseOver\" Value=\"True\">\n          &lt;Setter Property=\"Background\" Value=\"{DynamicResource Brushes50HzOrange158}\" \/>\n          &lt;Setter Property=\"Foreground\" Value=\"White\" \/>\n         &lt;\/Trigger>\n         &lt;Trigger Property=\"IsPressed\" Value=\"True\">\n          &lt;Setter Property=\"Background\" Value=\"{DynamicResource Brushes50HzRotOrange179}\" \/>\n          &lt;Setter Property=\"Foreground\" Value=\"White\" \/>\n         &lt;\/Trigger>\n         &lt;Trigger Property=\"IsEnabled\" Value=\"False\">\n          &lt;Setter Property=\"Foreground\" Value=\"{DynamicResource Brushes50HzGrau430}\"\/>\n         &lt;\/Trigger>\n        &lt;\/ControlTemplate.Triggers>\n       &lt;\/ControlTemplate>\n      &lt;\/Setter.Value>\n     &lt;\/Setter>\n    &lt;\/Style><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.<\/p>\n","protected":false},"author":42,"featured_media":1751,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[12,16],"tags":[389,390,391,392,368,378,379,380,381,382,383,384,385,386,387,388],"topics":[377],"class_list":["post-974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-dot-net","tag-fast","tag-easy","tag-xaml","tag-furious","tag-wpf","tag-wpf-tricks","tag-icon-faerben","tag-color","tag-laufzeit","tag-runtime","tag-control-template","tag-opacity-mask","tag-visual-brush","tag-visual","tag-schnell","tag-einfach","topics-wpf-tricks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WPF-Tricks: Icons zur Laufzeit f\u00e4rben - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WPF-Tricks: Icons zur Laufzeit f\u00e4rben - ZEISS Digital Innovation Blog\" \/>\n<meta property=\"og:description\" content=\"So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-23T08:20:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-25T11:32:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png\" \/>\n\t<meta property=\"og:image:width\" content=\"909\" \/>\n\t<meta property=\"og:image:height\" content=\"511\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sebastian Thurm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:site\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Thurm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/\",\"name\":\"WPF-Tricks: Icons zur Laufzeit f\u00e4rben - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png\",\"datePublished\":\"2016-05-23T08:20:04+00:00\",\"dateModified\":\"2020-09-25T11:32:56+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/e14048bdec36c5e9e58436564f4cf9c1\"},\"description\":\"So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png\",\"width\":909,\"height\":511},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WPF-Tricks: Icons zur Laufzeit f\u00e4rben\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/e14048bdec36c5e9e58436564f4cf9c1\",\"name\":\"Sebastian Thurm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/05\/thurm_sebastian-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/05\/thurm_sebastian-150x150.jpg\",\"caption\":\"Sebastian Thurm\"},\"description\":\"Sebastian Thurm ist Dipl.-Ing. f\u00fcr Computervisualistik und arbeitet als Frontend-Entwickler und UX-Berater f\u00fcr die ZEISS Digital Innovation, Dresden. Er war in den letzten Jahren in verschiedenen Projekten im Bereich Handel, Industrie und Energiewirtschaft t\u00e4tig.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/sebastianthurm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WPF-Tricks: Icons zur Laufzeit f\u00e4rben - ZEISS Digital Innovation Blog","description":"So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/","og_locale":"de_DE","og_type":"article","og_title":"WPF-Tricks: Icons zur Laufzeit f\u00e4rben - ZEISS Digital Innovation Blog","og_description":"So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/","og_site_name":"Digital Innovation Blog","article_publisher":"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/","article_published_time":"2016-05-23T08:20:04+00:00","article_modified_time":"2020-09-25T11:32:56+00:00","og_image":[{"width":909,"height":511,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png","type":"image\/png"}],"author":"Sebastian Thurm","twitter_card":"summary_large_image","twitter_creator":"@ZEISS_di","twitter_site":"@ZEISS_di","twitter_misc":{"Verfasst von":"Sebastian Thurm","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/","name":"WPF-Tricks: Icons zur Laufzeit f\u00e4rben - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png","datePublished":"2016-05-23T08:20:04+00:00","dateModified":"2020-09-25T11:32:56+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/e14048bdec36c5e9e58436564f4cf9c1"},"description":"So werden Icons in WPF schnell und einfach zur Laufzeit eingef\u00e4rbt. Verschiedenfarbige Icon-Sets werden damit unn\u00f6tig. Das Prinzip ist sehr leichtgewichtig.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi.png","width":909,"height":511},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wpf-tricks-icons-zur-laufzeit-faerben\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/"},{"@type":"ListItem","position":2,"name":"WPF-Tricks: Icons zur Laufzeit f\u00e4rben"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/e14048bdec36c5e9e58436564f4cf9c1","name":"Sebastian Thurm","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/05\/thurm_sebastian-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/05\/thurm_sebastian-150x150.jpg","caption":"Sebastian Thurm"},"description":"Sebastian Thurm ist Dipl.-Ing. f\u00fcr Computervisualistik und arbeitet als Frontend-Entwickler und UX-Berater f\u00fcr die ZEISS Digital Innovation, Dresden. Er war in den letzten Jahren in verschiedenen Projekten im Bereich Handel, Industrie und Energiewirtschaft t\u00e4tig.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/sebastianthurm\/"}]}},"author_meta":{"display_name":"Sebastian Thurm","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/sebastianthurm\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2016\/05\/201605_WPF-Tricks-1_2_fi-600x337.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/cloud\/\" class=\"advgb-post-tax-term\">Cloud<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">.NET<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Cloud<\/span>","<span class=\"advgb-post-tax-term\">.NET<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">fast<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">easy<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">xaml<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">furious<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">WPF<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">WPF Tricks<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">Icon f\u00e4rben<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">color<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">Laufzeit<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">runtime<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">control template<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">opacity mask<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">visual brush<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">visual<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">schnell<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/dot-net\/\" class=\"advgb-post-tax-term\">einfach<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">fast<\/span>","<span class=\"advgb-post-tax-term\">easy<\/span>","<span class=\"advgb-post-tax-term\">xaml<\/span>","<span class=\"advgb-post-tax-term\">furious<\/span>","<span class=\"advgb-post-tax-term\">WPF<\/span>","<span class=\"advgb-post-tax-term\">WPF Tricks<\/span>","<span class=\"advgb-post-tax-term\">Icon f\u00e4rben<\/span>","<span class=\"advgb-post-tax-term\">color<\/span>","<span class=\"advgb-post-tax-term\">Laufzeit<\/span>","<span class=\"advgb-post-tax-term\">runtime<\/span>","<span class=\"advgb-post-tax-term\">control template<\/span>","<span class=\"advgb-post-tax-term\">opacity mask<\/span>","<span class=\"advgb-post-tax-term\">visual brush<\/span>","<span class=\"advgb-post-tax-term\">visual<\/span>","<span class=\"advgb-post-tax-term\">schnell<\/span>","<span class=\"advgb-post-tax-term\">einfach<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 10\u00a0Jahren ago","modified":"Updated 6\u00a0Jahren ago"},"absolute_dates":{"created":"Posted on Mai 23, 2016","modified":"Updated on September 25, 2020"},"absolute_dates_time":{"created":"Posted on Mai 23, 2016 8:20 a.m.","modified":"Updated on September 25, 2020 11:32 a.m."},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/comments?post=974"}],"version-history":[{"count":6,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/974\/revisions"}],"predecessor-version":[{"id":1703,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/974\/revisions\/1703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media\/1751"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media?parent=974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/categories?post=974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/tags?post=974"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/topics?post=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}