Skip to content

Fun Theme-Friendly Windows Phone Icon

When designing a “You are here” icon for the map in ShopSavvy (download now on iPhone, Android and Windows Phone 7. It’s free and super awesome), I decided to try something a little different. Because ShopSavvy is a theme-compliant application, I thought it might be fun to have the “you are here” icon be representation of the user’s actual phone.

So I created a little XAML icon that is a very rough approximation of the front Windows Phone 7 screen. I used shapes and theme-variant brushes so that the icon changes to represent whatever theme the user has in place on their phone.

Because the the icon is so small (48-by-80 px), I used only basic shapes and one custom path shape to represent the “maps” application. I also did everything on a “Canvas” in order to try to trim off as much layout computation time as possible. You could make it with a Grid and then scale it to your heart’s content. Probably won’t make a huge difference, but I’m paranoid about resources in my phone apps these days.

Here are a couple examples of how the icon could look, depending on the user’s theme choice:

image  image  image

image  image  image

All from the same XAML.

For the ShopSavvy version, I put a tiny little ShopSavvy icon at the top. In the code below, I took it out so the top right-hand will simply be a blank box. Or you would put a tiny version of your own app icon there.

Themed Windows Phone 7 Icon
  1. <Microsoft_Phone_Controls_Maps:Pushpin>
  2.     <Border BorderBrush="#FF9B9B9B" BorderThickness="1"
  3.             HorizontalAlignment="Center" Height="80"
  4.             VerticalAlignment="Center" Width="48"
  5.             CornerRadius="4" Background="Black">
  6.     <Canvas>
  7.         <Ellipse Fill="#FFE4E4E4" Height="3"
  8.                     Stroke="Black" Width="3"
  9.                     StrokeThickness="0"
  10.                     Canvas.Top="71"
  11.                     Canvas.Left="6"/>
  12.         <Ellipse Fill="#FFE4E4E4"
  13.                     Height="3" Stroke="Black"
  14.                     Width="3" StrokeThickness="0"
  15.                     Canvas.Top="71" Canvas.Left="22"/>
  16.         <Ellipse Fill="#FFE4E4E4" Height="3"
  17.                     Stroke="Black" Width="3"
  18.                     StrokeThickness="0"
  19.                     Canvas.Top="71" Canvas.Left="37"/>
  20.         <Rectangle Height="62" Canvas.Left="3"
  21.                     StrokeThickness="0" Canvas.Top="5"
  22.                     Width="40" RadiusX="1"
  23.                     RadiusY="1"
  24.                     Fill="{StaticResource PhoneBackgroundBrush}"/>
  25.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  26.                     Height="13" StrokeThickness="0"
  27.                     Width="13"
  28.                     Canvas.Left="7" Canvas.Top="9" />
  29.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  30.                     Height="13" StrokeThickness="0" Width="13"
  31.                     Canvas.Left="21" Canvas.Top="9" />                
  32.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  33.                     Height="13" StrokeThickness="0" Width="13"
  34.                     Canvas.Left="7" Canvas.Top="23" />            
  35.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  36.                     Height="13" StrokeThickness="0" Width="13"
  37.                     Canvas.Left="21" Canvas.Top="23" />           
  38.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  39.                     Height="13" StrokeThickness="0" Width="27"
  40.                     Canvas.Left="7" Canvas.Top="37" />                        
  41.         <Ellipse Height="3" Fill="{StaticResource PhoneForegroundBrush}"
  42.                     Stroke="Black" Width="3"
  43.                     StrokeThickness="0"
  44.                     Canvas.Top="10" Canvas.Left="37" />                            
  45.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  46.                     Height="13" StrokeThickness="0"
  47.                     Width="13" Canvas.Left="7" Canvas.Top="51" />
  48.         <Rectangle Fill="{StaticResource PhoneAccentBrush}"
  49.                     Height="13" StrokeThickness="0"
  50.                     Width="13" Canvas.Left="21" Canvas.Top="51" />
  51.         <Ellipse Fill="White" Height="7" Stroke="Black"
  52.                     StrokeThickness="0" Width="7"
  53.                     Canvas.Top="12" Canvas.Left="10"/>
  54.         <Rectangle Fill="White" Height="5" Stroke="Black"
  55.                     StrokeThickness="0" Width="7"
  56.                     Canvas.Left="10" Canvas.Top="27"/>
  57.         <Rectangle Fill="White" Height="5" Stroke="Black"
  58.                     StrokeThickness="0" Width="5"
  59.                     Canvas.Left="28" Canvas.Top="43"/>
  60.         <Rectangle Fill="White" Height="2" Stroke="Black"
  61.                     StrokeThickness="0"
  62.                     Canvas.Left="21" Canvas.Top="46" Width="5"/>
  63.         <Path Data="M226.1875,316.1875 L230.5,321.5 L232.75,322 L234.25,324 L235.5,325.5 L236.75,327.25 L238.875,328.375 L238.9375,316.125 z"
  64.                 Fill="White" Height="12.25"
  65.                 Stretch="Fill" Stroke="Black"
  66.                 StrokeThickness="0" UseLayoutRounding="False"
  67.                 Canvas.Left="21.2"
  68.                 Canvas.Top="51.1" Width="12.751"/>
  69.         <Rectangle Fill="White" Stroke="Black"
  70.                     StrokeThickness="0" Width="7" Height="5"
  71.                     Canvas.Left="9" Canvas.Top="55"/>
  72.         <Ellipse Fill="White" Height="6"
  73.                     Stroke="Black" StrokeThickness="0"
  74.                     Width="6" Canvas.Top="26" Canvas.Left="24"/>
  75.                         
  76.     </Canvas>
  77. </Border>
  78. </Microsoft_Phone_Controls_Maps:Pushpin>

Not much. Just something fun that I thought might be fun to share

Tags: