Adrian Vinca's blog

SkyMap 1.5 Gets Mango Update, Adds Compass Support

adrianvinca — Fri, 07 Oct 2011 04:53:29 GMT

We’ve just published SkyMap 1.5, which is the first update that targets Windows Phone 7.5 (also known as mango).

This update adds the most wanted feature – compass support! It is the feature that we wanted to add right from the first version, but it just wasn’t possible on the previous versions of the Windows Phone OS.

You can find more details about the update here.

SkyMap 1.2 for Windows Phone

adrianvinca — Thu, 26 May 2011 08:59:03 GMT

For the last few months, I’ve been working with a friend of mine, Ciprian, on this app. A few days ago, we released our third version (1.2). We are really happy about this release and we hope our customers will share our excitement.

Our main focus in this release was the usability in the field (finally, we’ve got some good weather in Seattle, and that allowed us to spend more time using the application). We added a new map manipulation mode (rotation mode) that offers a much easier way to set the map orientation (which is very needed, because the current version of the OS doesn’t expose the compass functionality to applications).

In anticipation of the next Windows Phone OS release (code name Mango) we included a beta version of the Point To Sky feature, that uses the tilt sensor.

Another feature that we are really excited about is the Picture of The Day. NASA publishes one astronomy picture every day on the APOD website; those images are simply amazing, and they represent a great way to learn about the Universe.

Other new features:

flashlight (well, it really helps having a handy flashlight when watching the sky in complete darkness; and if you use the night mode, it will display a red color so that you don’t loose your eyes adaptation to darkness)
map orientation lock
help page

If you would like to find more about this release, you can check the following links:

http://skymaponline.net/wp7.aspx

http://skymaponline.net/blog/post/2011/05/24/SkyMap-12-for-Windows-Phone.aspx

Zune Clock 1.5

adrianvinca — Tue, 13 May 2008 12:14:00 GMT

A new evening away from GTA and a new version of the application. This time, I've added some media player capabilities to the player. I know, it may sound a little bit odd... or at least it did to me when somebody suggested me this on the forums. But it proved to be very easy to implement using the XNA. So finally, you can watch a clock while listening to some music on the Zune!

This time I won't post a photo because my camera is not currently charged.

You can download the latest version (and the older versions as well) from here:

http://cid-a912b1c0a524f973.skydrive.live.com/browse.aspx/Zune%20Clock

New features and improvements:

    - New feature: Media player
        - Up/Down adjusts the volume
        - Left/Right moves to the previous/next song
        - Displays the album art
        - Displays the artist and the song title
    - New feature: Can select a playlist to play it
    - New feature: Dim the background while in setting mode
    - Update: Changed some controls for the setting mode (to make space for the pause button - which was needed for the media player):
        - Click on the zune pad to enter the settings mode (previously it was the pause button)
        - Back button to exit settings mode (previousely also the pause button used to do that)
    - Bug: Fixed some possible crashes if the name of the background has non-latin characaters

Features:

- Clock
    - Displays the time
    - Displays the date
    - Allows setting the date/time
- Media player
    - Up/Down adjusts the volume
    - Left/Right moves to the previous/next song
    - Displays the album art
    - Displays the artist and the song title
    - Can select a playlist directly from the application (settings)
    - Can set the shuffle mode (settings)
- Custom background
    - Can specify any picture from the Zune as custom background (you need to have a few pictures first)

Controls:

- Back Button - exits the application
- Up/Down - Volume
- Left/Right - Previous/Next song
- Pause Button - Pause/resume
- Click on the zune pad - enters setting mode
    * Back - exits setting mode
    * Up/Down - increments the selected setting
    * Left/Right - cycles through the different settings (background, hours, minutes, seconds, days)
    * Click on the Zune pad - resets the current setting to the default value
        - When a playlist is selected - plays the selected playlist
        - When setting the time: sets the offset to 0 (so that you will see the hardware date/time)
        - When setting the background: sets the background to "No background"
    * Pause/Back - exits setting mode

Zune Clock - My first XNA application

adrianvinca — Fri, 09 May 2008 04:17:00 GMT

Zune Clock 1.1

Encouraged by the positive feedback I've received so far, I did my best to stay away from GTAIV during the weekend and did some more work on the Zune Clock. So, I've added a new feature: the the ability to customize the background.

    What's new in this version:
    - New feature: Background customization (you need to have a few pictures on the Zune)
    - Bug: Fixed a bug which caused the settings data to become corrupt in some cases
    - Bug: Performance improvements (application loops slower than initially - a clock doesn't need a very high refresh rate)
    - Update: Using white color for the settings (it makes the text more visible when having a custom background)
    - Update: The application version is displayed when in setting mode
    - Code fix: Fixed the sources so that they compile fine on Debug
    - Code fix: Refactored some of the settings code to make space for future settings

Zune Clock 1.0

A few days ago, I've decided to give a try to the XNA CTP which allows creating applications for the Zune. So, I've started going through the tutorials and I've decided to create a Clock application. I know, XNA is meant to be used for writing games... but I always wanted to have a clock on the Zune :). I was impressed to discover that the Zune has an internal clock, which works even when the Zune is shut down. The only issue I had was that the time was a little bit off, and there was no way to set the internal clock. So I've added the ability to "adjust" the time displayed. Basically, you define an offset which gets applied to the hardware clock. The value gets saved so that the next time when you start the application, it will still show the correct time.

Description: Simple clock which displays the date and time. It allows adjusting the date and time displayed (it doesn't modify the internal hardware clock). The value gets saved and loaded the next time you start the application.

Features:
- displays the time
- displays the date
- allows setting the date/time
- the date/time adjustment is persisted so that the next time you start it you don't have to adjust it again.

Controls:
- Back Button - exits the application
- Pause Button - enters setting mode
    * Up/Down - increments the selected setting
    * Left/Right - cycles through the different settings (hours, minutes, seconds, days)
    * Click on the Zune pad - resets the adjustment to 0 (so that you will see the hardware date/time)
    * Pause/Back - exits setting mode

I hope you will find this application useful.

EDITED: This article explains how to install Games on the Zune: http://www.zuneboards.com/tip-of-the-week/how-to-install-games-on-your-zune.html

How to detect if your code is being executed inside Expression Blend

adrianvinca — Fri, 27 Jul 2007 21:12:41 GMT

Introduction

In order to provide an editing experience as close as possible to the runtime, Expression Blend executes some of the user defined code (it instantiates controls, data sources, sets properties, etc.). But in some cases, you may want to avoid this behavior (if that code doesn't work properly when executed inside Blend or if it is a more time consuming experience).

This post explains how to detect if your code is executed inside Blend and provide an alternate implementation for that case. For example your datasource could connect to a database and extract the data, but, when running inside Blend, it could generate a minimal sample data which can be used for creating some data templates).

Solution

The following sample uses a custom TextBlock which displays a different message when the application is loaded in a designer (in our case Expression Blend):

	public class MyTextBlock : TextBlock
	{
		public MyTextBlock() : base()
		{
			if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
			{
				this.Text = "Design mode detected!";
			}
			else
			{
				this.Text = "No design mode";
			}
		}
	}

For further information you may check out the documentation for the DesignerProperties Class.

Expression Blend Beta 2 is available for download

adrianvinca — Wed, 31 Jan 2007 12:42:00 GMT

The new version can be donloaded from here. Here are some of the changes:

Drag & drop to instantiate resources from the resources panel
Better exception handling in the user code
Better exception displayed in the scene: now you can investigate the InnerException, which, in many cases, will give more hints about what was the cause of the exception
Font previews
Many bugs fixes

Expression Blend goes Beta!

adrianvinca — Mon, 04 Dec 2006 22:35:00 GMT

And it's coming with lots of new features, a completely new UI, and... a new name (previously it was known as Expression Interactive Designer)!

You may find more details on the Expression Team Blog.

But wait, there is more! A new CTP of Expression Design is available and... the final version of Expression Web! Also, a new member of the Expression family (Expression Studio) was announced today: Expression Media!

And... don't forget to check out the new Expression website for more details!

Check out Snoop - a very useful tool for debugging WPF applications

adrianvinca — Wed, 29 Nov 2006 13:42:00 GMT

Some time ago, Peter Blois posted "Snoop", a tool which I find really useful for debugging WPF applications. It allows you to:

Browse the visual tree of running WPF applications

Inspect properties of elements at runtime

Edit properties of elements at runtime

Inspect RoutedEvents that are occurring, including the elements that handle them

Magnify sections of the UI

Find and debug binding errors

You may find more info and downloads on the Snoop official web page:

http://www.blois.us/Snoop/

Meet Funny Face and Mad Cow

adrianvinca — Fri, 02 Jun 2006 23:07:00 GMT

Today I played a little bit more with Expression Graphic Designer... It was the first time when I used it more seriously for drawing things (I had used it before, but mainly for adjusting and stitching photos). So, this is what I managed to draw in about one hour...

Check out Onfolio - the new addition to the Windows Live Toolbar

adrianvinca — Sun, 12 Mar 2006 04:21:00 GMT

The new Windows Live Toolbar includes, for free, Onfolio, which is a very nice and useful feeds reader.

The features I like the most

Easy to add and organize feeds (there is a button on the toolbar to search for a feed in the current page)
Easy and fast to go through the news (just use the arrows to go up and down, keyboard shortcuts to mark the item as un read)
Easy to e-mail the selected item
Cool UI

For a more comprehensive list of features, you may take a look here.

The Windows Live Toolbar can be downloaded from here: http://toolbar.live.com/

One more thing... don't forget to add the Expression Blog to Onfolio ;)

How to use a custom ValueConverter in Microsoft Expression Interactive Designer

adrianvinca — Fri, 10 Mar 2006 04:10:00 GMT

One of the new databinding features in the March CTP of Microsoft Expression Interactive Designer is the ability to handle value converters. This article will explain how to databind 2 TextBox controls using a custom value converter which reverts the text.

Step 1 - Create a custom value converter

We will create a very simple value converter which reverts a string. We will define the custom converter class in the code behind file for Scene1.
So, copy paste the following code into the codebehind file (scene1.xaml.cs), after the closing tag for the Scene1 class.

	[ValueConversion(typeof(string), typeof(string))]
	public class ReverseStringConverter: IValueConverter
	{
		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
			string source = value as string;
			return ReverseStringConverter.RevertString(source);
		}
 
		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
			string source = value as string;
			return ReverseStringConverter.RevertString(source);
		}
	
		private static string RevertString(string source)
		{
			int sourceLength = source.Length;
			char[] destination = new char[source.Length];
			
			for (int iterator = 0; iterator < sourceLength; iterator++)
			{
				destination[iterator] = source[sourceLength - iterator - 1];
			}
			
			return new string(destination);
		}
	}

The class ReverseStringConverter implements the IValueConverter converter interface (click the link for more information). In our example, both methods, Convert and ConvertBack call the same private method RevertString which reverts the specified string.

Step 2 - Build project

Currently Microsoft Expression Interactive Designer requires the project to be built in order to use classed defined in the project. For that, in the main menu click on Project -> Build Project

Step 3 - Create 2 TextBox controls in the scene

Switch to the Scene1.
Bring up the Properties palette and create 2 TextBox controls in the scene.

Step 4 - Create the databinding using the custom value converter

We are going to databind the Text property of TextBox to the Text property of TextBox1, using the custom value converter defined previously (ReverseStringConverter). Select the first TextBox (named TextBox) using the Selection tool.
In the Properties palette, click on the Text property and select "Databind" from the menu. The Create Data Binding dialog will be displayed.
Click on the "Element Property". A
Select TextBox1 from the Scene Elements section B
Select Text from the Properties section. C
Click on "More Binding Options" expand button; this will show a few more advanced binding options.
Click on the double arrow button to set the Binding Direction as Two Way D
Click on the "..." button E next to the ValueConverter; the "Add value converter" dialog will be displayed
Expand the node coresponding to your project and select "ReverseStringConverter" from there. Press on the OK Button.
At this point, the Create Data Binding dialog should look like this:

Press the Finish button

Step 5 - Build and run the application

For that, go into the main menu and select Project->Test Project. Microsoft Expression Interactive Designer should build your application and a new window should be displayed
Type in the first textbox. You notice that the text is automatically updated in the second textbox (and it is reverted).
If you type in the second textbox, the first textbox will be updated
.

The March CTP of Expression Interactive Designer is available for download

adrianvinca — Fri, 10 Mar 2006 04:05:00 GMT

Your wait is over! The March CTP version of Microsoft Expression Interactive Designer is available for download. The download instructions are available on the Expression Blog here.

Displaying a graph using databinding and styles

adrianvinca — Tue, 07 Mar 2006 03:15:00 GMT

This example shows how databinding and styles can be used for displaying a set of connected nodes. To better illustrate this, I've added some basic interactivity: the nodes can be dragged using the mouse and databinding will update automatically the positions of the lines.

For simplicity, I will use a set of predefined nodes and a set of predefined lines connecting those nodes (but, the functionality could be easily exteded to create them dynamically).

I've used mainly Microsoft Expression Interactive Designer for creating this sample, but because of some limitations in the current CTP, I had to tweak a few times the code manually. The project can be opened and edited by Microsoft Expression Interactive Designer without any problems.

This time I won't create a step by step tutorial; I will explain shortly each part of the code and how everything works. So feel free to download the project, open it and Visual Studio or Microsoft Expression Interactive Designer, run it and look through the code.

Canvas as the Document Root

We will use a Canvas as the DocumentRoot. Canvas is a simple layout container which allows positioning children by specifying X-Y coordinates.

By default, Microsoft Expression Interactive Designer creates the DocumentRoot a Grid. In order to create a new scene with a Canvas, you need to uncheck the option "New Scene Creates a Grid" from the "Tools" menu. The scenes created after that will have a Canvas as the DocumentRoot

Defining a Style for a node

Styles represent a great way to reuse properties and events. This is what our style does:

Sets the Stroke to black
Sets the Fill to red
Sets the Width and Height to 50
Sets a RenderTransform which translates to left and up with 25 px. This will cause the ellipse to be centered around its top-left position.
Defines event handlers for MouseUp and MouseDown

	<Canvas.Resources>
		<Style x:Key="NodeStyle" TargetType="{x:Type Ellipse}">
			<Setter Property="Stroke" Value="#FF000000" />
			<Setter Property="Fill" Value="sc#1, 1, 0, 0"/>
			<Setter Property="Width" Value="50" />
			<Setter Property="Height" Value="50"/>
			<Setter Property="RenderTransform">
				<Setter.Value>
					<TransformGroup>
						<TranslateTransform X="0" Y="0"/>
						<ScaleTransform ScaleX="1" ScaleY="1"/>
						<SkewTransform AngleX="0" AngleY="0"/>
						<RotateTransform Angle="0"/>
						<TranslateTransform X="0" Y="0"/>
						<TranslateTransform X="-25" Y="-25"/>
					</TransformGroup>
				</Setter.Value>
			</Setter>
			
			<EventSetter Event="MouseDown" Handler="OnMouseDown" />
			<EventSetter Event="MouseUp" Handler="OnMouseUp" />
		</Style>
	</Canvas.Resources>

Adding a few nodes

Now, when we create a new node, we just need to specify its style and its position, because all the other properties and the event handlers are defined inside the style.

	<Ellipse x:Name="Ellipse" Style="{DynamicResource NodeStyle}" Canvas.Left="448" Canvas.Top="133" />

You can also add new nodes using Microsoft Expression Interactive Designer:

Draw a new ellipse
Right click on it Edit Style - Apply Resource - NodeStyle; this will apply the existing style to the ellipse
Microsoft Expression Interactive Designer creates by default some attributes; the problem is that, in this case they override the values defined by the style; so we need to clear those attributes (in the Properties palette, click on the property and select "Clear/Default"):
- Stroke
- Fill
- Width
- Height

Defining the lines

We will define a set of predefined lines, and databind the coordinates of the two points to the coordinates of the nodes (the attached properties Canvas.Left and Canvas.Top). Unfortunately, the only way to do this step manually, because Microsoft Expression Interactive Designer has currently some limitations (we know about this issues and we hope that we will improve them in the next releases):

it doesn't allow to create a Line object.
it doesn't support databinding to an attached property.

A Line object has two pairs of values representing the coordinates for the two points: X1, Y1 and X2, Y2. Here is how we can bind one of the ends to the coordinates of one of the ellipses:

	<Line Stroke="#FF000000"
		X1="{Binding ElementName=Ellipse, Path=(Canvas.Left), Mode=Default}"
		Y1="{Binding ElementName=Ellipse, Path=(Canvas.Top), Mode=Default}" 
		X2="50" Y2="150" />

The logic for moving the nodes

First of all we will add an event handler for the MouseMove event of the DocumentRoot element. We will name it OnMouseMove. This step can be done using Microsoft Expression Interactive Designer by selecting the DocumentRoot and using the Events palette to add the event.

We also need to add the events handler OnMouseUp and OnMouseDown defined in the style. Unfortunately this step needs to be done manually at this point.

The logic is simple: when we get a MouseDown notification, we store in a private field the sender (the node) of that notification; in the MouseMove handler we will update the position of that node. This is the final code:

	public partial class Scene1
	{
		
		public Scene1()
		{
			// This assumes that you are navigating to this scene.
			// If you will normally instantiate it via code and display it
			// manually, you either have to call InitializeComponent by hand or
			// uncomment the following line.
			// this.InitializeComponent();

			// Insert code required on object creation below this point.
		}

		private FrameworkElement movingObject = null;

		private void OnMouseMove(object sender, System.Windows.Input.MouseEventArgs e)
		{
			if (this.movingObject != null)
			{
				Point mousePosition = Mouse.GetPosition(this.DocumentRoot);

				this.movingObject.SetValue(Canvas.LeftProperty, mousePosition.X);
				this.movingObject.SetValue(Canvas.TopProperty, mousePosition.Y);
			}
		}


		private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
		{
			this.movingObject = sender as FrameworkElement;
		}


		private void OnMouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
		{
			this.movingObject = null;
		}
	}

This implementation could be improved (for example, if you click on the edge of an ellipse and move the mouse just a little bit, you will notice that the ellipse will "jump" so that it will be centered on the mouse pointer.

Running the application

Once you've got all the code in place, you just need to build and run the application. You can click and move different nodes and the lines will just update automatically.

Notes:

The attached project requires the Feb CTP of WinFX Runtime Components Feb CTP. The corresponding version of Microsoft Expression Interactive Designer is the March CTP (which should be released soon)
This sample shows a very simplistic implementation for the drag-drop behavior. A better approach is presented by Unni in his article - "Panel Like" system.

The new WinFX Runtime Components (February CTP) is available for download

adrianvinca — Thu, 23 Feb 2006 05:20:00 GMT

The February CTP of the WinFX Runtime Compoments is available for download.

Note: The current version of Microsoft Expression Interactive Designer doesn't support the new version of the WinFX runtime. For more details click here.

Top Ten UI Development Breakthroughs In Windows Presentation Foundation

adrianvinca — Thu, 23 Feb 2006 05:17:00 GMT

Here is an interesting article presenting some of the cool WinFx features:
Top Ten UI Development Breakthroughs In Windows Presentation Foundation

Creating a simple style with one trigger

adrianvinca — Thu, 16 Feb 2006 05:11:00 GMT

This article describes how to create a simple style with one trigger in Microsoft Expression Interactive Designer. We will create a blue rectangle which becomes red when the mouse is over it.

Step 1 - Create a rectangle

Draw a rectangle using the "Rectangle" tool from the Tools palette
Click on the "Selection" tool on the tools palette

Step 2 - Clear the Fill property

EID by default sets a Fill to your rectangle which would override our Style settings, so we need to delete that property (if you switch to the xaml view, you will notice that there is a Fill attribute specified for the rectangle):
In the Properties palette, Click on the Fill property and Select "Clear/Default" -
this should clear the property

Step 3 - Create a Style for the rectangle

In the timeline, right click on your rectangle->Edit Style->Create Empty Style (usually you should be able to do this in the scene, but now, because the Fill property is not set, the rectangle may not selectable in the scene - known issue)

Click "Ok" in the "Create Style Resource" dialog

Step 4 - Set a default Fill for the rectangle inside the Style

Bring up the "Timeline" palette - note that we are currently editing the style (the node displayed should be "Style"). In order to get the mouse events at runtime, our rectangle will need a Fill; so we will set a Fill in the Style.

In the Appearance palette, set the Fill to "blue" (because we are in the Style editing mode, this will create a Setter inside the style)

Step 5 - Add a Trigger for the IsMouseOver

Click on the "Create New State" button; a new tab called "[No Triggers]" is displayed in the timeline; Click on it
Bring up the "Timeline Properties" palette (using the "View" menu)
Create a new trigger: Click on the "Add" button in the "Timeline Properties" to add a new trigger; in the first textbox type "IsMouseOver" and "true" in the second one; now the tab is called "IsMouseOver"
Ensure that the "IsMouseOver" tab is selected and change the "Fill" color in the "Appearance" palette to your desired color (e.g. "red")
Click the "Return Scope To Root" button (in the Timeline palette) to end the style editing mode

The final xaml

The final xaml looks like:

	<Grid.Resources>
		<Storyboard x:Key="OnLoaded"/>
		<Style x:Key="RectangleStyle1" TargetType="{x:Type Rectangle}">
			<Setter Property="Fill" Value="sc#1, 0, 0, 1"/>
			<Style.Triggers>
				<MultiTrigger>
					<MultiTrigger.Conditions>
						<Condition Property="IsMouseOver" Value="True"/>
					</MultiTrigger.Conditions>
					<Setter Property="Fill" Value="sc#1, 1, 0, 0"/>
				</MultiTrigger>
			</Style.Triggers>
		</Style>
	</Grid.Resources>

<Rectangle Stroke="#FF000000" Style="{DynamicResource RectangleStyle1}"
	Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
	MinWidth="0" MinHeight="0" Margin="128,99,183,202" x:Name="Rectangle"
	RenderTransformOrigin="0.5,0.5"/>

Creating a simple master details list

adrianvinca — Wed, 15 Feb 2006 13:37:00 GMT

This article describes how to create a master details list using Microsoft Expression Interactive Designer (and guess what: no code needed!). We are going to use databinding to achieve this.

The data-source

We will use a simple xml, containing the list of products from the Expression family, and a short description for each of them. Download the attached "products.xml" and save it on your local machine.

Start Microsoft Expression Interactive Designer. We will use the empty project created by default

Add products.xml as an XML Data source. For that, in the "Data" palette, click on the "Add XML Data Source" and Browse to the "products.xml". Press Ok. Now the Data Palette will show the new data source (its default name is "ProductsDS").

The master list

Expand the "ProductsDS" data source and "Product[n]" node on the scene. Choose ListBox from the context menu. Press "Ok" at the first dialog; in the second one, uncheck "Description" (we want to show only the name in the list) and press Ok. At this point, you should have a list displaying the names of the products.

The details

We want to display the description of the selected item in a separate TextBox.

Create a TextBlock control from the Library Palette

In the "Properties" palette, click on the "Data Context" property and select "Databind". Click on the "Element Property" button, select the "ListBox" as the scene element (left side) and "Selected Item" as the property (right side). Press "Finish". This way we set the Data Context to the Selected Item of the Listbox.

In the "Properties" palette, click on the "Text" property and select "Databind". Click on the "Explicit Data Context" button and expand the tree and select "Description". Press Finish. This way we specify what exactly we want to display as the Text.

Run the project

The only thing left: run the project (In the main menu, Project click on "Run Project"). The application will be compiled and executed. The Description textbox shows the Description of the selected item.

Why is the textbox empty in Expression Interactive Designer ?

That's because, by default, there is no item selected in the list. To do that, select the listbox and set the SelectedIndex property to 0 (by default it is -1).