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="" fontsize="16" textoptions.textrenderingmode="grayscale"/>
the effect i'm after 1 in left 3 icons:
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="" style="{staticresource symboltext}" foreground="orangered"/> <textblock text="" style="{staticresource symboltext}"/> </grid> <grid margin="4"> <textblock text="" style="{staticresource symboltext}" foreground="lightgreen"/> <textblock text="" style="{staticresource symboltext}"/> </grid> <grid margin="4"> <textblock text="" style="{staticresource symboltext}" foreground="lightblue"/> <textblock text="" style="{staticresource symboltext}"/> </grid> </stackpanel>
set foreground
property brush
:
<textblock x:key="pensymbol" x:shared="false" foreground="red" fontfamily="segoe mdl2 assets" text="" 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
Comments
Post a Comment