Setting visibility based on wp7 themes
Intro
The Technical Certification Requirements for Windows Phone 7 applications state the following:
5.5.2 – Content and Themes
Application content, such as text and visual elements, must be visible and legible regardless of the phone theme. For example, if the phone theme changes from black background to white background, the text and visual elements of your application must be visible or legible.
This means that everything in you application, including images, should be well visible in the dark and light theming of the phone. Handling dark/light support is very easy.
Dark and Light
Often companies have a special version of their logos for different situations (Bing for example). For this demo I’ve created two logos, a black and a white one. The white logo should be used when the theme is set to dark, the other when a light theme has been selected.
I’ve dropped these images into Expression Blend and grouped them together in a Grid control (Ctrl+G ). This grid is placed in the title panel, which resulted in the following XAML:
<StackPanel x:Name="TitlePanel" Grid.Row="0">
<Grid>
<Image Source="Logo-Black.png" />
<Image Source="Logo-White.png" />
</Grid>
</StackPanel>
To get the white logo to be only visible when the dark theme is set, select the image of the white logo. With the image selected click on the “Advanced options”-peg:

Now, go to “System Resource” and select the “PhoneDarkThemeVisibility” resource.

At this point a green rectangle is placed around the visibility property of the images letting you know a resource is set on that property.
To get the same results for the dark logo, repeat the process on that images. But select the “PhoneLightThemeVisibility” instead.
Testing
To test the results right in Expression Blend, got to the “Device” tab. On this tab you can set different device settings, including the Accent Color and the Light or Dark themes.

Switching from dark to light and back should result in the images below.

Wrap-up
Setting the visibility like this can be done on every element in your XAML. And whenever you need to use the visibility for other purposes, there’s a similar resource for the Opacity.
metro colors for photoshop
I did some designing for a Windows Phone 7 App this week. I wanted to test some graphics using the accent colors. I’ve saved the color swatches I use.
If you’re using Photoshop or Illustrator and would like to use them too, you can download them here:
Windows Phone 7 app – New Kids Button
Today my new app was published to the Windows Phone Marketplace. The application shows a big red button. When this button is pressed a quote from the movie and TV series of New Kids is played.
In this I application I wanted to try a few things. First, I wanted to see how to create a trial version of an application with possibilities to buy the app. Next I added a couple of behaviors to make it very easy to share a link to the application in various ways. The main goal of all these is ease of use for the developer and reusable. For example, a lot of times you’ll need a link to the marketplace, navigate to a URL or let the enduser write a review.
Another thing I would like to build is a localized app. The first version of this app is in Dutch only. I’m working on the German version. There will be an English version too, although this will contain the Dutch quotes.
Trial version
For the trial version of the application I wanted to show a MassageBox after a few taps on the button. The MessageBox should have a link to the marketplace to directly buy the app.
“You are using the trial version of the New Kids Button application. The full version contains more quotes!
[Buy now] [Continue trial]”
Another thing that I’ve added is a behavior that sets the visibility of the element it is applied to based on whether the application is running in trial mode or not.
Other behaviors
The first behavior continues a bit on the trial version. The behavior is used to navigate to the details of the application in the marketplace. All you need to do is place this on a button and it’s ready to go.
Because getting people to review your application is crucial to a successful app you’ll need to fire up the review task somehow. One behavior in this application does just that. Attach it to a button and it opens the review screen when it is pressed.
Sending an email from the application needs to done quite often too. A behavior that fires up the email task is used in the app. You can set the body, subject and addressee of the email.
Another behavior takes a URL as a parameter. When it is placed on a button it can be used to open a browser windows and show that URL.
The last one is my personal favorite. Sharing a link to your app on a social network is a great way to promote your application. This behavior uses the ShareThis API to share a link on a lot of different networks.
You can download this behavior here: TimmyTools.Wp7.Behaviors.zip
A few other links
Link to the app in the marketplace : http://timmykokke.com/NewKidsApp
Twitter: @NewKidsApp
Email: NewKidsApp@hotmail.com
Sounds on Windows Phone 7 – KnockOnWood
![]()
Last week my KnockOnWood Windows Phone 7 app was released in the marketplace. The basic idea of the application is that it gives you something to knock on if no real wood is available. In other words, it should play a sound effect when the screen is touched.
From Wikipedia:
Knocking on wood, and the spoken expression “knock on wood,” are used to express a desire to avoid “tempting fate” after making some boast or speaking of one’s own death.
In this application I wanted to try out to work with sounds for another application I’m working on. I had only a few requirements for this application:
- Multitouch. The sound should be triggered even if the screen is touched already.
- Fast. You should not have to wait for a sound to finish playing when you tap the screen. Just play it immediately.
Multitouch
Because of requirement 1, Multitouch, I decided to go for the static Touch class instead of using normal mouse events. To handle touches to the screen you’ll have to subscribe to the FrameReported event. I’ve added the following line to the constructor.
Touch.FrameReported += this.TouchFrameReported;
I figured a sound should only be played if a touch point is added to the screen. So I’ve created a private field _current to keep track of the number of touch points. If the first, or primary, touch point is taken off the screen (TouchAction.Up) this number should be reset to 0. If the number of touchpoints at a certain moment exceeds the stored number the sound is played.
private void TouchFrameReported(object sender, TouchFrameEventArgs e)
{
int newcurrent = e.GetTouchPoints(this.LayoutRoot).Count();
if (e.GetPrimaryTouchPoint(this.LayoutRoot)
.Action == TouchAction.Up)
{
newcurrent = 0;
}
if (newcurrent > this._current)
{
// play sound
}
this._current = newcurrent;
}
Sound
At first I thought about using a single media element to play the knocking sound. But, with the first few tests it became clear a media element isn’t fast enough. Starting, stopping, rewinding and playing again didn’t work as easy as I hoped. I had to turn over to XNA for playing sounds.
Playing a SoundEffect when the screen is touched was still not fast enough… So, I tried SoundEffectInstance, which holds an instance of SoundEffect ready to be played. This worked a lot better, but stopping, rewinding and starting an instance was not completely right. Tapping on the screen wasn’t quite right.
Because I wanted to play the sounds as fast as possible I’ve came up with the following solution. I’ve created an array of SoundEffectInstance and cycled through that on every tap. Because the knocking sound is pretty short, I’ve set the buffer size to 10 instances. This didn’t cause anything notable what tapping the screen.
Throughout the code I use a constant and two fields:
private const int BufferSize = 10; private readonly SoundEffectInstance[] _soundEffectInstances; private int _currentInstance;
In the constructor the _soundEffectInstances array is constructed and filled with instances of a SoundEffect.
this._soundEffectInstances = new SoundEffectInstance[BufferSize];
var effect = this.LoadSound("woodknock.wav");
for (int i = 0; i < BufferSize; i++)
{
this._soundEffectInstances[i] = effect.CreateInstance();
this._soundEffectInstances[i].IsLooped = false;
}
The LoadSound method takes a path and filename of a content file in the solution, reads it and returns a SoundEffect.
private SoundEffect LoadSound(string path)
{
using (Stream stream = TitleContainer.OpenStream(path))
{
return stream != null ? SoundEffect.FromStream(stream) : null;
}
}
When the screen is tapped, the TouchFrameReported event handler is called. In this method I did all the playing from the array of sound instances and keeping track of which instance to play.
private void TouchFrameReported(object sender, TouchFrameEventArgs e)
{
int newcurrent = e.GetTouchPoints(this.LayoutRoot).Count();
if (e.GetPrimaryTouchPoint(this.LayoutRoot)
.Action == TouchAction.Up)
{
newcurrent = 0;
}
if (newcurrent > this._current &&
this._soundEffectInstances != null &&
this._currentInstance < BufferSize &&
this._soundEffectInstances[this._currentInstance] != null)
{
this._soundEffectInstances[this._currentInstance].Play();
this._currentInstance++;
if (this._currentInstance >= BufferSize)
{
this._currentInstance = 0;
}
}
this._current = newcurrent;
}
Wrap-up
Playing one sound at a time without having to deal with speed and responsiveness is not that hard. Playing multiple instances is a bit harder. But, as you’ve just seen, can be done with only a few lines of code.
If you have a Windows Phone, please give the application a try and show your support by rating it. The KnockOnWood application can be found in the marketplace.
For future tutorials on Windows Phone, Silverlight and Expression Blend please subscribe to the rss feed or follow me on Twitter (@Sorskoot).
Second Windows Phone 7 app–Zwaailicht
Today, my second Windows Phone 7 app, Zwaailicht, has passed certification and is available in the Marketplace. The application shows information about emergencies in the Netherlands, based on the P2000 system. There are a couple of sites that show this information about Police, Fire and Ambulances. When you hear a siren somewhere, you can check what’s going on in the neighborhood. Or you can see what has happen in your region when you weren’t t
here.
Zwaailicht helps you choose one of the many feeds of http://www.alarmeringen.nl. Which was kindly enough to made their feeds available on a Creative Commons-license. The application gives you 4 options to base your feed on.
- City
- Region
- GPS
- Nationwide
The application contains a list with almost all Dutch cites you can scroll through. To find the city you are looking for a bit faster you can use the searchbox on top to filter the list.
The region selection is a much smaller list of the regions the Dutch emergency services work in.
Zwaailicht can also find a city based on your current GPS location. It uses the Bing Geolocation service to do this. Zwaailicht sends your current GPS location to this services which returns your current address. Zwaailicht uses the city from this address to get a new feed.
The application uses Teleriks Rad Controls for Windows Phone for navigation, showing lists and filtering them. This took away lots of work in the design of the application and added a lot of smoothness and animations.
For the design itself I choose to stick to the Metro theme as much as possible. I added a couple of backgrounds to make the application stick out a little more. I used the default animations as much as possible.
The application failed certification the first time. Besides correctly configuring the manifest file in the project to contain its capabilities, like GPS in this case, it also needed to include a privacy policy. I’ve added a this to the about screen. In this I explain the data captured from the GPS is not used for anything else that getting the current city. Added the privacy policy was enough to get it certified the second time.
The application can be downloaded here. Don’t forget to leave a review if you like it. If you don’t, please send me an email or tweet and I might add your suggestion to the next version.
First Windows Phone 7 Application
Duck’n’Cow
My first Windows Phone 7 application is available in the marketplace, Duck’n’Cow. Feel free to download and play with it (and rate it of course
).

I build the application to try some of the features of the Windows Phone. In this application I focused mainly on the accelerometers.
The application shows a Duck and a Cow, hidden in a circle. When you shake the phone the duck pops up and you hear it quack. When you turn the phone upside down, you’ll see the cow pop up.
Idea
I wanted to create a funny looking application that could be used to express your feelings about something when attending a presentation. A positive, cheering and green, action when you like something and a negative, red, action when disliking what is being told. But with a wink. Just a simple thumbs up or down wasn’t fun enough. So I decided to go for a moo and a quack, which automatically led to duck and a cow.
Gestures
The application uses to gestures, shaking and turning upside down. The turning upside down reminds of the nostalgic cow-in-a-box toys. But the gesture also resembles turning your thumb down to express dislikeness. The shaking motion is inspired by cheering and applauding.
I started off by reading the accelerometer data myself. By calculating the change of the accelerometers in X,Y and Z directions I was able to detect a shaking motion. By reading the Y accelerometer I was able to tell if the phone was turned upside down. Very soon I ran into issues whit this method, because the raw data returned by the accelerometers was too course (?!). I needed some kind of filtering to smooth things out a little. When looking around to find the best approach I came across the ShakeGesture library, which is build on the AccelerometerHelper library. Both these libraries helped my abstracting out the raw accelerometer data and use filtered events to get the data right.
Graphics and Xaml
As soon as I knew I was going to use the concept of a duck and a cow I started sketching. Below is the original sketch.
I’ve digitized the sketch in Adobe Illustrator to be able to scale it to any size so I could use the same image for all the places where tiles were needed, like the live-tile or the tile in the marketplace.
The first version of the application only contained this image. I’ve added it as .png in expression blend. A couple of people I’ve showed the app to told me they’d rather see some animation. So I took the image apart and separated into a circle, the duck and the cow. And added the animations in Expression Blend.

I’ve created a UserControl to make the switching between states a little more convenient. The control contains 4 states, duck, cow, both and none.
Wrap-up
That’s it about the app for now. If you’ve got a windows phone yourself, feel free to try the app. You can download it through here.
To stay up-to-date about the application you can follow the app on twitter: @DuckAndCow . For comments, bug or feature requests, send me an email at DuckAndCow[at]hotmail[dot]nl.
To be informed about anything else that’s going on my blog, follow me on twitter (@sorskoot) or subscribe to the RSS feed.

