Visually Located | Alternatives to OpacityMask

In Windows Phone Silverlight apps you had the ability to take a png image and change the color of the image with an OpacityMask. This is a really handy tool to have when you want to show different state to a user or use one image and have it work with different backgrounds. Where is an example:

     <StackPanel Orientation="Horizontal">

        <Image Source="Assets/appbar.book.png" Width="72" Height="72"></Image>

        <Rectangle Fill="Red" Width="72" Height="72" >

            <Rectangle.OpacityMask>

                <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/>

            </Rectangle.OpacityMask>

        </Rectangle>

        <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" >

            <Rectangle Fill="{StaticResource PhoneBackgroundBrush}" >

                <Rectangle.OpacityMask>

                    <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/>

                </Rectangle.OpacityMask>

            </Rectangle>

        </Border>

    </StackPanel>

This will give you the following three images:

This works really well except that it is pretty intensive on your phone to do this so I do not recommend doing a lot of these!

While this works great in Windows Phone Silverlight apps, this functionality does not exist in Windows Runtime (XAML apps for Windows Store and Phone 8.1). So what should you do? You have a few options.

BitmapIcon

If you wish to continue to use the image, you can use a BitmapIcon to display the image and change the color. Set the image with the UriSource property and then set the Foreground to the desired color! Be careful using the BitmapIcon because it will fill up all the space it is given so you’ll want to set the height and width of it, or it’s container explicitly.

    <StackPanel Orientation="Horizontal" Height="72">

        <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"/>

        <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"

                Foreground="Red"/>

        <Border Background="{StaticResource PhoneForegroundBrush}">

            <BitmapIcon UriSource="Assets/appbar.book.png" Margin="12"

                Foreground="{StaticResource PhoneBackgroundBrush}"/>

        </Border>

    </StackPanel>

Use an image vector

The first option is to use a vector of the image. Once you have the vector data, you display it in a Path element.

You most likely already have access to the vector of the image. You may have created the image with Photoshop, or you are using one of the awesome icons from the Modern UI Icon pack. The zip from Modern UI Icons contains the XAML needed to create an image, but you can also get it from the website! Using that XAML for the Path I can then recreate the three images above:

    <StackPanel Orientation="Horizontal">

        <Path Width="42" Height="33.7913" Stretch="Fill" Fill="White" 

              Margin="12"

              Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

        <Path Width="42" Height="33.7913" Stretch="Fill" Fill="Red" 

              Margin="12"

              Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

        <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" >

            <Path Width="42" Height="33.7913" Stretch="Fill" Fill="{StaticResource PhoneBackgroundBrush}" 

              Margin="12"

              Data="F1 M 22,46.9996C 26.4235,48.3026 34.4825,48.8053 37.2083,52.2153L 37.2083,32.9996C 34.4826,29.5896 26.4235,29.0869 22,27.7839L 22,46.9996 Z M 22,24.3078L 22,24.028C 26.4235,25.331 34.4825,25.8337 37.2083,29.2437L 38,29.4716L 38.7917,29.2157C 41.5174,25.8057 49.5765,25.303 54,24L 54,24.2798C 55.2286,24.6498 56,24.9716 56,24.9716L 56,27.9716L 59,26.8258L 59,50.9716C 59,50.9716 41.1667,52.2216 38,57.7633L 37.9999,57.7913C 34.8333,52.2496 17,50.9996 17,50.9996L 17,26.8538L 20,27.9996L 20,24.9996C 20,24.9996 20.7714,24.6778 22,24.3078 Z M 23.5,44.506L 23.5,41.3844C 27.269,42.243 32.4604,42.8187 35.5,44.7496L 35.5,47.8712C 32.4604,45.9402 27.269,45.3646 23.5,44.506 Z M 23.5,39.1212L 23.5,35.9996C 27.269,36.8582 32.4604,37.4338 35.5,39.3648L 35.5,42.4864C 32.4604,40.5554 27.269,39.9798 23.5,39.1212 Z M 23.5,33.6344L 23.5,30.5128C 27.269,31.3714 32.4604,31.947 35.5,33.878L 35.5,36.9996C 32.4604,35.0686 27.269,34.493 23.5,33.6344 Z M 54,46.9716L 54,27.7559C 49.5765,29.0589 41.5174,29.5616 38.7917,32.9716L 38.7917,52.1873C 41.5175,48.7773 49.5765,48.2746 54,46.9716 Z M 52.5,44.478C 48.731,45.3366 43.5395,45.9122 40.5,47.8432L 40.5,44.7216C 43.5395,42.7906 48.731,42.215 52.5,41.3564L 52.5,44.478 Z M 52.5,39.0932C 48.731,39.9518 43.5395,40.5274 40.5,42.4584L 40.5,39.3368C 43.5396,37.4058 48.731,36.8302 52.5,35.9716L 52.5,39.0932 Z M 52.5,33.6064C 48.731,34.465 43.5395,35.0406 40.5,36.9716L 40.5,33.85C 43.5395,31.919 48.731,31.3434 52.5,30.4848L 52.5,33.6064 Z "/>

        </Border>

    </StackPanel>

The vector data will scale up or down very nicely as well so you do not have to worry about multiple images!

Fonts

The third option is to use one of the built in symbol fonts like Segoe UI Symbol. This font allows for many options of symbols. It’s best to use a Character Map to see what is available. Because this option uses text elements, it is very easy to scale the icon up or down using the FontSize property!

    <StackPanel Orientation="Horizontal">

        <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;" 

                   FontSize="64" Margin="6"/>

        <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;" 

                   Foreground="Red" 

                   FontSize="64"  Margin="6"/>

        <Border Background="{StaticResource PhoneForegroundBrush}">

            <TextBlock FontFamily="Segoe UI Symbol" Text="&#xE114;"

                       Foreground="{StaticResource PhoneBackgroundBrush}"

                   FontSize="64" Margin="6"/>

        </Border>

    </StackPanel>

A forth option (which goes along with the third) is to create your own font. You can use Fontastic (thanks to Christopher Maneu for this suggestion) which will take SVG and convert to a font. Another option for creating custom fonts is Type 3.2 (thanks to Matt Duffield for this suggestion). I have not used these options, but I’m sure they work fine!

SymbolIcon

The last option is to use the SymbolIcon. This is a great option if you are using a “standard” icon. The SymbolIcon allows you to set a Symbol with plain, readable text!

    <StackPanel Orientation="Horizontal">

        <SymbolIcon Symbol="Camera" Margin="12"/>

        <SymbolIcon Symbol="Camera" Margin="12" Foreground="Red"/>

        <Border Background="{StaticResource PhoneForegroundBrush}" Height="52">

            <SymbolIcon Symbol="Camera" Margin="12" Foreground="{StaticResource PhoneBackgroundBrush}"/>

        </Border>

    </StackPanel>

The unfortunate part of the SymbolIcon is that you cannot set a size to it. You can however use the ViewBox control to scale the icon without any loss of quality!

    <Viewbox Width="100">

        <SymbolIcon Symbol="Camera" Margin="12"/>

    </Viewbox>

Hope that helps you out on your next project!

BitmapIcon

Use an image vector

Fonts

SymbolIcon

Related posts