Dynamically Changing Icon Color in Windows Phone with Metro Studio

Here I'm going to demonstrate how to change Icon Color in a Windows Phone app according to the Phone's Accent.

Normally PNG Images are used for Icons. Alternatively, XAML for these images can be used to make them more flexible. Here is an example of how this can be done using Metro Studio 2 from Syncfusion.

Tools Needed:
1. Windows Phone 8 SDK
2. Metro Studio 2 (http://www.syncfusion.com/downloads/metrostudio)
Metro Studio Contains numerous customization enabled metro style Icons.

Here's What we gotta do:

Create a new Icon in Metro Studio 2 (download from the above link).

Metro Studio has a large number of Icons distributed in many categories. Here I am going to select the first Icon: Add-New & click on the Edit Icon as shown.

On the Edit Screen, customize your Icon & then select the XAML option on the bottom right of the windows.

It shows the XAML code for your Icon. Copy it & paste it in your Windows Phone Solution. Replace the <Image /> tag in your WP Solution (which you were previously using for your Icon) with this code & find "Fill" Attribute in the <Path /> tag & replace its value with {StaticResource PhoneAccentBrush}

It should look like something like this:

<Path Fill={StaticResource PhoneAccentBrush}/>

And its done, Now you have Icons dynamically changing according to the Phone's Accent/Theme Color.

Hope it helps.