You could ensure this by initially getting a pointer to the dispatcher for the UI thread, and then asking it to run your code. Something like this:

_OriginalDispatcher = Application.Current.RootVisual.Dispatcher; 

_OriginalDispatcher.BeginInvoke(myAction); 

In Win8 development, you don’t have to worry about this nearly as often, because the need to spin up new threads is greatly reduced by the availability of the await keyword. That having been said, if you do end up starting your own thread, here’s how you get the dispatcher:

_OriginalDispatcher = Window.Current.CoreWindow.Dispatcher;

For now, I’m baking my own very simple analog. The setup is like this: The links are a set of items in a ListView control, and the tab content is a set of FlipViewItems within a FlipView control. The list’s SelectedIndex is [two-way] bound to the FlipView’s SelectedIndex, so they work in sync.

<ListView x:Name="lstTabs" SelectionMode="Single"
  SelectedIndex="{Binding SelectedIndex, ElementName=TabFlipView, Mode=TwoWay}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <TextBlock>Settings</TextBlock>
    <TextBlock>Favourites</TextBlock>
</ListView>

<FlipView x:Name="TabFlipView">
    <FlipViewItem>
      <TextBlock>Settings go here</TextBlock>
    </FlipViewItem>
    <FlipViewItem>
      <TextBlock>Favourites go here</TextBlock>
    </FlipViewItem>
</FlipView>

As you can see, it’s not perfect. At the very least, you would want to create a different style for the listbox so that the selected item looks a little different. However, it’s really easy to get going with, and will do for now. One nice thing is that the FlipView control gives you free animations, so it looks fluid.

Another twist on this is instead of using a FlipView, you can create a Frame control, and then on the ListView’s selection change event you can load different pages into the frame depending on what’s selected.

Here’s the solution:

// Assume the file in question is in a project folder called "Data",

// named "MyData.txt"

var folder = Windows.ApplicationModel.Package.Current.InstalledLocation;

var file = await folder.GetFileAsync( @"Data\MyData.txt" );

var winRTstream = await file.OpenAsync( FileAccessMode.Read );

var oldStylestream = winRTstream.OpenRead();

Original article below.

Just getting started with Win8 development, and will note what I learn in a series of posts.

I'm finding that ObservableCollection isn't being honored by XAML elements in the //BUILD version of the tools. More specifically, either it's not firing collection changed events, or it is but they're being ignored. Seems this is a known limitation of the current dev drop, and there's an ObservableVector<object> which does work. However, using that throughout your code hurts because of all the casting required; it will also be messy to change when the tools catch up.

Until then, I created this wrapper that derives from ObservableCollection<T>, but also implements IObservableVector<object>. When the tools are fixed, you should be able to do a simple search/replace with ObservableCollection.

Please note that this isn't tested, it's not serious work, it's 5 minutes of Band-Aid which "seems to work on my machine". Use at own risk, etc.

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using Windows.Foundation.Collections;

namespace W8Shared

{

    public class BindableObservableCollection<T> : ObservableCollection<T>, IObservableVector<object>

    {

        public event VectorChangedEventHandler<object> VectorChanged;

        public int IndexOf(object item)

        {

            return base.IndexOf((T)item);

        }

        public void Insert(int index, object item)

        {

            base.Insert(index, (T)item);

            RaiseChange(CollectionChange.ItemInserted, (uint)index);

        }

        private void RaiseChange(CollectionChange type, uint index)

        {

            if (VectorChanged != null)

                VectorChanged(this, new VectorChangedEventArgs(type, index));

        }

        public new object this[int index]

        {

            get

            {

                return (object)base[index];

            }

            set

            {

                base[index] = (T)value;

                RaiseChange(CollectionChange.ItemChanged, (uint)index);

            }

        }

        public void Add(object item)

        {

            base.Add((T)item);

            RaiseChange(CollectionChange.ItemInserted, (uint)(base.Count-1));

        }

        public bool Contains(object item)

        {

            return base.Contains((T)item);

        }

        public void CopyTo(object[] array, int arrayIndex)

        {

            throw new NotImplementedException();

        }

        public bool IsReadOnly

        {

            get { throw new NotImplementedException(); }

        }

        public bool Remove(object item)

        {

            int index = base.IndexOf((T)item);

            if (index >= 0)

            {

                var res = base.Remove((T)item);

                RaiseChange(CollectionChange.ItemRemoved, (uint)index);

                return res;

            }

            return false;

        }

        private VectorEnumerator<T> _Enum;

        public new IEnumerator<object> GetEnumerator()

        {

            if (_Enum == null)

            {

                _Enum = new VectorEnumerator<T>(this);

            }

            return _Enum;            

        }

    }

    public class VectorChangedEventArgs : IVectorChangedEventArgs

    {

        public VectorChangedEventArgs(CollectionChange type, uint index)

        {

            CollectionChange = type;

            Index = index;

        }

        public CollectionChange CollectionChange { get; set; }

        public uint Index { get; set; }

    }

    public class VectorEnumerator<T> : IEnumerator<object>

    {

        private IEnumerable<T> _Coll;

        private IEnumerator<T> _Enum;

        public VectorEnumerator(IEnumerable<T> internalColl)

        {

            _Coll = internalColl;

            _Enum = _Coll.GetEnumerator();

        }

        public object Current

        {

            get { return (object)_Enum.Current; }

        }

        public bool MoveNext()

        {

            return _Enum.MoveNext();

        }

        public void Reset()

        {

            _Enum.Reset();

        }

        public void Dispose()

        {

            _Enum.Dispose();

        }

    }

}

The requirements:

A very common pattern for our intranet sites is a page with search controls, a submit button, and an output section listing the results. I want to give this pattern a few features that suit my team:

• Have the page load very quickly.
  • Do this by splitting the initial page load from the data load into an AJAX call.
• Have the URL persistent and readable – I can copy/paste the current URL and it always represents what I see on the page; I can mail it to others and they can make sense of it.
  • Do this by adding the search parameters to the URL hash and interpreting the hash at page load time.
• Make such pages trivial to write; minimize the code.
  • Do this by writing a set of JS functions that can be used to make the above “just work”.

The result:

MVC Controller methods:

   1:  public ActionResult Index()

   2:  {

   3:    // Very simple view with just search controls; no logic/data.

   4:    return View();

   5:  }

   6:   

   7:  public ActionResult IndexResults(string state = null, string revision = null,

   8:      string assignedTo = null, string keywords = null, string labs = null, 

   9:      int[] multiselect = null)

  10:  {

  11:    // Load data, return partial view with results.

  12:  }

One thing to note is that the controls returned by the Index view bear the same names as the arguments for the IndexResults view. You’ll see why in a minute…

Javascript code for the page:

   1:  $(function () {

   2:   

   3:      $("#btnSearch").click(function () { runSearch() });

   4:      DD.queryHashToForm();

   5:      runSearch();

   6:  });

   7:   

   8:  function runSearch() {

   9:   

  10:      var urlObj = DD.formToQueryHash();

  11:      DD.ajaxPost(

  12:          "/Issues/IndexResults",

  13:          urlObj,

  14:          function (res) {

  15:              $("#divResults").html(res);

  16:          }

  17:      );

  18:  }

That’s it; together, these ingredients result in a page with a persistent URL that loads the data using AJAX, and even displays a progress indicator during the load. As you can see, this is code that’s very easy to write if you were making such a page.

So – here are the interesting lines from the JS above (note that “DD” is the library containing all the POC code):

• Line #3: This just causes a button press to re-run the search.
• Line #4: This takes the current URL’s hash value and interprets it like a traditional querystring. It parses it, finds controls on the page which match the keys in the hash, then assigns values to those controls as per the hash.
  • So as the page loads, the first thing it does it populate the form based on the URL, then runs the search.
• Line #10: This is the opposite of line #4 – it looks at the controls on the page, and creates an object from them with a property for each control’s value. It returns that object for use in the AJAX call, but then also serializes the object into the URL, in the same format expected by line #4.
• Line #11: This custom method runs a normal AJAX post using jQuery, but wraps it up in before/after code that shows a default progress indicator.
• Line #13: Note that we’re passing the object generated in line #10 into the AJAX call as the data.
  • This relies on the fact that the MVC model binder will take a JSON object and split it into a controller method whose arguments correspond to that object’s properties; the MVC framework takes care of the heavy-lifting here.

Is this interesting? Should I post some of the code?

So this app now does the following:

• Plays one of several background sounds in a loop, for a predetermined time period
• Occasionally overlays that with clips that you record yourself (e.g.; my wife’s voice)

During the advanced testing phase (i.e.; trying to get the baby to sleep), I would switch this on, and put it somewhere near him. Works like a charm (for different values of “charm”, depending on his level of anxiety ;))!!

Trial version is available; won’t play for very long. Check it out:

BabySoother

From a development point of view, I had some difficulties with this seemingly simple application:

• It’s quite “thready”, there are inter-thread interactions for things such as stopping the sounds after a given time (and/or when the user clicks “stop”), dealing with the microphone input, overlaying sounds, etc. Lots of callbacks being thrown around, lots of places to watch out for cross-thread access.
• It was my first experience with XNA (in this case, for sound recording), and I had to play around with things before getting the microphone recording working well.
  • Some of that was due to a bug in the interaction between the Zune software and the Emulator (I think), meaning that sounds wouldn’t play, and I thought I had a bug – I didn’t, but it took ages to work out.
  • There is a very cool trick to showing the microphone input visually using data-binding. If anyone is interested, leave a commend and I’ll post some source.
• I really didn’t stick well to MVVM. Stuff such as telling the MediaElement to start/stop playing and switching on the microphone didn’t lend itself well to binding, and I was too sleep deprived to write behaviors. That would definitely be an improvement.
• The marketplace submission failed twice; both times due to rules that require you play well with the rest of the phone (that’ll learn me to read the docs better):
  • You must be sure not to stop currently playing music without getting the user’s permission first. There’s a static property in MediaElement that allows you to check the current state.
  • You must get permission from the user before allowing your app to play music while the phone is locked.

The problem is this: You’ve created your Views and ViewModels, but when you view them in Blend, you either see nothing, or the data you see is not useful for testing what you want in the view. There are various ways to deal with this, including writing code (either in the ViewModel or in a service locator) to return different data at design time.

I’m going to demonstrate a different way that doesn’t involve code, and is very simple and most importantly: Malleable.

Assumptions/Prep:

• I have a ViewModel class called “BooksViewModel” that supports the search UI and result-set. This has some non-trivial properties such as a collection of “Book” classes.
• I have a View called “BooksView” that allows you to search for books, but I haven’t yet hooked up the data bindings (it’s easier to do after you create sample data).
• I have no code to differentiate between design time and runtime. The code is geared purely towards runtime.

What we’ll do:

1. Use Blend to create some purely fake sample data.
2. Assign the fake data as the data-context of the control you want, in a design-time-only fashion.
3. Create the bindings and play with the data.

The “Before” picture: A view showing very little:

Step 1: Create some fake data with Blend:

Go to the “Data” tab, and create sample data from a class:

Select your ViewModel as the class to base the sample data on. This is a giant time-saver:

A new folder + file will be created: SampleData\BooksSampleData.xaml. It’s pre-filled with fake data and ugly namespaces. For readability, I’ve done a find/replace on the namespaces. Here’s what I get:

<m:BooksViewModel
  xmlns:m="clr-namespace:MVVM_DesignTime_Test.ViewModels"
  IsSearching="True"
  SearchError="Vestibulum cras"
  SearchString="Lectus fringilla eros">
    <m:BooksViewModel.SearchResults>
        <m:Book Author="Aliquam aenean" Name="Curabitur maecenas class" Price="216.9"/>
        ......
        <m:Book Author="Nec non" Name="Dictum etiam" Price="920.1"/>
        <m:Book Author="Elit fermentum enim" Name="Erat fusce" Price="597.75"/>
    </m:BooksViewModel.SearchResults>
</m:BooksViewModel>

Two interesting things to notice about the above:

• It automatically generated multiple entries for the collection (“SearchResults”), as well as generating properties for each item in that collection (“Book”).
• Pretty much any class can be instantiated like this in XAML, so no matter how deep/complex the ViewModel and dependent Model objects, you should be able to play with them in the text editor.

Step 2: Assign the DataContext

This is where the magic happens. Look back at the Data tab, and see that this new sample data source is now listed:

Simply drag-drop this guy onto the control which should use it as the data context. The mouse cursor will display text explaining what it will do. In my case, I dragged it onto the LayoutRoot grid, since I wanted everything under that to use it. Once this is done, you’ll notice a new XAML attribute on that control:

  d:DataContext="{d:DesignData /SampleData/BooksSampleData.xaml}"

This is the magic, especially the “d:” namespace declaration, which you’ll notice is mentioned in the page’s XAML declaration as such:

  mc:Ignorable="d"

Step 3: Create the data bindings

Now when you select the “Data Binding…” context-menu for a control’s property, it will show you the properties that come from this data context, which correspond to your ViewModel, with the correct names, types, etc:

And BAM – there’s the data:

Now what?

• Clean up the crappy namespaces in the XAML to make things more readable.
• Change the data to whatever you like using the XAML editor.
• When you make changes and save, the UI will auto-adjust; this is so much quicker than editing code.
• When you make changes to the ViewModel class, remember to change corresponding properties to your sample data.
• You can have multiple sample data files for multiple ViewModels, and use them on the same page – just drag each one onto the control which should use it.
  • This is especially useful in pivot and panorama apps, where one page actually houses a whole app with multiple ViewModels.

Here’s the marketplace link:

http://social.zune.net/redirect?type=phoneApp&id=8a5fd405-f9de-df11-a844-00237de2db9e

You just swipe the screen to reveal the next fact, and click the “refresh” button to load a whole new set.

This was a fairly simple application to write, but I did learn to optimize file storage & loading, and a bunch about how [not] to create icons for the app and marketplace.

Even though it’s simple, I find this application pretty fun to use. Great way to kill some time, very passive :)

This one doesn’t have a trial mode, so I warn you: Don’t spend the $0.99 unless you like facts!

Here’s the marketplace link (you need Zune installed):

http://social.zune.net/redirect?type=phoneApp&id=8fe158e5-9ed8-df11-a844-00237de2db9e

Here’s what it looks like:

The operation is simple:

• Choose one of a few scenes (farm, sea, snow).
• Swipe across the page to reveal the rest of the landscape; it’s a large strip of various animals.
• Touch an animal (or other item) to generate an animation and a sound.

I don’t have kids (not for the next 2-3 days, at least), but friends have told me that their 1-4 year olds enjoy this.

The interesting thing about this application is that there’s almost zero code; it’s virtually all XAML. The only code I have is a behavior that generates random animations based on a few parameters; it’s attached to each animal.

If you have small kids, give this a shot – there’s a free trial on the marketplace.

The first one I wrote is “Feedr”, which is an RSS reader:

Here’s the marketplace link (you need Zune installed):

http://social.zune.net/redirect?type=phoneApp&id=7ee2f072-dbd5-df11-a844-00237de2db9e

It’s pretty no-frills at the moment, but it does what it says on the box, and is geared towards simplicity and ease of use. What I intend to add:

• Categorization of feeds
• Importing an OPML (from where – web?)
• A companion desktop/web Silverlight app, along with centralized syncing of state.

Feedback is welcomed; I haven’t actually tried this on a real phone (I don’t have one yet). There’s a trial mode available for it.