XAML Playground
about XAML and other Amenities

Diet Assistant: track your diet with your Windows Phone

2011-01-24T22:56:00+01:00 by codeblock

Capture3Some days ago I released my second application for the Windows Phone. Probably it mean something I had a Windows Mobile device for the last four years and I never tried to write a single row of code and since last December, when I got my brand new HD7, I already wrote and published two applications.

The true story is that the hard part in realizing an application for Windows Phone 7 is to find a good idea. Discarded the possibility of making something unique the sole thing that you can do is try to find something you know well and write it as good as you can. 

So, given that I'm on diet from an unmemorable time it is probably the thing I better know, so I said to myself: why don't write and app to track my weight? I minute after I was head down to write it and I hope someone can find it useful almost the same as I enjoyed to write it.

The application is made of few pages and of a main dashboard that collect all the data you record to display a number of important parameters. I've tryed to imagine what I would like to know: the weight from which I started, the weight I've still to burn and an estimation of when I should reach my goal. You can see these and some other parameters in the figure on the left side.
 
There are two things I really enjoyed: first of all creating the gauge on top of this page gave me a deep respect to Blend that has been my best friend for this purpose. I think I will write a post about how to create a similar graphical element in the next days.

The second have been to create the transitions between pages when you navigate from a page to another. All the application became very dynamic thanks to these animations and for some days I have continuously tryed them on my phone only for the pleasure of seeing them playing.

The software uses Sterling to store the samples you record during the diet. Thanks to it is was very easy to create a log of all the data for the purpose of showing the history. You can also write a comment for each sample to remember something happen during the week.

The application require a regular sampling so the best is to put a recurring alert in the calendar to remember the date. It is a very bad thing being not able to do this from the application itself. I hope in the future this become possible.

Thanks of every comment.

Remove Transformation from shapes in Blend

2011-01-24T13:49:54+01:00 by Andrea Boschin

Recently I'm working hard with Expression Blend to create some interfaces starting from some Illustrator mockups, made by a designer and also creating the user interface of some Windows Phone 7 applications I developed. One thing I've found annoying is that once you create a shape and you rotate it in the designer, Blend uses a CompositeTransform to render the shape in the XAML markup. If you are creating lot of elements (in my case they were the ticks of a gauge) you can get lot of transformations that the plugin or the phone have to render. And to me (particularly from my developer side), this is no a good thing since many times a rotated rectangle might be represented as a Path instead of using the CompositeTransform.

After realizing that creating the shape by hand is not an option I searched hard the options in the menu items because in my mind it was obvious to have a "Make transform static" option. But it simply does not exists (or at least I was unable to find it). So for a long time I decided to close my eyes and accept the Transformations. This until I found a tricky way to convince Blend to perform this operation as a side effect of a sequence of common operations. Here is the process I found:

First of all create the Shape. In this example I will use a Rectangle:

Capture1

Then I apply the Transformation I need. For this example I simply rotate the shape with the mouse of an amout of degrees:

Capture2

Now select the shape and find the option in the context menu (or in the Objects Tree) to make the shape a Path (Path -> Convert To Path). Obviously, to remove the transformation, you have to make the rectangle a Path. Once you have done this you will have this in the Object tree:

Capture3

As now Blend have performed the conversion but the CompositeTrasform is still in place. To convince Blend we have another couple of steps. Now Draw another shape (a rectangle) over the shape to convert. See in figure the result:

Capture4

Then Convert also this Rectangle to a Path. After this step the Objects Tree will show two paths one on top of the other. In the figure I've named the upper Shape to "Mask":

Capture5

Finally, and it is the tricky thing you have to deselect both the Paths (e.g. selecting the LayoutRoot element) then select again them starting from "Mask" then (using CTRL) the shape to convert. It is important to be aware that in the conversion the order matter. If you select the shapes in the inverse order you will not reach the required result. Then finally from the context menu select Combine -> Intersect. The resulting shape is this:

Capture6

The type of selection makes evident that now the Shape ha no rotation but we can see at the markup and the result is reported here:

   1: <Grid x:Name="LayoutRoot" Background="White">
   2:     <Path x:Name="Mask" 
   3:         Data="M29.362633,1.5 L101.14476,29.362633 L73.282127,101.14476 L1.5,73.282127 z" 
   4:         Fill="#FFFFD200" 
   5:         Margin="228.678,148.678,308.678,228.678" 
   6:         Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False"/>
   7: </Grid>

Now you are ready to put the shape wherever you need it. I've experimented the trick in many ways and until today I never found a case where it does not works. The sole things you have to keep in mind is the right order of the steps, and that you can convert only a single shape at a time. So for my Gauge I had to make the conversion many times.

As a suggestion I think it would be beautiful to have an additional menu item that does the trick automatically... If someone knows a better way please feel free to write me and I will be very grateful.

Technorati Tags: ,,
Categories:   TIPS
Actions:   E-mail | del.icio.us | Permalink | Comments (0) | Comment RSSRSS comment feed

New series of articles about WP7

2011-01-19T23:28:43+01:00 by Andrea Boschin

After a huge timeframe I return to my writing activity starting a series of articles about Windows Phone 7 for SilverlightShow website. During this time I've find the time to develop many samples for this device to prepare some speeches and I've created two applications for the marketplace.

The intent of the new series is to collect a number of articles, starting from scratch up to the very complicated subjects and I've started today with the very first and basic article about how to get started. In this article explain the architecture of the phone, and how to startup the development environment to be ready to write your own applications and deploy to the marketplace. Here is the planned table of contents of the series, but keep in mind that if you believe I miss something you can let me know and I manage to extend the series:

(19/1/2011)
 
Windows Phone 7 Part #2: Your first app
 
Windows Phone 7 Part #3: Understanding navigation
 
Windows Phone 7 Part #4: The application lifecycle
 
Windows Phone 7 Part #5: Panorama and Pivot controls
 
Windows Phone 7 Part #6: Advanced interaction
 
Windows Phone 7 Part #7: Understanding Push Notifications
 
Windows Phone 7 Part #8: Using Sensors

As you can see the road is long, since many arguments are covered by the series. I hope you will enjoy reading them but as I've already said if you think there is something to change contact me or the SilverlightShow website and we evaluate your proposals.