{"id":795,"date":"2016-05-23T09:06:54","date_gmt":"2016-05-23T09:06:54","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?p=795"},"modified":"2020-09-25T07:18:31","modified_gmt":"2020-09-25T07:18:31","slug":"wpf-tricks-coloring-icons-at-runtime","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/","title":{"rendered":"WPF Tricks: Coloring Icons at Runtime"},"content":{"rendered":"\n<p>Icons help users get their bearings in an application interface. Icons that are done well are easily recognizable, contributing significantly to the intuitive operability. Therefore, they belong in every application\u2014but they can also cause unexpected problems for the developer.<\/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\">The Problem<\/h2>\n\n\n\n<p>An icon is supposed to appear on a button. Both the foreground and background color of the control, and thus the color of the icon, are supposed to change according to the state (normal, hover, disabled). In my example, the color of the icon has to change from black to white for the hover because of the relatively dark background color. Since the background color is prescribed by the client\u2019s CI, it cannot readily be changed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/09\/201605_WPF_Tricks_1_1_en-600x72.png\" alt=\"\" class=\"wp-image-1121\" width=\"450\" height=\"54\" srcset=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/09\/201605_WPF_Tricks_1_1_en-600x72.png 600w, https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/09\/201605_WPF_Tricks_1_1_en-768x92.png 768w, https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/09\/201605_WPF_Tricks_1_1_en-640x77.png 640w, https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/09\/201605_WPF_Tricks_1_1_en.png 930w\" sizes=\"auto, (max-width: 639px) 98vw, (max-width: 1199px) 64vw, 450px\" \/><figcaption><em>Figure 1: The color of the icon is supposed to change according to the state (normal, hover, disabled)<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Usually, different icon sets are required at this point, and the graphics have to be exchanged at runtime. <em>Wouldn\u2019t it be great if you could simply arbitrarily color the icons at runtime?<\/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\">Here is how<\/h2>\n\n\n\n<p>We replace the control template of the button by way of style. The content itself is hidden behind a border and a rectangle for this purpose. It is important that both are the same size as the original content. The background color of the border is bound to the background color of the button by means of template binding. The fill color of the rectangle is bound to the foreground color. The content of the button is then displayed in this color.<\/p>\n\n\n\n<p>We use the content presenter of the button, which is currently covered, as an opacity mask for the rectangle using a visual brush. Now, the rectangle is \u201cpunched out\u201d: The rectangle remains visible wherever the content is visible. Everywhere else, it becomes transparent. Thus, the content of the button becomes visible in the defined foreground color!<\/p>\n\n\n\n<p>An abbreviated version of the control template (without some of the properties):<\/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>The button can furthermore be filled with any desired content:<\/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\">let\u2019s go!&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>(The complete style is provided at the end of this post.)<\/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\">Conclusion<\/h2>\n\n\n\n<p>This little trick enables you to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary. The principle is very lightweight, but it has its limitations: Gray-scale or multi-colored icons, for example, cannot be used.<\/p>\n\n\n\n<p>Obviously, the principle is not only useful for buttons; it can also be used for any other kind of control. Due to the binding of the color, even color gradients and animation are ultimately possible.<\/p>\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>The complete 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>This little trick enables you to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary. The principle is very lightweight.<\/p>\n","protected":false},"author":81,"featured_media":1125,"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":[9,13],"tags":[384,385,386,371,372,374,376,377,378,379,380,383],"topics":[274],"class_list":["post-795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud","category-dot-net","tag-easy","tag-xaml","tag-furious","tag-wpf","tag-wpf-tricks","tag-color","tag-runtime","tag-control-template","tag-opacity-mask","tag-visual-brush","tag-visual","tag-fast","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: Coloring Icons at Runtime - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"This post describes how to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary.\" \/>\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\/en\/wpf-tricks-coloring-icons-at-runtime\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WPF Tricks: Coloring Icons at Runtime - ZEISS Digital Innovation Blog\" \/>\n<meta property=\"og:description\" content=\"This post describes how to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-23T09:06:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-25T07:18:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1063\" \/>\n\t<meta property=\"og:image:height\" content=\"599\" \/>\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:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Thurm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/\",\"name\":\"WPF Tricks: Coloring Icons at Runtime - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png\",\"datePublished\":\"2016-05-23T09:06:54+00:00\",\"dateModified\":\"2020-09-25T07:18:31+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/b9853c1d7f59ed409d4b93b5111f309a\"},\"description\":\"This post describes how to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png\",\"width\":1063,\"height\":599},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WPF Tricks: Coloring Icons at Runtime\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/b9853c1d7f59ed409d4b93b5111f309a\",\"name\":\"Sebastian Thurm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/05\/thurm_sebastian-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/05\/thurm_sebastian-150x150.jpg\",\"caption\":\"Sebastian Thurm\"},\"description\":\"Sebastian Thurm is a graduate engineer for computer visualisation and works as a frontend developer and UX consultant for ZEISS Digital Innovation, Dresden. Recently he has been involved in various projects in the areas of trade, industry and energy management.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/ensebastianthurm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WPF Tricks: Coloring Icons at Runtime - ZEISS Digital Innovation Blog","description":"This post describes how to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary.","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\/en\/wpf-tricks-coloring-icons-at-runtime\/","og_locale":"en_US","og_type":"article","og_title":"WPF Tricks: Coloring Icons at Runtime - ZEISS Digital Innovation Blog","og_description":"This post describes how to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/","og_site_name":"Digital Innovation Blog","article_published_time":"2016-05-23T09:06:54+00:00","article_modified_time":"2020-09-25T07:18:31+00:00","og_image":[{"width":1063,"height":599,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png","type":"image\/png"}],"author":"Sebastian Thurm","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sebastian Thurm","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/","name":"WPF Tricks: Coloring Icons at Runtime - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png","datePublished":"2016-05-23T09:06:54+00:00","dateModified":"2020-09-25T07:18:31+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/b9853c1d7f59ed409d4b93b5111f309a"},"description":"This post describes how to color icons at runtime virtually any way you like, making different-colored icon sets unnecessary.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi.png","width":1063,"height":599},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wpf-tricks-coloring-icons-at-runtime\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/"},{"@type":"ListItem","position":2,"name":"WPF Tricks: Coloring Icons at Runtime"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/b9853c1d7f59ed409d4b93b5111f309a","name":"Sebastian Thurm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/05\/thurm_sebastian-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/05\/thurm_sebastian-150x150.jpg","caption":"Sebastian Thurm"},"description":"Sebastian Thurm is a graduate engineer for computer visualisation and works as a frontend developer and UX consultant for ZEISS Digital Innovation, Dresden. Recently he has been involved in various projects in the areas of trade, industry and energy management.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/ensebastianthurm\/"}]}},"author_meta":{"display_name":"Sebastian Thurm","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/ensebastianthurm\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2016\/05\/201605_WPF_Tricks_1_1_en_fi-600x338.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/cloud\/\" class=\"advgb-post-tax-term\">Cloud<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/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\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">easy<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">xaml<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">furious<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">WPF<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">WPF Tricks<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">color<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">runtime<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">control template<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">opacity mask<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">visual brush<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">visual<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/dot-net\/\" class=\"advgb-post-tax-term\">fast<\/a>"],"unlinked":["<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\">color<\/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\">fast<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 10 years ago","modified":"Updated 6 years ago"},"absolute_dates":{"created":"Posted on May 23, 2016","modified":"Updated on September 25, 2020"},"absolute_dates_time":{"created":"Posted on May 23, 2016 9:06 am","modified":"Updated on September 25, 2020 7:18 am"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/comments?post=795"}],"version-history":[{"count":6,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/795\/revisions"}],"predecessor-version":[{"id":1123,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/795\/revisions\/1123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media\/1125"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media?parent=795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/categories?post=795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/tags?post=795"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/topics?post=795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}