Infinite Codex

Minimal Virtualized Data List for WP7

jasonshort@infinitecodex.com — Mon, 20 Feb 2012 12:00:00 -1500

I recently gave a talk about data management on Windows Phone 7 for XapFest and I put in a slide about virtualizing your data for data bound objects. I didn’t really think it was that big of a topic when I was putting together the talk, but it generated a lot of interest from attendees.

I am going to demonstrate the minimal virtualized data collection object you can easily create for data binding with a Listbox.

For this example I am using a simple class named FeedItemDataModel. This represents a class that holds a single item from an RSS Feed. In this simple implementation the values are simple and set in the constructor.

The sample application shows a UI with a collection of this object databound to the UI and lets you jump to a specific index in the list. The red text you see is a memory watcher class that shows memory usage within your app.

Silverlight handles the UI part

To be clear, Silverlight handles the xaml part of this for you. If you have a list with one million objects only the number that fit on screen are built up for the xaml display (from your DataTemplate most likely). The runtime is smart enough to realize that the listitem is offscreen and recycle it for you. This is a huge performance boost, but what about the data behind that databound collection? If you bind one million objects they are all loaded into that collection by default! If you want to only load those that are on screen you have to handle that yourself. But it really is not that hard to do for most data objects.

Three “must have” parts

You don’t need to implement a lot of things to make data binding work against a custom object, but you must implement the following three things. The below code snippet excludes a bunch of stuff you have to implement due to the interface, but you can just throw a not implemented exception. You don’t need them to be completely implemented for this to work.

IndexOf – So the data binding can lookup a specific object and return it as the selected item.

Count – How many total items are in the collection. Listboxes need this to show the correct size scroll bar.

this[] – Go get the item, this could be from disk or from a cache.

public class MinVirtualizedList : IList
{
// Total items to show in the list
public const int TotalItems = 1000000;

/// <summary>
/// Count returns the total items in the list.
/// Important for the scrollbar to have a scale that matches the data
/// </summary>
public int Count
{
    get { return TotalItems; }
}

/// <summary>
/// Find the index of an object in the data list.
/// Important to allow quick seek access to the data position
/// </summary>
/// <param name="value"></param>
/// <returns></returns>
public int IndexOf(object value)
{
    if (value == null)
    {
        return -1;
    }

    FeedItemDataModel item = (FeedItemDataModel)value;
    return item.FeedItemId;
}

/// <summary>
/// Indexer for the list - this is where Silverlight will call back for each item that is
/// needed to fill the virtualized UI elements
/// </summary>
/// <param name="index">The index of the item to get</param>
/// <returns>The item</returns>
public object this[int index]
{
    get
    {
        // If using SterlingDB you would simple have to Load<FeedItemDataModel>(index)
        FeedItemDataModel loadedItem = null;
        loadedItem = new FeedItemDataModel { FeedItemId = index, FeedTitle = "Title " };
        return loadedItem;
    }
    set
    {
        throw new NotImplementedException();
    }
}  // See code on bitbucket for complete implementation with stubbed out methods

Load on Demand

You may be able to get away with always loading on demand if your objects are small. I may update this sample later to include on demand loading using SterlingDB. It would be really easy to implement, and I think there is value in having such a sample in the community.

Don’t be greedy

Only load the items you need. If the user rarely scrolls down, don’t load anything beyond what a single screen can show (maybe a couple extra for the first part of the scroll).

Most apps may need a hybrid approach to this. Either build a façade around your object and only load the parts that are needed for the UI, or load the smallest subset you expect the user to realistically consume.

Doesn’t IObservableCollection handle this?

I think this is a common misconception. ObservableCollections are for handling the change notifications to the UI. You only have to databind them one time, and when the collection is changed the UI gets updated. You could probably use the same technique here, but you would have to derive your own custom class.

Sample Code on BitBucket

I put the complete sample up on BitBucket, click the link to go direct to the source.

VirtualizedDataWP7 BitBucket Page

Cache in the collection

Another optimization would be to cache the objects in the collection. This would be pretty easy to implement an MRU (most recently used) cache. Sounds like another future blog post.

Create a file from a resource on WP7

jasonshort@infinitecodex.com — Fri, 17 Feb 2012 05:57:36 -1500

I got an email from someone today asking about how to take a resource from their XAP (which is read only), and put it in a location where they can update the file.

Initial Data Load

I highly recommend this approach for getting an initial data load for your application. Give the application a base of files to work with rather than requiring an initial round trip to a server for those files. It is fine to need to update them almost immediately. Think about the scenario where the user has no network access (a first run of the app this is really vital). Does the user get an error that no data is available, or do they get a nice default experience? Even if you just put in data that says “no data here yet”, that is better than a blank screen to the user.

Create File From Resource

I put this in a utilities class as a static method since it doesn’t really need any state. One thing to ensure you do is put a using() block around the objects that are disposable. This ensures they are cleaned up and released as quickly as possible. I think this is a common reason why people think they need to GC.Collect, they are not cleaning up memory.

public class FileUtilities
{
/// <summary>
/// Given a resource name, create a file in the isolated storage.
/// Resources are read only, but copying them to the isolated store means you can edit them.
/// Useful for including a starter file in your XAP, and then copying it out to storage
/// for editing it at runtime.
/// </summary>
/// <param name="resourceName">The name of the resource</param>
/// <param name="fileName">Optional param for the name of the file, 
///       by default uses the same name as the resource</param>
public static void CreateFileFromResource(string resourceName, string fileName = null)
{
    // Find the resource and get the stream
    // Note the using() block to ensure this gets cleaned up when we are done
    using (var resourceStream = Application.GetResourceStream(
                                  new Uri(resourceName, UriKind.Relative)).Stream)
    {
        // Get the location where we can write files
        using (var userStorage = IsolatedStorageFile.GetUserStoreForApplication())
        {
            // Use the filename (if given) or the resource name
            using (var newFile = userStorage.CreateFile(fileName ?? resourceName))
            {
                byte[] byteBuffer = new byte[4096];
                int bytesRead = -1;
                while ((bytesRead = resourceStream.Read(
                                     byteBuffer, 0, byteBuffer.Length)) > 0)
                {
                    newFile.Write(byteBuffer, 0, bytesRead);
                }
            }
        }
    }
}}

Please forgive the formatting above, trying to make it fit on a smaller size screen.

Using a custom attribute to determine type at runtime

jasonshort@infinitecodex.com — Mon, 06 Feb 2012 01:46:00 -1500

On a Windows Phone 7 project I am currently building I had a need to build a factory that instantiates different concrete classes depending upon an object at runtime. I have a number of information feeds, that all have different classes built to actually go get their data. One for RSS Feeds, one for Twitter, etc. Each Feed has a property for the FeedType, this is the information needed to determine what class to instantiate at runtime.

I have written this pattern many times, but I ran across an interesting post on StackOverflow where Steven gave a different approach to solving this without the classic giant switch statement in the Create method. I thought it was neat enough to use in my application and share here.

There are a couple of steps you have to take, but none of them are difficult.

Decorate your objects with a custom attribute
Build the object types using reflection
Implement your factory method

Custom Attribute

The attribute I added is called FeedTypeAttribute, I then add it to the concrete feed processor classes.

class FeedTypeAttribute : Attribute
{
    private int _feedType;

    public FeedTypeAttribute(int feedType)
    {
        _feedType = feedType;
    }

    public int FeedTypeId
    {
        get
        {
            return _feedType;
        }
    }
}

Adding the attribute to a class looks like the following.

[FeedTypeAttribute(1)]
public class StaticFeedProcessor : IFeedProcessor
{
    public StaticFeedProcessor()
    {

    }

    public void ProcessFeedModel(FeedModel feedModel)
    {
        throw new NotImplementedException();
    }
}

Note that this class would be a FeedType of 1 in my data, but how do you determine what class that is during runtime? The answer is reflection (and yes, this does work on Windows Phone 7).

Factory Method Using Custom Attributes

public class FeedProcessorFactory : IFeedProcessorFactory
{
    private static Dictionary<int, Type> processorList = new Dictionary<int, Type>();

    static FeedProcessorFactory()
    {
        // Get the types in this assembly that implement our custom attribute
        var targetTypes = from type in Assembly.GetExecutingAssembly().GetTypes() 
                         where type.CanBeTreatedAsType(typeof(IFeedProcessor))
                         where !type.IsAbstract && !type.IsInterface
                         let customAttributes = type.GetCustomAttributes( typeof(FeedTypeAttribute), false)
                         let attribute = customAttributes[0] as FeedTypeAttribute
                         select new { type, attribute.FeedTypeId };

        processorList = targetTypes.ToDictionary(p => p.FeedTypeId, p => p.type);
    }

    public IFeedProcessor CreateProcessorByFeedType(int feedId)
    {
        Type feedType = processorList[feedId];

        return Activator.CreateInstance(feedType) as IFeedProcessor;
    }
}

The key here is the type.GetCustomAttributes() call. The linq expression gets all the type of the current assembly where the type can be assigned from the IFeedProcessor class. We have to ensure the class is not abstract or an interface, and then get the custom attributes.

The let clause in the linq expression can be thought of like a local temporary variable. Assigning the attributes to it, and then processing them in the final select.

Consuming the Factory

Consuming the factory is then as simple as instantiating a factory object and calling the CreateProcessorByFeedType function. A fully allocated processor is returned ready to handle the feed.

// This is in my container object
private static IFeedProcessorFactory _feedProcessorFactory = new FeedProcessorFactory();


// This is in the function to process the feeds
IFeedProcessor processor = _feedProcessorFactory.CreateProcessorByFeedType(feed.FeedType);
processor.ProcessFeedModel(feed);

Less Coupling is Good

This code allows for the addition of new processor classes just by building the class and adding the custom attribute. Of course you should check if the feedtype is not supported before trying to use the object (I omitted some code used for safety checking).

If a newer class is created in the future to replace a current one I only have to change the custom attribute to handle it. No switch statements, or remembering to update a config somewhere.

Is this .Net Type Assignable from another Type?

jasonshort@infinitecodex.com — Thu, 02 Feb 2012 09:20:17 -1500

I have run into this a few times and always have to go to the MSDN to find the answer. I have a situation where I needed to determine if a given type can be treated as a base type in an object factory. I wanted to be able to create my concrete classes without having to do a switch statement for each type.

First I had to determine if the types were assignable to each other, then find the type to implement. I will cover that in another article. In this one I just want to cover the assignment test.

Can this type be assigned?

There is a function IsAssignableFrom that you can call on a System.Type.

if( ParentType is ChildType )

It actually has to be written the other way around.

if( ChildType.IsAssignableFrom(ParentType) )

Quick Extension Method

So instead of having to do that all over my code, I wrote an extension method to allow me to do it following a different ordering. I actually got this basic idea from one of the comments on the MSDN page.

if( parentType.CanBeTreatedAsType(childType) )

As you can see the extension method lets you write the syntax in a more natural manner. Your preference may differ, but this makes more sense to me.

Example Code

public static class DataExtensionMethods
{
        public static bool CanBeTreatedAsType(this Type CurrentType, Type TypeToCompareWith)
        {
            if (CurrentType == null || TypeToCompareWith == null)
                return false;

            return TypeToCompareWith.IsAssignableFrom(CurrentType);
        }
}

void Main()
{
    System.Type parentType = typeof(ParentClass);
    System.Type childType = typeof(ChildClass);
    
    bool ChildToParent = childType.CanBeTreatedAsType(parentType);
    Console.WriteLine("Child can be treated as parent: " + ChildToParent );
     
    bool ParentAsChild = parentType.CanBeTreatedAsType(childType);
    Console.WriteLine("Parent can be treated as child: " + ParentAsChild );
}

public class ParentClass
{
    public ParentClass()
    {
    }
}

public class ChildClass : ParentClass
{
    public ChildClass() : base()
    {
    
    }
}

Debug Secondary Tiles

jasonshort@infinitecodex.com — Wed, 04 Jan 2012 02:39:00 -1500

This is another of those posts for my future self, because I know I won’t remember this little tip.

Set startup through app manifest

The WMAppManifest.xml has a property that tells it where to send the default launch of the application.

    <Tasks>
      <DefaultTask Name="_default" NavigationPage="MainPage.xaml" />
    </Tasks>

So the normal launch page is MainPage.xaml. But you can change it to another page, and include your parameters just like from a secondary tile!

    <Tasks>
      <DefaultTask Name="_default" NavigationPage="/TileDetails.xaml?myid=2" />
    </Tasks>

Now you can just press F5 and debug just as if that secondary tile had been clicked.

Coding 4 Fun Phone Toolkit updated

jasonshort@infinitecodex.com — Tue, 03 Jan 2012 02:37:31 -1500

If you have not looked at the toolkit before you seriously owe it to yourself, go get it now!

Coding 4 Fun Phone Toolkit

Windows Phone Geek has also done a great intro post on one of the new controls (the MetroFlow control). Getting started with MetroFlow Control is a great read, even just to get up to speed with the overall concepts of the toolkit.

Click back twice to exit app?

jasonshort@infinitecodex.com — Fri, 09 Dec 2011 08:11:49 -1500

I have been adding animations to a Windows Phone 7 app that has a panorama control and ran into a problem I have seen others post online. I figured it out, so I thought I would take a minute to explain how.

Get ready to add transitions

The Silverlight Toolkit is the way you want to go about adding quick and easy animations when a page loads and navigates away from the current page.

If you are not familiar with the basics visit the link above, or read this really good tutorial about wp7 page transitions on Windows Phone Geek.

The basics are that you have to include the toolkit, and you have to modify the root frame of your application to be a transition page instead of a normal phone page.

In a typical application you have the RootFrame declared in your App.xaml.cs like this:

    public partial class App : Application
    {
        /// <summary>
        /// Provides easy access to the root frame of the Phone Application.
        /// </summary>
        /// <returns>The root frame of the Phone Application.</returns>
        public PhoneApplicationFrame RootFrame { get; private set; }
    }

But for transitions to happen you need to change the object to a TransitionFrame when your InitializePhoneApplication is called.

            // REPLACE THE FIRST LINE WITH THE SECOND
            // RootFrame = new PhoneApplicationFrame();
            RootFrame = new TransitionFrame();

This will give you the ability to add transitions to your page.

I prefer to define my transition style at the application level, rather than the page level. Usually I want all the pages to behave the same, so this gives a nice central point for all of them to reference it.

In your App.xaml add a style like this:

        <Application.Resources>
            <Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage">
            <Setter Property="toolkit:TransitionService.NavigationInTransition">
                <Setter.Value>
                    <toolkit:NavigationInTransition>
                        <toolkit:NavigationInTransition.Backward>
                            <toolkit:TurnstileTransition Mode="BackwardIn"/>
                        </toolkit:NavigationInTransition.Backward>
                        <toolkit:NavigationInTransition.Forward>
                            <toolkit:TurnstileTransition Mode="ForwardIn"/>
                        </toolkit:NavigationInTransition.Forward>
                    </toolkit:NavigationInTransition>
                </Setter.Value>
            </Setter>
            <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                <Setter.Value>
                    <toolkit:NavigationOutTransition>
                        <toolkit:NavigationOutTransition.Backward>
                            <toolkit:TurnstileTransition Mode="BackwardOut"/>
                        </toolkit:NavigationOutTransition.Backward>
                        <toolkit:NavigationOutTransition.Forward>
                            <toolkit:TurnstileTransition Mode="ForwardOut"/>
                        </toolkit:NavigationOutTransition.Forward>
                    </toolkit:NavigationOutTransition>
                </Setter.Value>
            </Setter>
        </Style>
            
        // Other resources here...
    </Application.Resources>

This is defining a in and out transition that is a turnstile effect. This is how almost all of the built in applications behave.

Modify the page

Add the transition to each page you want to use this behavior in the XAML.

<phone:PhoneApplicationPage 
    x:Class="YourApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   // the rest of your xmlns stays the same, you need to add the toolkit and the style 

   // This reference loads the toolkit controls for this page
   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    // This is named in the App.xaml (you can change it)
    Style="{StaticResource TransitionPageStyle}">

    // the rest of your page XAML stays the same....

/>

Do this for each page you want to use the transition effect.

Why do I have to hit back twice?

Phew, now to the reason I wrote this post…

In some situations you will notice that hitting back from your main page will navigate out, but the same page will appear rather than exiting the application. This will surely cause you to fail certification, and probably annoy a few users.

There are a couple different reasons why I have seen this happen.

There can be only one… RootFrame

The core of all the issues is that you can only have ONE RootFrame on your page. If you are allocating a second frame for the transition and assigning it to the RootFrame you have two of them around.

            RootFrame = new PhoneApplicationFrame();

            // This will make a SECOND Frame in your app
            RootFrame = new TransitionFrame();

This is the mistake I have seen online quite a bit. People think they have to add a new TransitionFrame allocation and leave the original one in place. You must delete the PhoneApplicationFrame() allocation line!

A more subtle version of this same bug is the one I ran into. The Panorama project template creates a RootFrame for you in the App.xaml like this:

   <Application.RootVisual>
        <toolkit:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml"/>
    </Application.RootVisual>

This will cause a second allocation of a PhoneApplicationFrame!

If you remove that code from the xaml you will now safely be able to hit back and leave the application.

Explorer Search options for file and IE favorites

jasonshort@infinitecodex.com — Tue, 06 Dec 2011 00:56:00 -1500

Do you every need to search in Explorer (your Windows Explorer, not the Internet one) for files of a specific size range? A coworker showed this to me and I wanted to write it down so I don’t forget it!

Search by Size: range

That will filter the results to all files within those ranges. This even works on Server 2008 (I thought it was a Windows 7 only feature at first).

Search in Internet Explorer Favorites

You can also search through your internet bookmarks and favorites by the strange sequence of adding your favorites to the favorites for search.

Step 1

First navigate to your favorites folder in Explorer. This should be the one under your username, not the one at the top of the Explorer window.

Select the Favorites item. You will see your folders and bookmarks on the right side of the screen.

Step 2

Then you have to find the Favorites item that is usually at the very top on the left pane of Explorer. DON’T CLICK IT. Right Click and select Add current location to Favorites. Then you will have a Favorites folder under the Favorites item.

That’s it. You can now search them quickly and easily from the Explorer window.

Search the Internet Bookmarks and Favorites

This next part is also a little non intuitive to me. To search the internet bookmark favorites you have to select the Favorites icon, then choose Favorites again (for the internet ones) and type your search in the upper right corner of Explorer.

Name your bookmarks when adding them

You can add a favorite by pressing Alt-Z on the keyboard while on a site, or hit the Star icon (Internet Explorer 9) and then add to favorites.

I find this incredibly useful for finding my bookmarks later. I actually now take the time to give meaningful names to all my bookmarks so I can search on them later. No content from the page can be searched, just the title you put in the bookmark, and the web address.

You can also create folders for them as well.

Sync your bookmarks across machines

Did you know you can keep your bookmarks across multiple machines?

Using Windows Live Mesh you only have to select to Sync your Internet Explorer under Program Settings.

Windows Live Mesh is a free tool that allows you to also sync folders across machines as well. If you haven’t seen this tool you really need to! I think it is way better than using a third party service like Drop Box. I use it to sync One Note notebooks across all my machines.

Hope this helps someone, and now I won’t forget it either.

Async Data Flow Block in TPL

jasonshort@infinitecodex.com — Wed, 16 Nov 2011 03:47:26 -1500

Check out the new System.Threading.Tasks.Dataflow.dll for processing blocks of data in an asynchronous manner. I watched this video on Channel 9 and it blew me away. I hope this goes into .Net 4.5 by default.

Intro to TPL Dataflow

Very easy to control things like a data pump where you want to process the data as it comes into a queue. You can even let the ActionBlock run in and just have it call you back when it is done.

Sample code

// Setup an action block - nothing is happening here 
// until we post something to this block
var ab = new ActionBlock<int>( i =>
{
    // Wait without blocking the thread
    await TaskEx.Delay(1000);
    Console.WriteLine(i);
}
, new DataFlowBlockOptions(TaskScheduler.Default, 4));


// Now post 10 items to the block
for(int i = 0; i < 10; i++)
{
    ab.Post(i);
}

// Tell the action block we are done and it should stop
ab.DeclinePermanently();

// Wait for it to done processing
ab.CompletionTask.Wait();

More information

Visual Studio Aync Website

Windows Runtime Information Links

jasonshort@infinitecodex.com — Wed, 19 Oct 2011 05:44:38 -1500

WINRT (as the Windows Runtime as been dubbed) was announced a while back at BUILD in California. I was super busy at the time and didn’t get to read or watch any of the sessions online. Check out the WinRT Wikipedia page for more information.

I have been listening to podcasts and trying to catch up today while I am home sick. Thought I would put some good links up for others looking to catch up also (and hopefully not while sick).

Dot Net Rocks

If you have never listened to Dot Net Rocks you seriously owe it to yourself to check it out. I don’t listen to every show. Grab ones you are interested in from their archive. I have pointed several junior developers to their shows on specific topics and many have come back to tell me that the podcast was just enough to get them unstuck on some concept or idea.

DNR Show 701 has a really good intro where Carl goes through the WINRT and announcements from BUILD. Listen to the first 15 minutes for the best information I have found anywhere about WINRT and Windows 8.

DNR Show 705 is an entire show about WINRT and WIN8. It appears they will be starting a new podcast specifically about tablet development. Rockford Lhotka and Billy Hollis are the guests on the show and talk about how they view WIN8 from a business and development standpoint. Good information and will give you some insight into how WIN8 might win over the business segment.

Channel 9

Using the Windows Runtime from C# and Visual Basic BUILD session covering the topic at a high level.

Design Details of the Windows Runtime has a good overview slide from BUILD showing how .Net and WinRT all work through the same stack in Windows 8.

WinRT and .NET in Windows 8 a good blog post about the rumors of .Nets death being greatly exaggerated.

.Net 4.5, Async, WinRT with Bart De Smet is a video podcast talking about some topics for all .Net developers in the coming months and years. Bart is a seriously smart Microsoft engineer working on all sorts of async technologies.

Application Virtualization is a great podcast talking about how apps could be sandboxed in a future OS.

Going Native 2 talks about using C++ in Windows 8 and how the runtime allows C++ to be a first class citizen of the OS again. If you extrapolate a little you will also see how it was possible for Javascript to become first class as well.

Metro is coming

Of course building Windows Phone 7 apps I have seen the Metro UI for a while now. But I am amazed at how many people are now jumping on the Metro theme.

One site that really took the look and feel of Metro and went all out is the AfricanGeek.com site.It is written in Silverlight, but he nailed the whole Windows 8 look and feel for his site.