WP7 Emulator Skin Switcher v1.1 released – now containing 23 skins (Nokia, Samsung, HTC and more)

After the first release of my skin switcher last week I got replies from a lot of people asking for more skins of Samsung, HTC and other devices. I tried to get in contact with all the skin creators out there who had published a skin to ask if I could add it to the application. Luckily all said yes so I’ve included a lot of new skins. I also used my spare time in this holiday season to create some new skins that I couldn’t find online yet.

Version 1.1 contains a total of 23 emulator skins from popular devices as the HTC Titan, HTC Radar, HTC Trophy, HTC Mozart, HTC HD7, Samsung Focus S, Samsung Omnia W, Samsung Omnia 7, Samsung Focus, Fujitsu IS12T in green and black, ZTE Tania, Nokia Lumia 710 and the Nokia Lumia 800.

Big thanks to Jeff Wilcox, Jeff Blankenburg, Danijel Malik, Georg Kalus and Pedro Lamas for adding their skins to the application.

emulator skin switcher

You can download version 1.1 here now:

Update! version 1.2 is released and the project is moved to codeplex. you can find the newest version here: http://wp7emuskinswitcher.codeplex.com/

Total list of skins:

If you created a skin or want to create a skin that’s not included and you want to get it listed in the application yet let me know and I’ll add it for you including your name and a link to your blog or website.

emulator skin switcher 2

Here are some screenshots of newly added skins

fujitsuis12thtcradarhtctitansamsungfocusssamsungomniawztetania

If for some reason the application is not working and your emulator stopped working after usage of the application let me know and I’ll help you to get everything working again!

Happy coding!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Windows Phone 7 Emulator Skin Switcher 1.0 Beta

In the last few weeks several people started creating their own skins for the Windows Phone 7 Emulator. Switching between different skins was a lot of work by copying files manually to the emulator directory every time you wanted to switch. From now on this is not needed anymore because you can use the Windows Phone 7 Emulator Skin Switcher application I’ve created.

wp7EmulatorSkinSwitcher

You can download the application here: Download

Update! version 1.2 is released and the project is moved to codeplex. you can find the newest version here: http://wp7emuskinswitcher.codeplex.com/

This version is the first beta release with my first set of skins. I added 2 skins from Georg Kalus: the Blue Nokia Lumia 800 and the White/Pink Nokia Lumia 710. I’ve also included the Black Nokia Lumia 800 skin from Pedro Lamas

The complete list of skins included in the application now are:

I’m planning on adding more skins in the near future but didn’t have time for it yet. If you have skins I can use please let me know by comment or on twitter

lumia710whitelumia800pinklumia710black

 

Hopefully this will make your Windows Phone 7 projects even more fun to test!

Happy Coding

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Creating dynamic Windows Phone 7 live tile images client side

One of the best parts of windows phone that makes Windows Phone stand out are the live tiles. Microsoft enables you to do a few out of the box customizations to the live tiles but  when you want to go all out most people think you’ll need to generate the images on a server using ASP.NET and then send them to the application as a notification. This is not always the case, you can also create custom tiles client side running on your phone to show custom messages or imitate the outlook tile for example with a number of how many unread messages you have.

First lets sum up what you can do by default and after that we’ll go into going beyond this and creating even better live tiles by adding multiple images or multiple texts to a live tile using the colors and fonts of your choice.

By default you can set the following properties on a live tile

  • Title (shown in the bottom left)
  • Count (black circle with a number between 1 and 99)
  • BackGroundImage (image to show on your tile)
  • BackTitle (shown in the bottom left on the backside of the tile)
  • BackContent (piece of text shown on the backside of the tile)
  • BackBackGroundImage (Image on the backside of the tile)

Ok this is pretty cool but what if we want to make something like Runkeeper does in their app as shown in the following picture:runkeeper live tile

So how do we generate such image on the client side in Silverlight? The trick behind all this is that you can render a user control as a WriteableBitmap and store this image in the isolated storage of your phone so you can use it as the tile BackGroundImage. The final working codesample is linked at the bottom of this post but I’ll show all code to build this example in this blogpost.

We start of creating a new Silverlight for Windows Phone project. Normally I would use MVVM but for this example I want to make it as simple as possible to focus on the tile part.

We’ll create a new UserControl called “TileControl” which is going to be used as our live tile and a “TileData” class to be used for containing the data we’ll be showing on the  live tile.

   1: public class TileData

   2: {

   3:     public string Text1 { get; set; }

   4:     public string Text2 { get; set; }

   5:     public string ImageSource { get; set; }

   6: }

Create the TileControl, set it to 173 by 173pixels and set the background to use PhoneAccentBrush so the live tile has the color the user has selected. Lets make our designers happy and open up the TileControl in expression blend so our designers (or if you are a devigner you!) can design our live tile with dynamic data.

Add a few text boxes and a image to the control so you have something like this:

   1: <Grid x:Name="LayoutRoot" Width="173" Height="173" Background="{StaticResource PhoneAccentBrush}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="24"/>

   3:     <TextBlock Margin="0,64,-17,-3" TextWrapping="Wrap" FontSize="64" HorizontalAlignment="Right" Width="70" Foreground="White"/>

   4:     <Image Margin="6,55,0,13" Width="100" HorizontalAlignment="Left"/>

   5: </Grid>

In the Data window click the icon “Create sample data from class” and select the TileData class.

create sample data

Edit the sample data so we have some nice data to show. I used the following data:

   1: <CustomLiveTileExample:TileData xmlns:CustomLiveTileExample="clr-namespace:CustomLiveTileExample" 

   2: ImageSource="ApplicationIcon.png" 

   3: Text1="The first Text"

   4: Text2="9"/>

Now drag the fields from the test data window to the text and image control to bind them. After this your XAML should look like this and the design surface should already show a nice live tile with an image and 2 texts. In our code we’ll databind this control to a programmatically filled TileData object.

   1: <Grid x:Name="LayoutRoot" Width="137" Height="137" Background="{StaticResource PhoneAccentBrush}" d:DataContext="{d:DesignData /SampleData/TileDataSampleData.xaml}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="21.333" Text="{Binding Text1}"/>

   3:     <TextBlock Margin="0,50,-10,11" TextWrapping="Wrap" FontSize="48" HorizontalAlignment="Right" Width="70" Foreground="White" Text="{Binding Text2}"/>

   4:     <Image Margin="12,51,65,17" Width="60" Source="{Binding ImageSource}"/>

   5: </Grid>

blend tile

The live tile is ready so lets head back to the main page of our application and add the logic to set the live tile. To trigger the creation of the live tile I’ve added a button on the page and attached a click event. in the button1_Click method I’ll add all code needed to create the live tile.

   1: private void button1_Click(object sender, RoutedEventArgs e)

   2:         {

   3:             TileControl frontTile = new TileControl();

   4:             TileData tileData = new TileData() { ImageSource = "/ApplicationIcon.png", Text1 = "The first text", Text2 = "8" };

   5:             frontTile.DataContext = tileData;

   6:  

   7:             frontTile.Measure(new Size(173, 173));

   8:             frontTile.Arrange(new Rect(0, 0, 173, 173));

   9:             var bmp = new WriteableBitmap(173, 173);

  10:             bmp.Render(frontTile, null);

  11:             bmp.Invalidate();

  12:  

  13:             var isf = IsolatedStorageFile.GetUserStoreForApplication();

  14:             var filename = "/Shared/ShellContent/tile.jpg";

  15:  

  16:             if (!isf.DirectoryExists("/Shared/ShellContent"))

  17:             {

  18:                 isf.CreateDirectory("/Shared/ShellContent");

  19:             }

  20:  

  21:             using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))

  22:             {

  23:                 bmp.SaveJpeg(stream, 173, 173, 0, 100);

  24:             }

  25:  

  26:             var data = new StandardTileData

  27:             {

  28:                 BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute)

  29:             };

  30:  

  31:             ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), data);

  32:         }

First we’ll create a TileControl object called frontTile, then we’ll fill it with our tileData by creating a TileData object and setting the DataContext to tileData. After this we’ll create a WriteableBitmap and set it to 173 by 173 pixels. Well use the Render method to render the usercontrol as a bitmap.

After that we’ll check if the directory in the isolated storage exists and if it doesn’t we’ll create it. After that we’ll open the tile file and use the SaveJpeg method to save the WritableBitmap as a .jpg file (bit of a shame you can’t do png that’s why we’ve set the background color to the PhoneAccentColor). after saving the image the only thing we need to do is Call Create on the ShellTile and we’re done.

Lets run the app, press the button and there it is, our dynamically created livetile.

app1    app2

Download Sample project:

Happy coding!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Tutorial: How to use the Silverlight Toolkit transitions without writing XAML by using the Toolkit behavior extensions

In my last post I announced the new Codeplex project I’ve started called the Windows Phone Silverlight toolkit behavior extensions. In this post I’ll explain how to use the behaviors in this project in Expression Blend to create beautiful page transitions supplied by the Silverlight Toolkit for windows Phone without writing any code or XAML!

how to get started

Download the silverlight toolkit for windows phone and the Windows Phone Silverlight toolkit behavior extensions and install both libraries on your system.

After the installation start Expression Blend and create a new Windows Phone 7 Project.

In the projects window right click “References” and select “Add Reference”add reference

Select the Microsoft.Phone.Controls.Toolkit.dll file and press “Open”add reference 2

Select the PhoneToolkit.Extensions.Behaviors.dll and press “Open”add reference 3

You should now have Microsoft.Phone.Controls.Toolkit.dll and PhoneToolkit.Extensions.Behaviors.dll in your References list.add reference 4

Before the transition behaviors work you will have to change 1 thing in the code because that is just how the Silverlight Toolkit Transitions work. so open App.xaml.cs and locate the following Class: “PhoneApplicationFrame”PhoneApplicationFrame

And Change it to “TransitionFrame”TransitionFrame

Build the project and after building the new behaviors will be added to the Assets window.

behavior

You can drag and drop the new behaviors on your PhoneApplicationPage to enable the tilt effect or enable a page transition. In the Example below I’ve added the EnableTiltEffectBehavior to enable the tilting effect on every clickable usercontrol and I’ve added a TransitionTurnstileInBehavior to show a turnstile animation on entering the page and a TransitionTurnstileOutBehavior to show a turnstile animation on leaving the page.

objectsandtimeline

The transition behaviors have 2 properties where you can set the animation for forward and backward transitions. by default the most common animations are selected.properties

To test if everything is working drag a button on the content grid and add a second page to your application. The button should now have a tilt effect and you should have turnstile animations when navigating between the pages.

If you want to disable the tilt effect for a specific usercontrol you can add the SuppressTiltEffectBehavior on that control and the control will no longer have a tilt effect.

I’ve added a complete sample application showing all the transitions and tilt effect behaviors on the codeplex site of the Windows Phone Toolkit Behavior Extensions

If anything isn’t working contact me on twitter or post a comment

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Started a new Codeplex project: Windows Phone Silverlight Toolkit Behavior Extensions

Of all windows phone development that is done in the world I think almost everyone is using the Windows Phone Silverlight Toolkit you can get from Codeplex. This toolkit adds a lot of new controls and also other cool features as page transitions and a tilt effect on usercontrols so users will get more feedback when clicking in the UI.

This week I started working on a new project with a designer and he asked me how to insert the page transitions on a windows phone application page and I showed him that you’ll have to add a piece of XAML to your code and the page transitions will work. He asked me “Can’t I do this in the designer mode without touching any code?” I didn’t have any right answer for him so that’s why I’ve spend part of my weekend to build some behaviors that can be used to drag this functionality on pages in Expression Blend.

There are behaviors for every type of transition available in the silverlight toolkit. for each transitiontype there is an “in” and “out” behavior for entering and leaving the page. Besides the transition behaviors I’ve also created a behavior to turn the tilteffect on or off

  • EnableTiltEffectBehavior
  • SuppressTiltBehavior
  • TransitionRollInBehavior
  • TransitionRollOutBehavior
  • TransitionRotateInBehavior
  • TransitionRotateOutBehavior
  • TransitionSlideInBehavior
  • TransitionSlideOutBehavior
  • TransitionSwivelInBehavior
  • TransitionSwivelOutBehavior
  • TransitionTurnstileInBehavior
  • TransitionTurnstileOutBehavior

You can download the behaviors here: (important: you also need the silverlight toolkit for this to work)

http://phonetoolkitbehavior.codeplex.com/

On the codeplex site you’ll find a msi release containing the dll that you can include in your project to use these behaviors and I’ve also included a sample application. I’ll also upload the sample application to the marketplace so you can easily test out the performance etc without any trouble.

For a compete tutorial check this blogpost.

This is currently the first release so every feedback is welcome. please let me know by adding a comment here or contact me on twitter

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

New blog template

I got a bit bored with my old blog template so I finally switched to a new one that fitted me better. This new template is better readable and clean and I like the orange color that fits with my employer Avanade. The top picture is inspired by my work and passion for Windows Phone so that’s why I’ve chosen an Image of a Metro line. Winking smile

If you like my template it’s a free template for WordPress called “Twenty Eleven 1.2” and you can just download it from the template gallery in WordPress.

Enjoy!

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Switching Dark/Light theme in Blend for Windows Phone

Today a small tip on how to change the design view of your windows phone 7 application in Expression Blend so you can see it in light or dark theme or check how all the different accent colors look:

This is basic functionality but when I asked around I noticed most people don’t know about this feature so that’s why I wrote this blogpost.

By default in Expression Blend your app will show using the dark theme and the blue accent color. To see how your app looks in white just open the Device window by clicking “Window” –> “Device”

blend device window

When the device window is opened you can switch to the light or dark theme by clicking one of the icons. You can also select the accent color from the pulldown box on the right.

blend select white theme

The result:

blackwhite blend

Happy Coding! Designing!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter