Aimee Gurl... » Silverlight

Techfriday: Looping Panorama for Windows Phone 7 Series

Aimee — Thu, 25 Mar 2010 16:39:00 +0000

Just a quick note: I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features of Silverlight / Windows Phone 7 and Expression Blend to see how much can be done with what we have today.

This is more of an Expression Blend exercise to simulate a looping panoramic interface on Windows Phone 7

There’s one annoying thing that I can’t figure out though: on the first scroll, you’ll notice from the video that the screen flickers. There’s probably something I’m doing wrong here but I just can’t figure it out yet

So I had set out to accomplish two things: Simulate the looping background and sections in the panoramic interface on windows phone and instead of flicking, let the user touch and drag the controls from left to right before switching. I was able to accomplish the two, but like I mentioned, there’s an annoying thing that happens on the first transition from state one to state two. Another thing that’s wrong with this sample is that, I shouldn’t be switching states right away on a drag to left or drag to right. You should be able to pan a bit and the screen holds to that position till you pan to a certain threshold before the interface snaps to the next section. But yeah, maybe next time.

The first challenge was implementing the drag to next state instead of the flick. I couldn’t really isolate this into either a trigger or an action as it’s actually a combination of both, therefore a behavior. Basically, depending on the sum of the left and right value of the users drag motion, I trigger either GoToNextState() or GoToPreviousState(). Code for these two were modified from http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack.

So I built a PanoramicPanningBehavior that has a few properties I can set.

First there are the BackgroundElement, SectionsElement, TitleElement. I want them to be grouped so when it’s time for me to handle the drags, they don’t necessarily have to move at the same pace. That’s when the BackgroundMovementFactor and TitleMovementFactor come to play. Intstead of translating the background and title according to the value of the drag, I multiply it by the specified factor first. I’ve also let myself specify the StateGroup that has the states of our sections as described in my previous post, just in case you have other stategroups in the scene (though I haven’t tested this yet ^_^)

Now that I have the essential parts of my UI identified, I can now define what I want to do with them in my behavior when I start handling the events ManipulationDelta and ManipulationCompleted.

First for ManipulationDelta, I first check to see whether the parts are not null, and then based on the input factors, I apply them to the Translation.X property of the DeltaManipulation, or basically the change in the touch points and assign the value to the TranslateX properties of the CompositeTransform of the elements that have been identified through the properties. I think it’s better to read the code

void RootVisual_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
     {
         if (!e.IsInertial)
         {
             if (BackgroundElement != null) {
                 var BG = getElement(BackgroundElement).RenderTransform as CompositeTransform;
                 BG.TranslateX += e.DeltaManipulation.Translation.X * BackgroundMovementFactor;

             }
             if (SectionsElement != null) {
                 var SE = getElement(SectionsElement).RenderTransform as CompositeTransform;
                 SE.TranslateX += e.DeltaManipulation.Translation.X;

             }
             if (TitleElement != null) {
                 var TE = getElement(TitleElement).RenderTransform as CompositeTransform;
                 TE.TranslateX += e.DeltaManipulation.Translation.X* TitleMovementFactor;
             }

         };
     }

If I wanted to run the project at this point, I’ll have to create a stateGroup and the section states in order for this not to go haywire. When I recreated the project, I actually added the panning behavior last. Next we’ll see the reason why I say this is meant more as an exercise for myself (and maybe for building demo apps) than production code. I think from this screenshot you can more or less figure out what I did.

Okay, so seeing as how you’re able to, from the leftmost part of your UI, be able to pan even more to the left to peek and even transit into the rightmost section, there had to be something there. And since I didn’t want to duplicate all the controls, I wanted to use WPF’s VisualBrush. Sadly, this isn’t available for Silverlight, however, I did find this: http://dotneteers.net/blogs/vbandi/archive/2009/03/26/discovering-silverlight-3-poor-man-s-visualbrush-behavior.aspx When I tested it out, it wasn’t as performant as WPF’s visual brush, but since I only needed to draw the UI once, I thought this would do.If we had the PathListBox in WP7, that would have been a better option too.

If you look at my visual tree, I basically created a brush for the background image(image), the TitleGrid and the ContentGrid (which you won’t see since I collapsed it because there were more stuff inside. Next, you’ll notice that these elements are inside a stack and before and after each of them is a Rectangle. Basically, I created identically sized rectangles that use as brushes the PoorMansVisualBrush.

To do this, after adding a reference to the PoorMansVisualBrush (which I’ve made a WP version of ), I select the Rectangle and temporarily choose, TileBrush, click on Advanced Options in the Fill property and select Convert to New Resource… This will prompt me with a dialog to create a new brush resource and I’ll name it accordingly. In this Case, I have BackgroundBrush.

Next, with the behavior selected, I set the properties accordingly. Most important to note is to set the UpdateIntervalDuration to 00:00:00 so that the behavior doesn’t waste resources by repainting the brush. Next, you’ll want to go to each of the rectangles and assign their fill properties to the BrushResources you created. Also remember to set the Stroke to No brush especially if you have background images that are supposed to seamlessly merge the leftmost and rightmost portions. Now the tedious part is doing this for all the rectangles.

The last, and yet another tricky part is setting up the states. What you’re seeing here is pretty much the same as the last post where I have 3 states, to show my 3 sections. Note that when you position the states, you’ll want to position the actual to the middle/actual objects. It’ll probably be too difficult to set up using the rectangles with the brushes anyway since they don’t render at design time ^_^. Here, you’ll notice I’ve added custom transitions for when Section1State goes to Section3State and vice versa.

To do this, I’ll click on add transition button and select Section1State –> Section3State

In order to see what I’m doing better, I’ll switch to the Animation Workspace by pressing the function key [F6]. I’ve also minimized the stacks back so it’s easier to manage. With the transition to Section3State selected I’ll record a keyframe at the start, and end of the .5s transition.

When I record a key frame at the end, it’ll actually default to moving to the right most part of the actual controls which I changed to the one below. I’ve highlighted the outlines of the rectangles that mimic the actual controls.

Do the same for transitioning Section3State->Section1State. What will happen here is the application will play this custom transition animation to showing the visual brushes and when the transition is done, it’ll switch to the destination state where the real controls are visible.

Run the app to test and that’s it!

Again, not an ideal solution for production but at least I got to learn a few more useful things in Blend that might be useful in the future.

I’ve uploaded the code here so if you want to test it out, download the zip file, rightclick –> properties –> Unblock to avoid getting those dll not found / inaccessible errors.

Panoramic Navigation on Windows Phone 7 with No Code!

Aimee — Thu, 18 Mar 2010 06:19:09 +0000

I was reading through the UI Design and Interaction Guide for Windows Phone 7 Series and found out that there is currently no panoramic application template or control provided as part of the standard application platform. Nothing stops us from creating our own though.

To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460

So, let’s start by creating a new Windows Phone Application project in Blend 4.

You’ll be presented with a default layout. Obviously, your panoramic screen design will go outside the bounds of the “phone”. Layout your screen accordingly. This is what I did with mine.

Now that I have all my elements on screen, I’ll create 3 visual states, one for each active session. Let’s go into our States tab and add a state group called Sections. To do that, click on the icon with a green plus sign.

In the Sections state group, let’s add the 3 states and name them accordingly. For each state, let’s also move the Grid along the x-axis.

We can also set the default transition to some built in easing functions to smooth out the user experience.

In my case, I used the back easing function but you can play around with the different functions to see what suits you. You can preview what the transitions look like by clicking on the Turn on transition preview button.

Okay, now we’re all set. The only thing left to do is enable state changing when a user flicks the screen either to the left or to the right. This is where we will be making use of the my WPBehaviorsLibrary. We’ll go into our asset library –> behaviors tab and you’ll find a behavior called GoToNextState and GoToPreviousState:

Drag and drop these two behaviors one by one to the LayoutRoot so that it looks like this:

With one of the behaviors selected, go into the property inspector. You have a few options you can set (Loop & UseTransitions) which are pretty self explanatory.

. You’ll notice there is also a trigger property. The default trigger type is an event trigger. Let’s go ahead and click New to select the FlickGestureTrigger.

When you click ok, you’ll find that the Gesture has a Direction property that you can set. Basically, we’re saying that the GoToPreviousState action gets fired when the user triggers a flick to the Right. Do the same for the GoToNextState behavior but with a flick to the Left.

And that’s it! Press f5 and select Windows Phone 7 Emulator, unless you’re lucky enough to have a Windows Phone 7 Device.

You’ll get something like this:

After reading some more on the UI Guidelines, they’ve mentioned a few things about the title like moving at a different speed from the sections, etc. so I’ve tweaked the animations a bit,and now I have the title outside the overall grid, animating it separately. I also have different easing functions on the first and last page from the middle one. The result is this:

You can get the code for this project as well as the library here. Also, although I’ve only managed to port (i.e. copy paste) the States behavior from the Mix Behavior Pack to a Windows Phone behavior, I’ve recompiled the pack to work with Silverlight 4. It’s in this folder as well.

Consuming data from Nimbus Using LinqToXML (Updated) on iPhone + WP7!

Aimee — Mon, 15 Mar 2010 20:21:57 +0000

I’ve been starting to explore iPhone development lately. At first I was taking my time at learning at Objective C which went fine for a while but one of the guys on the project was asking if I could help build some apps for Project Nimbus, translation: build stuff fast. We talked about MonoTouch.NET which is basically a framework that will allow you to code apps with .NET. JOY!!

First a quick intro about Project Nimbus: as Chewy would put it, it’s basically a supermarket for data here in Singapore. The team is hard at work at securing data from all sorts of providers. They currently have Hungry Go Where, Land Transport Authority, National Environment Agency, and National Library Board onboard as data providers, and i know they have quite a few more coming. What this means for developers is that if they have a great idea, they don’t have to go out by themselves with these big agencies and possibly spend tons of money on acquiring the data. If you want to find out more, check out http://projectnimbus.org/about/ for more information. They also very keen on getting input from developers as to what types of data they think would be useful, as well as feedback on the project as well. If you’re interested, the about page has a link to contact them

So back to my application. Right now, I’m figuring out how to actually get the data from the service. Looking at this entry, they actually provide a link to the data that’s returned when you make a call to the service. Check out the post, and towards the end, you’ll find a few links that shows how the data looks like.

First we create a webrequest to the URL that gives me the dataset we want. In this case, we want to get access to the NowcastSet i.e. current weather. The service actually gets authentication from the headers so we add these two keys & values. We then make the request and read it into a string for parsing later on.

Next, if we look at the dataset that’s returned, we see that it makes use of a few namespaces. To make things WHOLE lot easier for us, we’ll use one of the cool features of the .NET Framework which I LOVE called LinqToXML. If you want to find out more, check out http://msdn.microsoft.com/en-us/library/bb387098.aspx.

Let’s first add the System.Xml.Linq namespace in order to use it’s classes.

We can now add a our XNamespaces:

The following stuff is just magic. With just one statement using LinqToXML, we’re able to parse the xml string without having to use xpath or regex, etc. And, if you read the statement, it’s actually pretty descriptive of what it is trying to accomplish.

Given the structure of our sample data, we see that we’re essentially getting elements from entry.content.properties.

Note that the following line is just to make things a bit easier to read.

You can also just do the following and remove the let line, though I find it a bit more confusing to understand at first glance.

This is the full code:

    public List GetWeatherFromNimbusNEA(string AccountKey, string UniqueUserID)
    {

        System.Net.WebRequest wr=
          HttpWebRequest.Create(
            "http://api.projectnimbus.org/neaodataservice.svc/NowcastSet");

        wr.Headers.Add("AccountKey",AccountKey);
        wr.Headers.Add("UniqueUserID",UniqueUserID);
        wr.Method = "GET";
        WebResponse res = wr.GetResponse();
        string resStr
         = new System.IO.StreamReader(res.GetResponseStream()).ReadToEnd();

        XNamespace atomNS
          = "http://www.w3.org/2005/Atom";

        XNamespace dNS 
          = "http://schemas.microsoft.com/ado/2007/08/dataservices";

        XNamespace mNS
          = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata";

        List results
          = (from item in XElement.Parse(resStr).Descendants(atomNS + "entry")
            let weather = item.Element(atomNS + "content").Element(mNS +"properties")
                select new WeatherEntry() {
                Area = weather.Element(dNS +"Area").Value,
                Condition = weather.Element(dNS +"Condition").Value,
                Lat = weather.Element(dNS + "Latitude").Value,
                Lon = weather.Element(dNS + "Longitude").Value
            }).ToList();

        return results;
    }

}

//Blogging using a trial version of MacJournal. Windows Live Writer is still my favorite blogging software, and it’s not just because it’s free.

// Update @ 3.40 on my Win7 partition.. I missed you Windows Live Writer!

// and the vspaste add-in!!

It’s an hour after the end of the Mix Keynote. I started watching the video on my Mac partition so I couldn’t download the tools straight away. After it was over, I rebooted, uninstalled my pre-RC bits and installed the tools for Windows Phone 7 Series (which you can find here), fired it up and created a new Windows Phone List Application:

Since this is mainly a ProjectNimbus post, I won’t dive into how to build the WP7 app but there’s a new training kit up on channel 9 http://channel9.msdn.com/learn/courses/WP7TrainingKit/ if you want to learn more.

I did make a few tweaks in my code since the original code wasn’t doing downloads asynchronously (which it should, to improve your apps performance and not lock the UI). So how does my code look now?

public void  GetWeatherFromNimbusNEA(string AccountKey, string UniqueUserID)
 {

     WebClient wc = new WebClient();

     wc.Headers["AccountKey"] = AccountKey;
     wc.Headers["UniqueUserID"] = UniqueUserID;
     wc.DownloadStringCompleted
      +=new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
     wc.DownloadStringAsync(
      new Uri("http://api.projectnimbus.org/neaodataservice.svc/NowcastSet"));

 }

 void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
 {
     string resStr = e.Result;

     XNamespace atomNS
      = "http://www.w3.org/2005/Atom";
     XNamespace dNS
      = "http://schemas.microsoft.com/ado/2007/08/dataservices";
     XNamespace mNS
      = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata";

     var results
     = (from item in XElement.Parse(resStr)
         .Descendants(atomNS + "entry")
          let weather = item.Element(atomNS + "content")
                        .Element(mNS + "properties")

                 select new WeatherEntryViewModel()
                  {
                   Area = weather.Element(dNS + "Area").Value,
                   Condition = weather
                               .Element(dNS + "Condition").Value,
                   Lat = weather.Element(dNS + "Latitude").Value,
                   Lon = weather.Element(dNS + "Longitude").Value
                  });
     foreach (var r in results) {
         Items.Add(r);
     }
 }

It’s practically the same code except I switched to the WebClient which Silverlight developers are already familiar with to download the string asynchronously. Once the results are returned, I add them to an observable collection which I have data-bound my UI Elements to.

Items = new ObservableCollection<WeatherEntryViewModel>();

The result is a basic list like application that displays weather information:

I’m excited about the WP7 platform and it’s definitely going to be a focus in my upcoming TechFriday posts! Next thing on my learning list is to share code between my two application platforms, iPhone and WP7. One thing is for sure though, I’m very happy with Project Nimbus as well because it provides a lot of data that I can already start playing around with. Kudos to the team!

Playing with the Silverlight Toolkit

Aimee — Sun, 22 Feb 2009 16:03:01 +0000

Yes, it’s as easy as it looks. I’m actually just creating this post so that I can test the app I just built. The Silverlight Toolkit has actually been in release since December but I haven’t had the time to play around with it yet. In the toolkit are some really cool components that you can start using in your Silverlight applications. I’m going to need to work with some charts in an upcoming project so I decided to test it out.

Installing the toolkit is easy. All you need to do is download the binaries from the site (or you can download the package with the source files if you want to do a bit of tweaking of your own). Once you’ve downloaded and unzipped it onto your drive, you can add a reference to the dll’s in your project.

Right click on references and select add reference:

In my case I wanted to make use of the PieCharts so I added the DataVisualization dlls:

Also, to make things easier, you can add these new controls to the toolbox by right-clicking on it and selecting Choose Items..

Then navigating to where you unzipped the dlls and of course selecting. Your toolbox should then be populated with the controls when this is done. Note that you won’t be able to drag and drop any of the controls to the design view, but you should be able to do it on the XAML code. When you do that, Visual Studio will automatically add a reference to the namespace and you can start using the control in your code. You’ll get something like:

For the sample, I followed what was stated in the guided tour, but I moved the title attribute to the Chart element. The title didn’t seem to show when I placed it on the PieSeries element:

As for what the application does, it simply reads the latest 10 posts from my feed and counts the number of posts tagged as personal, media, tech, and the posts whose title starts with “Tweets” which are basically posts that aggregate my twitter posts in supposedly a day. I wanted to have a visual of how much I’m actually leaving this blog to the hands of my twitter aggregator :-S.

Silverlight 2 & Dynamics CRM

Aimee — Thu, 27 Nov 2008 06:52:06 +0000

I was doing some research on Silverlight 2 & Dynamics CRM integration and found this post by Humberto Lezama Guadarrama where he posts a sample project that demonstrates how to consume Dynamics CRM Services directly from Silverlight 2. I was getting an initialize error when I tried to run the code though. This post helped me fix that. Turns out, there were some inconsistencies in the namespace declarations in the project properties. I’ve modified the code and uploaded them here for those of you who want to straight away run it without having to do the MODs yourself.

Note: to run the project, you should have Dynamics CRM installed and you’ll need to modify the server name and org name in the code to get it to work.

PDC SOTD: Building a Graphics-Intensive Application in Silverlight

Aimee — Fri, 31 Oct 2008 05:39:00 +0000

There’s so much content on http://www.microsoftpdc.com and I’m trying to watch at least once a day. So my PDC Session of the Day is this Building a Graphics-Intensive Application in Silverlight by Seema Ramchandani

She highlights quite a number of things to bear in mind when you’re doing lots of animations, image & video rendering in your application. She also talks about a tool called XPerf which allows to “dissect” your CPU processes in order to analyze the performance of your applications. You can read more about this tool here

Visual Web Developer 2008 Express Supports Solutions!

Aimee — Thu, 23 Oct 2008 14:56:13 +0000

With the goal of stressing out my new adopted baby, Brownie (yes I know it makes her sound like a dog but hey, what can I do, it’s brown and I wasn’t feeling very creative when I got her), I installed Visual Web Developer 2008 Express Edition, because I figured that one day while sitting at a cafe, I would probably have the urge to code and will need to have some form of VS on this little one. (I’m already thinking about how I can possible expand this girl’s memory just a little bit). I was pleasantly surprised, when I started creating a new Silverlight project, to see that it actually now supported solutions! I remember before, that was probably the most evident limitation of the express editions from the non-free ones (:p). I also tried out opening a solution that was built through the Pro edition and it seemed to work fine too! I think this is great news for all the hobbyist developers out there who would just like to try their hand out or start learning how to build all sorts of cool .NET applications. What I’d really love to see though is allowing Express Editions build for WinMo hrmmm..

Preparing to Move to RTW

Aimee — Mon, 13 Oct 2008 05:47:52 +0000

For those of you who have been working on the Silverlight RC0 bits getting yourself ready for the release, check out this blog post from Laurence Moroney where he talks about how to get your RC0 and Beta 2 bits deployed side by side so you don’t have to worry about when the clock strikes 12 and your users start upgrading their plugins to the RTW version. Party on!

I tried out the fix myself on http://www.technoeuphoria.com/pissoff and it seems to work for me!

Live Media GPS = Awesome!

Aimee — Thu, 11 Sep 2008 01:47:42 +0000

I was browsing http://www.liveside.net last night and saw this article on a really killer Windows Mobile application called Live Media GPS. If some of you have heard of Qik, it’s the same concept. It has a software component that runs on your GPS enabled Windows Mobile phone and allows you to stream videos on the web. The portal is not as rich as Qik’s portal yet. What happens is when you choose to broadcast a video, it won’t allow you to select off the bat that you want to publish your video right away. The mobile client has SMS notification though I haven’t tried it out yet. I’ll update this post when I get to try it out. The output is streamed via a Silverlight player, and on the right hand side, you’ll find the GPS location plotted on Virtual Earth. COOLNESS!!

Live Media GPS is an addition to their already existing Live Media application (which gets installed when you install the client) that allows much more functionality like making the video public, viewing your “buddy cams”, viewing the public broadcasts. Apparently, aside from videos, you can also stream other media such as images, presentations etc. Will have to find a buddy to test this out with.

Live Media also comes with a desktop client which I unfortunately have not been able to try because they don’t currently have a version that supports 64-bit *sob*. I’ll probably try it out on one of the other machines here once I have the time.

“This is a test of the emergency broadcast system…”

If ever I get kidnapped, I’ll have a piece of software to help people find me.. provided they don’t keep me where the GPS & 3G don’t show

SingTel Heart Race Test!

Aimee — Fri, 15 Aug 2008 15:48:43 +0000

I had the great opportunity to help Crayon Digital get enabled on Silverlight for one of the projects they had to deliver for the SingTel Singapore Grand Prix and I have to say, they’ve come up with some pretty sleek stuff and I’m sure you GUYS will agree Check out the Heart Race Test which the team has very impressively built in less than a month, including time taken to build the concept, assets as well as honing Silverlight development skills!

Loads of videos on the Grid Girls but my favorite is how they used Deep Zoom. Check the site out!