The Windows Phone 7 Start screen default tiles like e-mail and agenda use the current Theme color with a visual and text in white. Depending on the theme color, whether it’s set to Dark or Light, white content will always on the Tile’s foreground color.
As I was working on a personal project this weekend I got into looking how to use this same approach for 3rd party apps. As it happens, it’s really easy to have your tile look like one of these default app tiles. Let’s first look at how a Tile is constructed. As explained in the section Push Notifications, in the UI Design and Interaction Guide for Windows Phone 7 document, a Start screen tile consists of:
Image source: UI Design and Interaction Guide for Windows Phone 7
There is something not mentioned in the document which is the fact that your tile image, when using transparency, also inherits from the theme color. So in fact you have these layers:
Now that we know this, the process to create a transparent Tile image that will display in the color of the current theme is really simple. For the example here I’m creating an image using Paint.net, an incredibly good program to do image manipulation (and it’s free!). You can use your favorite program to do this.
Create a new image file with the dimensions 173x173.
Delete the white background, press CTRL+A (to select), then DEL.
Create your tile visual by using white as the color. Because the background color will always be the theme color you can count on white always coming to the foreground no matter what Theme the user has chosen. I just decided to create a rectangle with a circle. Nothing fancy but it does not really matter for this post. Be creative and don’t follow my example here
Save the file as .PNG (in my case I named the file mytile.png). Paint.net gives you several options to save your PNG. Make sure you select something other than 24bit PNG since the latter does not allow you to save transparency. Not sure why this is though.
Open your project, or create a new one using Visual Studio 2010 (or Express edition).
Copy the newly created image into the project. Via Explorer Ctrl+C / In Visual Studio: Ctrl+V. Other option is to use the Add existing item option in the project properties. By default your project will contain an image called ‘Background.png’. You can delete this one. Select your new tile image file and set it’s Build Action to “Content”.
Go to Project properties, choose the newly added image as the “Background image”. Note: seems like a misleading name to me, wonder why they did not call it Tile background or something similar.
Save your project and run in the emulator or device. Pin your application to the Start screen. You should now have your white visual with the theme’s color applied. Notice the application name supplied in the project properties also appears as the topmost layer. As you can see below, my rectangle is displayed as expected using either a dark (horrible brown) or a light theme.
On the real device:
Easy isn’t it?
Yesterday we organized the first Microsoft Webcafe at the Palm Breweries in Steenhuffel. I was really happy to see familiar and lots of unfamiliar faces join this new informal web professionals get-together. Check out some of the pictures on our Facebook page.
Palm Breweries was quite a fitting location since in Belgium a café is automatically linked to beer and we have quite a tradition. Next events won’t always take place at a brewery but it did fit the context.
We started with a guided tour of the Palm Brewery, after which we had presentations by Microsoft and four partner cases. More information on the partner cases:
We would like to thank all partners for presenting their cases.
Here is a collection of links that we mentioned during the event, either in the session or when talking to folks after the sessions.
Next event, register today for Thursday February 17th event at Combell ‘Café’ in Gent.
Umbraco is an open source ASP.NET CMS framework, becoming very popular since it’s creation a few years ago. Last month, Microsoft together with Umbraco has announced the availability of an accelerator to help you move your Umbraco application to Azure.
The accelerator is, as the name says, accelerating your setup to have your Umbraco ready to run on the cloud on Windows Azure.
To learn more about the Azure Accelerator for Umbraco (yes, more than one link in this quick tip):
‘Quick tip’ posts are short, useful posts pointing to content and tricks that might otherwise go lost in a typical 140 chars tweet on Twitterverse.
Today the Windows Phone team launched the Visual Basic add-on for Windows Phone tools. Visual Basic can now be used to develop Silverlight application for Windows Phone. Do note that in this release Visual Studio 2010 Express for Windows Phone is currently not supported. Check out new code samples on MSDN and other notable resources in the below post.
‘Quick tip’ posts are short, useful posts pointing to content and tricks that might otherwise go lost in a typical 140 chars on Twitterverse.
Delay has a post up on his blog announcing the second release of the Silverlight for Windows Phone Toolkit. This second edition effectively doubles the number of controls provided for developers and designers to use on their Windows Phone 7 applications. Next to the new controls this releases also contains more documentation and some bug fixes. New controls include:
Link to Delay’s announcement post: http://blogs.msdn.com/b/delay/archive/2010/11/02/mo-controls-mo-controls-mo-controls-announcing-the-second-release-of-the-silverlight-for-windows-phone-toolkit.aspx?wa=wsignin1.0
Earlier this week, the media team released Internet Information Services (IIS) Media Services 4.0. As Chris Knowlton blogs, this latest release brings quite a number of new features, including low-latency delivery and support for multiple devices.
Quoting from Chris’ post:
One Encoding Format, One Server, Many Devices – including iPhone Using the same live H.264 streams you encode for Silverlight and other Smooth Streaming players running on PCs, Macs, Linux, Nokia S60 phones, Windows Phone 7, and set-top-boxes, IIS Media Services can now re-package those streams in real time for delivery to iPhone, iPad, and other Apple® iOS devices. It's as simple as clicking a checkbox. Under the hood, IIS Media Services re-packages (transmuxes) the H.264 and AAC content into the Apple HTTP Live Streaming format, which iOS devices natively understand.
One Encoding Format, One Server, Many Devices – including iPhone
Using the same live H.264 streams you encode for Silverlight and other Smooth Streaming players running on PCs, Macs, Linux, Nokia S60 phones, Windows Phone 7, and set-top-boxes, IIS Media Services can now re-package those streams in real time for delivery to iPhone, iPad, and other Apple® iOS devices. It's as simple as clicking a checkbox. Under the hood, IIS Media Services re-packages (transmuxes) the H.264 and AAC content into the Apple HTTP Live Streaming format, which iOS devices natively understand.
Read the full details on Chris’ post, and go on to download and install the latest bits.
IIS Media Services 4.0 is a free out-of-band release on top of Windows Server 2008, Internet Information Services.
Need assistance in getting around your Windows Phone 7 project? The Microsoft Innovation Center in Mons is organizing a Call for Projects with an incredible amount of supporting activities lined up:
The project call is open to all, do note the whole process and the training is done in French so you need to be fluent to get around. French speaking readers from Belgium and Luxembourg: this one is a no-brainer for you. Be fast to register with a concrete project is my recommendation!
Open to all residents or Belgium and Luxembourg.
As I blogged earlier, Internet Explorer 9 Platform Preview 6 is out. As with previous editions, the Platform Preview does not give you any UI like you get with the beta. However, there is a ‘secret’ switch you can use to give the Platform Preview the same UI features as the Beta.
Ars Technica has a post up with the steps you will need to follow in order to enable Beta UI features in the Platform Preview. Use at your own risk…
Link: IE9 Preview 6 available, now with secret Beta UI
Register for our new informal get-together for web professionals on November 25th 2010 in the Palm Brewery, in Steenhuffel.
Microsoft Webcafe is a new informal get-together for web and user experience professionals after work hours. The goal is to present a mix of news around Microsoft web related topics and give the opportunity for partners to present a project themselves.
Sessions are aimed to be short and to the point (10 - 15 minutes per topic), allowing for very different subjects to be covered in one evening.
During the first event we have chosen an applicable location: the Palm Brewery where you will get a guided tour before the start of the sessions.
Microsoft will bring an update on web technologies and programs, after which four of our partners will bring cases. These include: PurePlexity, Agency.com, Aaltra and Brainlane showcasing several technology implementations. To give you an idea: Smooth Streaming with Silverlight, cloud and Azure and rich applications. To get the details you’ll have to join us!
Hope to see you next week. It’s informal, it’s free.
During the Silverlight Firestarter event on December 2nd 2010, Scott Guthrie is set to deliver the opening keynote and show you the future of Siverlight. That’s right, the next version of Silverlight!
For Belgium, book your time to watch the keynote on December 2nd at 6PM. Register online and see Silverlight vNext in action.
In-dept training by top speakers
Following the keynote, the rest of the event is an in-depth training opportunity with top speakers like John Papa, Jesse Liberty, Dan Wahlin, Tim Heuer, Mike Cook, Jaime Rodriguez and others. If you are attending the session on live streaming make sure you take advantage of the fact that all sessions are open for questions.Sessions are being recorded and can be watched on-demand after the event as well.