How to colorize Segoe MDL2 Icons in WPF? -


i looking way add colour segoe mdl2 icons. glyphs in application textblock resources, defined this:

<textblock x:key="pensymbol" x:shared="false" fontfamily="segoe mdl2 assets" text="&#xe76d;" fontsize="16" textoptions.textrenderingmode="grayscale"/> 

the effect i'm after 1 in left 3 icons: sketchpad toolbar

this screenshot of toolbar in window 10 sketchpad (after applying creators update).

edit: know how change text colour, trying figure out how "partial fill"-effect (blue, black , yellow in screenshot).

edit2: necessary display 2 different glyphs achieve effect. glyphs necessary background added segoe mdl2 font in last update. mm8 pointing me in right direction.

xaml:

<style x:key="symboltext" targettype="{x:type textblock}">     <setter property="fontsize" value="16"/>     <setter property="uselayoutrounding" value="true"/>     <setter property="textalignment" value="center"/>     <setter property="verticalalignment" value="center"/>     <setter property="fontfamily" value="segoe mdl2 assets"/>     <setter property="textoptions.textrenderingmode" value="grayscale"/> </style>  <stackpanel orientation="horizontal">     <grid margin="4">         <textblock text="&#xe88f;" style="{staticresource symboltext}" foreground="orangered"/>         <textblock text="&#xe76d;" style="{staticresource symboltext}"/>     </grid>     <grid margin="4">         <textblock text="&#xf0c6;" style="{staticresource symboltext}" foreground="lightgreen"/>         <textblock text="&#xed63;" style="{staticresource symboltext}"/>     </grid>     <grid margin="4">         <textblock text="&#xe891;" style="{staticresource symboltext}" foreground="lightblue"/>         <textblock text="&#xe193;" style="{staticresource symboltext}"/>     </grid> </stackpanel> 

result: enter image description here

set foreground property brush:

<textblock x:key="pensymbol" x:shared="false" foreground="red" fontfamily="segoe mdl2 assets" text="&#xe76d;" fontsize="16"/> 

othwerwise layering , colorization effects can achieved drawing glyphs directly on top of each other stated in documentation on msdn: https://docs.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font

enter image description here


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -