Derik Whittaker : Silverlight

Missing Silverlight Resources and ASP.Net security

Derik Whittaker — Wed, 25 Jan 2012 08:58:13 GMT

Have you ever had an error crop up when debugging an application which has made you simply want to pull each hair out of your head one by one with a pair of tweezers because that would be less painful than debugging the error? Today I had just this happen to me.

Today when I hit F5 to launch our Silverlight application I received the following exception :

The body of this error message is

Line: 56
Error: Unhandled Error in Silverlight Application
Code: 2108
Category: InitializeError
Message: Failed to download the splash screen

Of course since I have the debugger I was going to attach to it, but sadly that was NO HELP. When reading error you notice it says that it failed to download the splash screen. This is really odd because when looking in the source it is there… In an effort to ‘remove the problem’ I removed the line of code from our ASPX page which setup the splash screen as a resource, the line below.

Thinking that this would solve my issue, at least for now, I hit F5 again. Things were different this time, but sadly not for the better. Now in place of getting the error message I simply got the default ‘blue dots’ from silverlight indicating that the xap was trying to load. This was really odd. I did what any developer would do, I hit F5 3-4 more times thinking that the problem would just magically go away, hey it does happen, but as you can guess it did not go away.

Because I had been making a bit of changes in the code and it was possible that I could have accidently really FUBARED my code base I shelved my code, blew away my ENTIRE branch and did a fresh pull. Yea, that did not either.

So my on branch was dead, but my co-worker who is in the same branch was able to launch and run the app just fine. In another effort to see if it was my branch code or my machine I decided to pull down the trunk (the parent of this particular branch) to see if I had the issue there… Yea no, that code worked just fine.

Because I knew it was not my machine it had to be code. I decided to start diffing the files I thought were causing the issues such as our default.aspx page, our login page along with a few other files. As you may have guessed NONE of these files were different.

Because I had been beating my head against this for greater than an hour I decided that I should move on to something else and come back to this later (I guess I was still holding out for the code fairy to magically fix my stuff while I was away).

Well later came and I had to go back to my branch to fix a production issue and this issue was still there. This time however things were a bit different, no the code fairy did not do her magic, my co-worker said ‘hey I got that a few minutes ago’. I was both elated and pissed at the same time. I was elated because maybe NOW I could solve my issue. I was pissed because this was the same co-worker I had talked to about this issue a few hours back and NOW they knew how to solve the issue.

So what was the issue? My co-worker was playing around with some security settings in our web.config file and had accidently committed is changes. It was these changes that was causing my issue. What did he change? He did 2 things

1) He setup a deny ALL authorization rule

2) He setup other rules to only allow a few pages to be open as such

The 2nd change was not a huge issue, it was the 1st one that was killing me. Because he had turned off anon access to the site my xap could not load and because my xap could not load the splash screen could not be presented to the user and for what ever reason Silverlight decided that in place of providing a meaningful message it would simply say it could not find my splash screen resource.

Since I knew the issue I was able to change my rule from deny to allow (in #1) and re-run the application…. finally I could fix bugs I created

The moral of the story here is that if you get an error saying you cannot access a resource in your xap file double check that IIS has access to the xap because if it does not you may get this issue.

The other moral of the story is that it should be 100% legal to cane a co-worker who commits a change that breaks you and does not even realize it. Ok caning may be harsh, at least they should buy you a beer.

Till next time,

How to Show a deleted List Item with a Strike Through in XAML

Derik Whittaker — Sun, 08 Jan 2012 13:12:44 GMT

When building applications it is very common to have a set of screens which are basically list/edit screens. And when having these list/edit screens it is also common to allow users to delete a row. In this post I am going to show how you can add a neat little UI wrinkle to your deleting action which will be visually appealing but will also allow users to undo their changes with ease.

If you take a look at the screen shot below you will notice that I have a data grid with 2 line items. You should also notice that at the far right of each row is a ‘Red X’ which can be used to delete that selected row. Commonly when you have this type of delete action the row will be removed from the UI in real time. Having the row removed in real time is ok but it does give the user an easy way to undo their actions prior to committing their changes. What I would like to do is change this.

In the screen shot below you can see how we have accomplished the ability to mark a row as being deleted yet still give the user the ability to undo a given deletion. What we have done is 2 things.

In place of actually removing the row from the grid we implemented the strike through to show the user that row will be removed when the save their changes.
We removed the delete icon and replaced it with the add icon

Since we know what we want to accomplish how do we actually do it.

Setting up your model to have Deleted bool property
In order for this whole thing to work you will need to have some sort of bool property on your underlying model which stored the Deleted state of a given row.

	private bool _deleted;
        public bool Deleted
        {
            get
            {
                return _deleted;
            }
            set
            {
                _deleted = value;

                OnPropertyChanged(() => Deleted);
            }
        }

Setting up your XAML to have the strike through
In my XAML we are using the stock DataGrid for Silverlight and we are templating each column in the grid. For the columns which we want to implement the strike though we need to add some xaml which will only be visible WHEN Deleted flag of the given row is true. Here is snapshot of our XAML

Things to pay attention to in the above XAML are
1) We have both a TextBlock and a Rectangle element in our cell, however the Rectangle’s visibility is being set based on the Deleted flag. To set this visibility we are using a BooleanToVisiblity converter (will put that code at the end of this post)
2) In the above case the margin on the Rectangle is Margin=”4,0,0,0” and this is because it is far left column in our grid and we don’t want the line to butt up against the edge. In the middle columns we don’t want a margin in order to appear to be a complete line. However in our far right column we want to setup the margin as Margin=”0,0,4,0” in order to not butt up against the right hand edge.
Setting up your XAML to swap action buttons based on the deleted state
To enable the swapping of our buttons based on the Deleted flag we basically will do the same as above w/ the strike through lines but in place of the visibility being swapped on a Rectangle we will do it on a Button element.

BoolenToVisibilityConverter Code

	public class BooleanToVisibilityConverter : IValueConverter
	{
        public Visibility TrueValue { get; set; }
        public Visibility FalseValue { get; set; }

        public BooleanToVisibilityConverter()
        {
            TrueValue = Visibility.Visible;
            FalseValue = Visibility.Collapsed;
        }

		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
            if (value == null)
            {
                return Visibility.Collapsed;
            }

			return ((bool) value) ? TrueValue : FalseValue;
		}

		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
			throw new NotImplementedException();
		}
	}

As you can see you can implement a slick UI which shows the user an item has been deleted with very little effort.

Till next time,

Building Async WCF Services in Silverlight with Channelfactory

Derik Whittaker — Sat, 17 Dec 2011 18:23:04 GMT

If you have created any silverlight applications which need to communicate to a WCF Endpoint you know that you must communicate with WCF via Async actions. As you may know there are multiple ways to get your Silverlight application to communicate with a WCF service. One way is to simply create a Service Reference, aka proxy. The other is to use the ChannelFactory and a shared interface. There are many good references on the net on why one is better than the other but personally I prefer to use the ChannelFactory approach as it allows for cleaner separation of concerns and it allows me to share the same interfaces/models on both side of the wire. Of course this really only works in a closed development scenario, one where you control both sides of the wire.

The issue with using the Channelfactory pattern is that by default it will create synchronous endpoints for use and this is not allowed in Silverlight. However this problem is easily solved for you and we will take a look at how to solve this.

When you typically setup a WCF OperationContract you typically do something like the following:

[OperationContract]
List<Make> GetMakes();

However as you may have guessed this will create a synchronous method/endpoint when you use the ChanelFactory. In order to use this in WCF you need to make a slight change to your setup. You will need to instruct the Contract that you are following the AsyncPattern . The code below will show you how using the AsyncPattern changes your setup.

[OperationContract(AsyncPattern = true)]
IAsyncResult BeginGetMakes(AsyncCallback callback, object state);
IList<Make> EndGetMakes(IAsyncResult result);

As you can see from above, using the AsyncPattern = true pattern does mean we need to create 2 methods not just 1. We should take a closer look at these to better understand what is going one.

In the first method we are creating the ‘begin’ call which will return us back a IAsyncResult which will later be provided to the End method.
In the second method we are making a call and passing in the IAsyncResult instance provided to us via the begin call. It is this second method which will return us back our actual data.

Now that we know how to create our OperationContract we should take a look at how to create our implementation of these contracts. The code below will illustrate how to do this

public IAsyncResult BeginGetMakes( AsyncCallback callback, object state )
{
    var db = new AutomobilesEntities();

    var makes = db.Makes.Select( m => new Make {Name = m.Name} ).ToList();

    return new CompletedAsyncResult>(makes);
}

public IList EndGetMakes( IAsyncResult result )
{
    var completedAsyncResult = result as CompletedAsyncResult>;

    return completedAsyncResult != null ? completedAsyncResult.Data : new List();
}

Taking a closer look above you should notice that the Begin method will actually do the ‘heavy’ lifting in terms of performing any real logic. This method also returns back a AsyncResult class (see below for that class) which will be passed into the ending call The End call. The End call will accept the provided AsyncResult instance and pull out the data payload inside of it. It will then pass this payload back as the actual results you were expecting.

Now that we know how to create an Async endpoint how to we spin up an endpoint via the ChannelFactory and make our WCF call work. Take a look at the code below for that example.

var binding = new BasicHttpBinding(BasicHttpSecurityMode.None)
                              {
                                  MaxBufferSize = 2147483647,
                                  MaxReceivedMessageSize = 2147483647
                              };
            
var endpointAddress = new EndpointAddress(fullEndpointAddress);
var channelFactory = new ChannelFactory(binding, endpointAddress);

var channel = channelFactory.CreateChannel();

AsyncCallback callback = result =>
                                {
                                    var endGetMakes = channel.EndGetMakes(result);

                                    Debug.WriteLine( "I Have Makes" );
                                };

channel.BeginGetMakes(callback, channel);

The magic in the code above which makes this all work is to create the pointer to the AsyncCallback instance and to provide this in your Begin call.

This is the class I used for encapsulating our IAsyncResult

public class CompletedAsyncResult : IAsyncResult
{
    T data;

    public CompletedAsyncResult(T data)
    { this.data = data; }

    public T Data
    { get { return data; } }

    #region IAsyncResult Members

    public object AsyncState
    { get { return (object)data; } }

    public WaitHandle AsyncWaitHandle
    { get { throw new Exception("The method or operation is not implemented."); } }

    public bool CompletedSynchronously
    { get { return true; } }

    public bool IsCompleted
    { get { return true; } }
    #endregion
}

Using the Async Pattern in WCF is a bit more work but it will allow you to do 2 things. 1) Use the Channelfactory in WCF and 2) Create async service calls to allow your application to continue working while you wait for your call to come back.

Till next time,

Runtime Exception for PageIndex of a DataPager

Derik Whittaker — Tue, 29 Nov 2011 15:25:00 GMT

Today I was building a UI in Silverlight which needed a Data Grid and a Data Pager. When I setup my pager I had it bound to the various properties that I cared about (Source, PageIndex, PageSize, etc) via my ViewModel. However when I ran the page for the first time I received the error below

At first I was a bit stumped because why in the world would I want to set my Page Index to –1 (as an FYI my Source property is NULL when first bound because of the way we lazy fetch our data. In order to get around this I did what the error told me and set my Page Index to default to –1. This worked… kinda. See it worked the first time I loaded the screen when there was NO data loaded in memory. Every subsequent loading of the page threw another exception telling me that my default Page Index had to be >= 0.

As I sat there scratching my head it dawned on me that the issue was due to the way that the XAML engine reads/parses the elements (left to right, top to bottom). I reset my default Page Index to 0 and moved my Source property to the left of my PageIndex property and this worked. Take a look below at my XAML to see the difference.

Original XAML

Correct XAML

The moral of the story is that you need to pay attention to the order (left to right/top to bottom) of your XAML properties in some places.

Till next time,

Using MVVM with the AutoCompleteTextBox in Silverlight 4

Derik Whittaker — Fri, 18 Nov 2011 22:25:00 GMT

The AutoCompleteTextBox is a great tool in Silverlight to allow you to provide relevant information to your users as they are typing as seen below:

But there are a few issues with this control

Pretty much every sample on the net uses the code behind to do the heavy lifting and not binding
It will not update the VM text box in real time, which is needed if you want to do on the fly filtering

In this post I will walk you though how to setup your AutoCompleteText box and we will learn how to do 3 things

Use MVVM to populate and use the control
Use a custom Behavior to allow the property backing the control to be updated in real time
Use a command to trigger background searches on the fly

Using MVVM to populate your control:

In order to populate your AutoCompleteTextBox you will need to bind something to the ItemSource property of the control as such:

ItemsSource="{Binding KeywordSearchSource}"

I am sure you are wondering what the KeywordSearchSource is? Well it is simple a property which returns a IEnumerable<string>

       public IEnumerable KeywordSearchSource
        {
            get
            {
                return SomeListOfValues.Select( x => x.TextValue );
            }
        }

The next thing you will want to do is setup a property in your view to handle the current value inside the control. This is needed because we are binding and not using the code behind. You can do this as below:

Text="{Binding KeywordSearchText, Mode=TwoWay}"

The trick to above is to remember to mark this as being TwoWay or you will not get the results you are expecting

        private string _keywordSearchText;
        public string KeywordSearchText
        {
            get { return _keywordSearchText; }
            set 
            {
                _keywordSearchText = value; 

                NotifyOfPropertyChange(() => KeywordSearchText); 
            }
        }

That does it for the MVVM portion of the setup. However, you may already know that when binding to a text box the actual binding does not trigger until AFTER the user leaves the control, in many cases this is good but not in our case. In our case I want to start the filter process as the user types (which is fine as I have all the filter data local, this is NOT fine if I have to do any type of remote call to filter the data as this will cause a bad user experience).

Triggering the binding in real time:

As I stated above the binding of a text box (or autocomplete text box) does not fire until you leave the control and this is not the desired action for us. In order to get around this we are going to create a custom behavior to allow the text box binding to push the value into our property in real time.

Our custom behavior is going to be called the ImmediateUpdateBehavior and the code can be found below.

    public class ImmediateUpdateBehavior : Behavior
    {
        protected override void OnAttached()
        {
            AssociatedObject.TextChanged += OnTextChanged;
        }

        void OnTextChanged(object sender, RoutedEventArgs e)
        {
            AssociatedObject.GetBindingExpression(AutoCompleteBox.TextProperty).UpdateSource();
        }

        protected override void OnDetaching()
        {
            AssociatedObject.TextChanged -= OnTextChanged;
        }
    }

In the behavior above you can see that all we are pretty much doing is listing for the TextChanged event and forcing the binding to fire. This is a nice way to do it when developing with MVVM.

Once we have our behavior created we need to attach it to our AutoCompleteTextBox and that can be found below.

Triggering the filtering to fire as we type:

I am going to chose to do this via a Command. I guess you could have the changing value of the property do the same thing but I typically am against doing this as I feel it is hiding the implementation details of the filtering. I also feel that this can cause unwanted side effects in your code if you are not careful.

In order to use the command I am going to use the EventTrigger behavior in silverlight to call my command. You can see this XAML below.

In the XAML above you see I am calling the KeywordSearchFilterCommand. This command will end up calling the code below

        private void KeywordSearchFilter()
        {
	    // Key here is i am simply notifying to rebuind these values and allowing the underlying methods to filter the data
            NotifyOfPropertyChange(() => SomeListOfValues);
            NotifyOfPropertyChange(() => PagedSomeListOfValues);
        }

As you can see from the above I am not doing anything special in the filter method I am simply notifying of property change and letting the various properties doing their own filtering. The code below is the filtering for my PagedSomeListOfValues property (we are doing client side paging here)

        public ObservableCollection PagedSomeListOfValues
        {
            get
            {
                var skipCount = PageIndex > 0 ? PageIndex * PageSize : 0;
                var takeCount = PageSize;
                var tempItems= SomeListOfValues.Skip(skipCount).Take(takeCount).ToList();

                var observableLinks = new ObservableCollection();
                observableLinks.SetContents(tempItems);

                return observableLinks;
            }
        }

Once you have your 2 properties (list and search field) bound to the AutoCompleteTextBox you are almost there, but not quite. In order to make this fully work you will want to also you the custom behavior and the filter command.

Hope this helps.

Till next time,

Silverlight Code 2104 – Could not download the silverlight app error

Derik Whittaker — Mon, 10 Oct 2011 13:26:00 GMT

Today after pulling latest from our TFS server, and doing a few auto merges (turns out that the AutoMerge is at fault here again)(some day I will learn NOT to trust TFS to do anything, but doubt it) I tried to fire up our Silverlight Browser app and I was presented with this lovely error.

I was a bit stumped by this and did some google searches and everything wanted me to check my IIS settings. I was pretty sure this could not be the cause because this was all local dev and we have not made any changes. After digging around in my change log I noticed that during a merge our .xap file was renamed (this was with intent). However, the server project did not pick up this rename change (technically there were 2 .xap entries in my proj file which did not help either). So when server was trying to serve up the newly named .xap file it was not found, hence the error

There are 2 possible solutions to this problem (assuming it is non-IIS)

Make sure that the .xap file being served up by your server components is in fact the CORRECT .xap file your client wants. I actually had to open the .proj file directly for the server to make the changes as the IDE will only show one .xap file I wanted.
Make sure that your Default.aspx (or what ever page servers ur silverlight .xap file) has the correct file name in the source folder

Hope this helps,

Till next time,

Getting around the Caching in the Silverlight Image Control

Derik Whittaker — Fri, 23 Sep 2011 17:24:42 GMT

Today I ran into a very odd issue when trying to reload the Silverlight Image Control with a new image which happened to have the EXACT same URL as the previously loaded image.

See in our application we provide a way to upload an image and also allow the user to not simply create a new image but rather swap out an existing image with a new one but leave the URL the exact same. During my development I really did not pay attention to or care that when I swapped out the image instance and raised the property changed event that the actual image was changing from the old to the new.

When I noticed that this was not working as expected I assumed that I could kill the instance of the object which was being bound to the <Image /> control in Silverlight and reset it w/ the new instance and that would trigger the reloading of the image via its url, however as you may have guessed this did not work. I had setup the binding to the control as follows:

Source="{Binding CurrentImage.SourceUrl}

I liked the binding code above (loading via URL rather than binary data) because I could easily hook into the loaded/failed events of the control in order to indicate to the user that there was something wrong with the image they are using.

It turns out (based on observations and Fiddler traces) that the Silverlight Image control will cache the current image and will NOT refresh/reload the image if the URL does not change. I guess the assumption is that if the same URL is provided multiple times don’t to waste cycles reloading it to only show the same image which is in memory.

This behavior works great in most cases…well until you don’t want it to work like this. I thought of a few ways to get around this issue, such as binding to a BitmapImage or binding to a byte[] array. However I really wanted to reduce the amount of rework or modifications I needed to make to the existing VM.

The solution we found that solved the issue was to bind to a image source url in the VM directly (did not want to dirty the existing SourceUrl Property as others user it and this work around is PURELY as UI issue, not a domain one) to a Url property in the VM and append an arbitrary query string value to the end of the URL.

       public string CurrentImageSourceUrl
        {
            get
            {
                if (CurrentImage != null)
                {
                    return string.Format("{0}?id={1}", CurrentImage.SourceUrl, Guid.NewGuid().ToString());
                }

                return string.Empty;
            }
        }

When I added the querystring value as above I was able to leave my existing VM logic alone and have the Image control reload the image correctly because it assumed that since my URL has changed that the images are different. I know this is a bit of a hack but hey it worked . If anyone knows of a better way to solve this please let me know.

Till next time,

Unit Testing Silverlight from MSTest–Forcing VS to use the right Silverlight Assemblies

Derik Whittaker — Fri, 26 Aug 2011 13:13:14 GMT

Ok, silverlight and unit testing just plan sucks, I firmly believe that the devs for silverlight did NOT care about testability, but that is off topic. When doing any type of unit testing (and not with the built in silverlight testing framework which actually runs the app, talking code level testing) you will quickly run into an issue of version mis-match.

The issue with the version mis-match is that VS wants to push the 4.0 version of your assemblies, even when you add direct reference to the 2.0.5 version (silverlight version). When this happens your tests will fail with an error telling you that your assemblies are not the right version. And if you are like me you will try over and over to ‘force’ vs to reference the right version and it will fail. The good news is that there IS a way around this, but it is a bit of a hack

How to get around this issue (at least one way)

Move copies of your desired Silverlight .dlls into a local library folder. I have the following in my folder
1. System.ComponentModel.DataAnnotations.dll
2. System.Net.dll
3. System.Runtime.Serialization.dll
4. System.ServiceModel.dll
5. System.ServiceModel.DomainServices.Client.dll
6. System.Windows.dll
7. System.Xml.dll
Open up your unit tests .proj file in notepad or any text editor

Find the <Reference> entry to the correct silverlight dll you want and create a hint path which points to your LOCAL dll
See this example:
<Reference Include="System.ServiceModel">
<HintPath>..\..\..\Libraries\Silverlight Test dlls\2.0.5 DLLs\System.ServiceModel.dll</HintPath>
</Reference>

Save the .proj file
Open it back up in VS (or reload)
Verify the correct version is not being used by viewing the properties of the dll in VS
Get back to testing

As you can see this is fixable, but it is also a bit of a hack/work around. However this little bit of pain is worth the gains of adding tests to your code. Now if only silverlight as a framework was more testable

Till next time,

Hey, why is my ViewModelLocator not being called when creating a view?

Derik Whittaker — Thu, 04 Aug 2011 16:44:31 GMT

Ok, this is going to seem really stupid, cause it was, but I thought I would share my pain incase someone has the same issue.

A while back I blogged about how to create a Convention Based View Model Location using Ninject in a MVVM/Silverlight Application in this post I talk about how to create a VMLocator, but to be honest my issue would also be visible if you rolled your own so you do not need to review my prior post if you do not want.

My issue was that I created a child window in my Silverlight application and setup my binding for the VMLocator as normal

DataContext="{Binding Source={StaticResource VMLocator}, Converter={StaticResource VMIndexerConverter}}"

However, when I created the instance of the View the VMLocator was not being invoked and I was perplexed. After talking it over w/ a co-worker it dawned on me that in my overloaded constructor in my View I did NOT setup the call to InitializeComponent(); correctly, OK i plan forgot to add it. Once I added the call to InitializeComponent(); everything just worked and the world was a happy place.

The moral of the story is this, if you are trying to use the VMLocator pattern via setting the DataContext in XAML you MUST make sure you have a call to InitializeComponent(); in your constructor or you will not get the results you expected.

Till next time,

Working with Live Tiles in WP7 Mango–Creating, Updating and Deleting them

Derik Whittaker — Sat, 16 Jul 2011 19:24:15 GMT

***** UPDATE *****
If you would like to see a video on this topic check out Episode 195 @ Dimecasts.Net
*******************

When Windows Phone 7 was first announced one of its distinguishing features of the OS compared to the iPhone or the Android was its Live Tile concept. These live tiles allowed for the content on the tile to be updated and changed remotely to signify a change in the backend application, the weather applications where the info on the tile changes to reflect the current weather at your location is the typical example. This was a cool feature and all but with Mango they have stepped that up a notch.

In this post we will take a look at how we can create not only Application Tile content but also take a look at how to Create, Edit and Delete secondary tiles. A secondary tile is a tile which can provide a deep link directly into a given screen in your application. This will allow someone to skip directly to a page w/ important data with ease.

Creating the Application Tile via code

public void CreateApplicationTile()
{
    var appTile = ShellTile.ActiveTiles.First();

    if (appTile != null)
    {
        var standardTile = new StandardTileData
        {
            Title = "Live Tile Demo",
            BackgroundImage = new Uri("Images/SecondaryTileFrontIcon.jpg", UriKind.Relative),
            Count = 13,	// any number can go here, leaving this null shows NO number
            BackTitle = "Back Title",
            //BackBackgroundImage = new Uri("Images/ApplicationTileIcon.jpg", UriKind.Relative),
            BackContent = "Live Tile Demo Back Title"
        };

        appTile.Update(standardTile);
    }            
}

When creating, updating or deleting any tiles you will work from the ShellTile class which can be found in the Microsoft.Phone.Shell namespace. This class has various static methods on it which will allow you to work with the tiles you want to create.

Also, when creating the tiles you do NOT need to fill out items such as Count (leaving null will show no value) or any of the Back tile properties (BackTitle, BackBackgroundImage and BackContent). really the only items you should populate is the Title and the BackgroundImage

Finally, in the Beta build of WP7 Mango creating this application tile via code does NOT actually pin your application to the start screen, it simply sets up the metadata so that when it is pinned it will be populated.

Creating the Secondary Tile via code

So what is a Secondary tile? A secondary tile is a tile which can be created programmatically and is similar to an Application tile but with one big difference. An Application tile will simply launch the application where a Secondary tile allows for you to launch the application and navigate directly to a given page in your application.

public void CreateSecondaryTile()
{
    var foundTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DetailId=123"));

    if (foundTile == null)
    {
        var secondaryTile = new StandardTileData
                                {
                                    BackgroundImage = new Uri("Images/SecondaryTileFrontIcon.jpg", UriKind.Relative),
                                    Title = "Secondary Tile",
                                    Count = null,
                                    BackTitle = "Back of Tile",
                                    BackContent = "You can put some data here......",
                                    //BackBackgroundImage = new Uri("Images/SecondaryTileFrontIcon.jpg", UriKind.Relative)
                                };
                
        ShellTile.Create(new Uri("/Views/DetailsPage.xaml?DetailId=123", UriKind.Relative), secondaryTile);
    }            
}

After running the code above you should notice one thing very quickly and that is that you will be navigated away from your application and back to the start menu. This is currently by design (although I think it is a really bad idea) and will cause your application to tombstone. Your users can get back into your application by either clicking on the tile or hitting the back button.

One key item here is that when you call the .Create method on the Shelltile object make sure you put a valid Uri. This URI along with the provided query string will allow WP7 Mango to navigate directly to this page w/ the provided query string data. Now when the user navigates to this page you WILL be required to parse out the content of the query string in order to repopulate the screen.

Also, your tiles should look something like below:

Updating an existing Tile via code

public void EditExistingTile()
{
    var foundTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DetailId=123"));

    if (foundTile != null)
    {
        // what sucks here is we cannot get access to the information on the existing tile...
        var liveTile = new StandardTileData
        {
            Title = "New Tile Text"
        };

        foundTile.Update(liveTile);
    }
}

The code above will search for (via the ShellTile object) a given tile and overlay any file tile with a new StandardTileData object. What I totally hate here is that I have not seen any way to get ahold of the metadata on the found tile (Title, image, count, etc) which means you must repopulate it from scratch when you want to make a change. This is not a huge issue but just sucks.

This will NOT cause the user to navigate away from the app it will simply update any found secondary tile.

Deleting an existing Tile via code

public void DeleteExistingTile()
{
    var foundTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("DetailId=123"));

    // If the Tile was found, then delete it.
    if (foundTile != null)
    {
        foundTile.Delete();
    }
}

If we can find an existing tile we can simply call the ‘Delete’ method on it. This will NOT cause the user to navigate away from the app it will simply remove any secondary tile.

As you can see working with the Live Tiles in WP7 mango is cake which is great because this is an awesomely powerful new feature.

Till next time,

Using Ninject (with CommonServiceLocator) with Caliburn.Micro on WP7

Derik Whittaker — Fri, 08 Jul 2011 09:35:54 GMT

As I am in the process of rebuilding my Dimecasts.net WP7 application from the ground up to work with WP7 Mango one of the things I wanted to do was fully use the Caliburn.Micro framework. Caliburn.Micro has its own built in IoC container called the PhoneContainer which provides basic Dependency Injection and this container works great but I have a bit of history using Ninject with my Wp7 applications so I wanted to replace the usage of the PhoneContainer with my Ninject, or more precisely the CommonServiceLocator implementation of Ninject. I knew this had to be doable because there are examples of using MEF with Caliburn.Micro

Turns out I was right using Ninject w/ the CommonServiceLocator inside of Caliburn.Micro is doable and is very easy to boot. Of course before I set out to build my own implementation of this I decided to google for it and this post was about the closest I could find to working code, but this code was NOT complete, at least for the current CM implementation. Even though the post I found was not complete working code it was a great headstart in what needed to be done.

Here is how I got Caliburn.Micro to use Ninject as its IoC container.

Step 1: Register the setup bootstrapper that you want to use

You will need to open up your App.xaml file and put in the code below.

    <!--Application Resources-->
    <Application.Resources>
    	<local:NinjectBootstrapper x:Key="bootstrapper" />
    </Application.Resources>

Step 2: Create the a NinjectBootstrapper which inherits off of PhoneBootstrapper

Caliburn.Micor uses its bootstrapper to do some basic setup and configuration work. It is here that we want to extend this and add support for Ninject and the CommonServiceLocator. Go ahead and create a class as you see below.

public class NinjectBootstrapper : PhoneBootstrapper
{
    private NinjectContainer _ninjectContainer;

    protected override void Configure()
    {
        _ninjectContainer = new NinjectContainer(RootFrame);

        _ninjectContainer.RegisterDefaultBindings( typeof ( DashboardViewModel ), typeof ( IEventAggregator ) );
        _ninjectContainer.RegisterPhoneServices();

        var ninjectServiceLocator = new NinjectServiceLocator(_ninjectContainer.Kernel);

        ServiceLocator.SetLocatorProvider(() => ninjectServiceLocator);     
    }

    protected override object GetInstance(Type service, string key)
    {
        if (service != null)
        {
            return ServiceLocator.Current.GetInstance( service, key );
        }

        throw new ArgumentNullException("service");
    }

    protected override IEnumerable<object> GetAllInstances(Type service)
    {
        return ServiceLocator.Current.GetAllInstances( service );
    }

    protected override void BuildUp(object instance)
    {
        _ninjectContainer.Kernel.Inject(instance);
    }
}

Step 3: Implement the Ninject Setup logic

As you can see from step 2 I have created a class which actually performs all the direct Ninject setup and I called it the NinjectContainer. Below is the code for this container. You should also note 2 more things:

This container implements IPhoneContainer from Caliburn.Micro
In the RegisterPhoneServices method this is a very manual rebinding of Caliburn.Micro and it is likely that I missed something. This code was a direct port from the default implementation of the Caliburn IoC container setup.

public class NinjectContainer : IPhoneContainer
{
    private readonly IKernel _kernel;
    private readonly Frame _rootFrame;

    public NinjectContainer( Frame rootFrame )
    {
        _kernel = new StandardKernel();
        _rootFrame = rootFrame;
    }

    public event Action<object> Activated;

    public IKernel Kernel
    {
        get { return _kernel; }
    }

    public void RegisterWithPhoneService( Type service, string phoneStateKey, Type implementation )
    {}

    public void RegisterWithAppSettings( Type service, string appSettingsKey, Type implementation )
    {}

    public void RegisterPhoneServices(bool treatViewAsLoaded = false)
    {
        var phoneService = new PhoneApplicationServiceAdapter(_rootFrame);
        var navigationService = new FrameAdapter(_rootFrame, treatViewAsLoaded);
            
        Kernel.Rebind<IPhoneContainer>().ToMethod(x => this);
        Kernel.Rebind<INavigationService>().ToMethod(x => navigationService);
        Kernel.Rebind<IPhoneService>().ToMethod(x => phoneService);
        Kernel.Rebind<IEventAggregatorv().To<EventAggregator>().InSingletonScope();
        Kernel.Rebind<IWindowManager>().To<WindowManager>().InSingletonScope();
        Kernel.Rebind<IVibrateController>().To<SystemVibrateController>().InSingletonScope();
        Kernel.Rebind<ISoundEffectPlayer>().To<XnaSoundEffectPlayer>().InSingletonScope();
        Kernel.Rebind<StorageCoordinator>().To<StorageCoordinator>().InSingletonScope();
        Kernel.Rebind<TaskController>().To<TaskController>().InSingletonScope();
            

        var coordinator = Kernel.Get<StorageCoordinator>();
        coordinator.Start();

        var taskController = Kernel.Get<TaskController>();
        taskController.Start();
    }

    public void RegisterDefaultBindings( params Type[] typesToScanAssembliesFor )
    {
        // scan services
        Kernel.Scan(x =>
        {
            foreach ( var type in typesToScanAssembliesFor )
            {
                x.FromAssemblyContaining( type );
            }
                
            x.Where(type => type.Name.EndsWith("Service"));

            x.BindWithDefaultConventions();

            x.InSingletonScope();
        });

        // scan the rest
        Kernel.Scan(x =>
        {
            foreach (var type in typesToScanAssembliesFor)
            {
                x.FromAssemblyContaining(type);
            }

            x.Where(type => !type.Name.EndsWith("Service"));

            x.BindWithDefaultConventions();
        });
    }
}

Step 4: Hit F5 and see the fruits of your effort

Now if we did everything right your application should not be able to be run and Caliburn.Micro and Ninject (and CSL) as its IoC container.

As you can see you can swap out the built in IoC container w/ Ninject inside of Caliburn.Micro with almost no effort. I hope this helps and others enjoy.

Till next time,

XamlParseException from WP7 Mango and Caliburn.Micro

Derik Whittaker — Sun, 03 Jul 2011 22:41:00 GMT

*** UPDATE: Turns out the is expected as Caliburn will create its own instance of the PhoneApplicationService for you. Also when using Caliburn.Micro make sure that your App.xaml.cs is empty as Caliburn.Micro has better facilities for handling all these actions. ***

Today when I was kicking off a new Wp7 Mango project where I was going to use Caliburn.Micro soup to nuts I quickly ran into the following exception.

Now before I explain what is needed to resolve this error (I hope) let me quickly explain what I had done so far in my project which lead up to this. I did the following:

Created a new WP7 Mango Application (not pivot, not panorama)
Downloaded the latest nightly build of Calibrun.Micro
Opened one of the Caliburn.Micro sample applications and copied it’s WP7AppBootstraper
Hit F5

When I ran the application, which had NOTHING in it other than the default setup contents I received the error above. Since I had not setup the ability to walk though the Caliburn.Micro source (something I have since done) I quickly took another quick scan of the sample WP7 Navigation sample that is part of the Caliburn.Micro source tree to see what I had done differently.

After about 2 minutes of looking I noticed that my App.xaml was a bit different. I had the following in my App.xaml

Just for giggles I commented out the line which setup the PhoneApplicationService (as you see below):

After commenting out the line above I again hit F5. This time my error went away and the application loaded as expected. Now I am not sure of 2 things.

Is this a Mango only issue w/ Caliburn.Micro (assuming it is an issue at ALL w/ CM)
Is this something that should ALWAYS be removed when building a Caliburn.Micro application?

No matter the reason or the cause it did appear to solve my issue. So if you are having the same issue try removing the code above from your app.xaml and see if that helps.

Till next time,

Convention Based View Model Location using Ninject in a MVVM/Silverlight Application

Derik Whittaker — Sat, 02 Jul 2011 11:23:53 GMT

***** UPDATE *****
If you would like to see a video on this topic check out Episode 194 @ Dimecasts.Net
*******************

When building out a Silverlight application (or WPF application for that matter) the MVVM pattern is the pattern of choice for most projects I am aware of. When using MVVM there is a sub pattern which is commonly used which is known as ViewModelLocator. The ViewModelLocator concept basically tries to handle the repetitive task of coupling the View with its ViewModel but doing so in a way which removes any manual coding and it just ‘happens’.

Now if you have done any research on the ViewModel Location I am sure you have run across countless other blog posts out there which explain how to implement in this code, and many of them are great. In fact here are a few which helped me down the path of creating the code I am going to talk about in this post

Simple ViewModel Locator for MVVM by John Papa (this is the post which really kick started this pattern)
Wiring up ViewModel Locator w/ Silverlight
MVVM and ViewModel Location
Another MVVM and ViewModel Location
Caliburn.Micro has an implementation
MVVMLight has an implementation

All of the above posts basically show how to implement this pattern in your application and from what I can tell all of them work and will do the job. However, none of those (minus the Caliburn.Micro) implementations fulfills the one requirement I want which is to totally remove the need to ‘wire’ the ViewModel up to your View if even via XAML. I want to remove this wiring from the XAML because in my mind this still leaves me hard wiring the relationship rather than using convention based wiring. One scenario in which the hard wiring could turn around and bite you is in the times where you rename the view and the view model. If you fail to update your wiring code in XAML you will receive runtime errors.

Here are a few examples:
John Papa’s Implementation

DataContext="{Binding Source={StaticResource VMLocator}, Converter={StaticResource VMIndexerConverter}, ConverterParameter=MainPageViewModel}"

ViewModelLocator’s Implementation

    <UserControl.Resources>
        <ViewModels:EditUsersViewModelLocator x:Key="viewModelLocator"  />
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource viewModelLocator}" Path="ViewModel" />
    </UserControl.DataContext>

I wanted my implementation of toe ViewModelLocator pattern to NOT need to know anything about the actual View or the ViewModel either in the XAML or in the code behind. What I wanted as the following:

DataContext="{Binding Source={StaticResource VMLocator}, Converter={StaticResource VMIndexerConverter}}"

Now you may be looking at my XAML above and comparing it to the XAML from John Papa’s post and be thinking what is really different? The difference is in this segment of code ConverterParameter=MainPageViewModel In his example he ‘hard wires’ the ViewModel which is being used up to the page and I did not want to do that. I wanted to use a standard naming convention (right, convention over configuration) and allow my locator to determine the ViewModel based on the current View.

So how did I implement my ViewModelLocator pattern, well lets take a look.

Code for ViewModelLocator

public class ViewModelLocator
{   
    private static readonly IDictionary<type, type> s_viewModelCache = new Dictionary<type, type>();
        
    public Type GetViewModelTypeForView( Type viewType )
    {
        var viewModelName = ResolveViewModelName(viewType.Name).ToLower();

        // We are try to cache the types in order to remove the assembly scan hit, this is optional of course and 
	// you may not want or need this
	// One thing to point out here is that this code ASSUMES that your view and viewmodel classes are in the 
	//  same assembly.  if this is not true for your project this code will not work as expected.  We made this
	//  assumption because it is true in our project
        var foundViewModelType = GetExistingTypeFromCache(viewType) ?? (from type in viewType.Assembly.GetExportedTypes()
                                                                        where viewModelName.Equals(type.Name.ToLower())
                                                                        select type).FirstOrDefault();
    
        // this will throw a custom exception type, you can use your own if you want
        if (foundViewModelType == null) { throw new ViewModelTypeNotResolvedException(viewModelName, viewType); }

        // Add the found view and viewModel to the cache
        AddToCache(viewType, foundViewModelType);

        return foundViewModelType;
    }

    private void AddToCache(Type viewType, Type foundViewModelType)
    {
        if (!s_viewModelCache.ContainsKey(viewType))
        {
            s_viewModelCache.Add(viewType, foundViewModelType);
        }
    }

    private Type GetExistingTypeFromCache( Type viewType )
    {
        if (s_viewModelCache.ContainsKey(viewType))
        {
            return s_viewModelCache[viewType];
        }

        return null;
    }

    private string ResolveViewModelName(string viewTypeName)
    {
        var asLowerViewTypeName = viewTypeName.ToLower();

	// ***** Below is OUR product's current naming conventions, replace with your own if you want *****
        // check to see if the view ends w/ "View"
        if (asLowerViewTypeName.EndsWith("view"))
        {
            return asLowerViewTypeName.Replace("view", "ViewModel");
        }

        if (asLowerViewTypeName.EndsWith("usercontrol"))
        {
            return asLowerViewTypeName.Replace("usercontrol", "ViewModel");
        }

        if (asLowerViewTypeName.EndsWith("childwindow"))
        {
            return asLowerViewTypeName.Replace("childwindow", "ViewModel");
        }

        return string.Concat(viewTypeName, "ViewModel");
    }

    public static IDictionary<type, type> ViewModelCache { get { return s_viewModelCache; } }
}

Code for IndexConverter

public class IndexerConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    {
        Contract.Requires<ArgumentNullException>(value != null);

        var locator = value as ViewModelLocator;

        Contract.Assume(locator != null,
                        string.Format(
                            "The provided converter value was expected to be of type {0} but was provided as type {1} which is not acceptable for this converter",
                            typeof(ViewModelLocator).Name,
                            value.GetType().Name));

        var viewType = GetViewType();

        var viewModelType = locator.GetViewModelTypeForView(viewType);

	// We are using the ServiceLocator pattern which is wrapping Ninject
        var viewModelInstance = ServiceLocator.Current.GetInstance(viewModelType);

        return viewModelInstance;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
        
    // This does incur a perf hit by looking at the stack trace, but in 
    //  my opinion this hit is worth it compared to having to manually wire items up
    private Type GetViewType()
    {
        var stack = new StackTrace();

        return stack.GetFrames()
            .Select(f => f.GetMethod())
            .Where(m => m.Name == "InitializeComponent")
            .Select(m => m.DeclaringType)
            .FirstOrDefault();
    }

}

Code needed in your App.Xaml

<MVVMLib:ViewModelLocator x:Key="VMLocator" />
<MVVMLib:IndexerConverter x:Key="VMIndexerConverter" />

Code for the custom Exception ViewModelTypeNotResolvedException

public class ViewModelTypeNotResolvedException : Exception
{
    public string ViewModelName { get; set; }
    public Type ViewName { get; set; }

    // Commented this out because i do not want to be able to create this without the VMName or the VName
    //public ViewModelTypeNotResolvedException() {}

    /// 
    /// Will build an instance of the exception and push in a default message based on the viewModelname and view properties.
    /// *** This is the lazy way to create the message ***
    /// 
    /// The name of the viewModel which was not able to be created or found
    /// The type for the view we were trying to bind the VM to
    public ViewModelTypeNotResolvedException(string viewModelName, Type view)
        : base(string.Format("When trying to resolve the view model {0} it was not found in the same assembly as the view {1}", viewModelName, view.Name))
    {
        ViewModelName = viewModelName;
        ViewName = view;            
    }

    /// 
    /// Will build an instance of the exception
    /// 
    /// The name of the viewModel which was not able to be created or found
    /// The type for the view we were trying to bind the VM to
    /// 
    public ViewModelTypeNotResolvedException(string viewModelName, Type view, string message) : base(message)
    {
        ViewModelName = viewModelName;
        ViewName = view;
    }

    /// 
    /// Will build an instance of the exception
    /// 
    /// The name of the viewModel which was not able to be created or found
    /// The type for the view we were trying to bind the VM to
    /// 
    /// 
    public ViewModelTypeNotResolvedException(string viewModelName, Type view, string message, Exception innerException)
        : base(message, innerException)
    {
        ViewModelName = viewModelName;
        ViewName = view;
    }
}

As you can see the code needed for this is not that complicated or difficult to implement.

One thing to understand with this post, I am NOT saying that the other implementations are bad or they do not work. In fact I am saying the exact opposite, they all are great and they all work and I used all their implementations as baseline for my implementation. What I am saying as the other examples did not meet my EXACT needs.

Please take a look at the code and let me know where I went wrong or what your thoughts are.

Till next time,

Help RIA Services is NOT returning my entire object graph

Derik Whittaker — Thu, 23 Jun 2011 16:36:55 GMT

***** NOTE: I (we) may be doing this 100% wrong so if I am please let me know a better way *****

Ok, this is a complete NEWBIE post by me, but hey I am just learning WCF RIA Services. If you are like me and you are learning you may run into the scenario I have a few times where data is present during inspection on the server side but NOT on the client side.

If you run into this scenario there are 2 things you should check;

You have explicitly included our child objects in your EF query
You have provided the correct ‘Include’ property on your child entity via the MetadataTypeAttribute

How to ensure your EF queries have included your child objects?

// The key to the EF logic below is the .Include statement
public IQueryable GetLinkCollection(int clientID)
{
	var result = ObjectContext.kLinkCollections
                .Include("LinkCollectionType")
                .Include("QuickLinks.ClientLink")
                .Where(m => m.ClientID == clientID);

	return result;
}

How to ensure your RIA services have your child objects exposed?

// The trick to this code below is the [Include] attribute on your child objects
[MetadataTypeAttribute(typeof(LinkCollection.LinkCollectionMetadata))]
public partial class LinkCollection
{
	internal sealed class LinkCollectionMetadata
        {

            // Metadata classes are not meant to be instantiated.
            private LinkCollectionMetadata()
            {
                
            }

            [Include]
            public EntityCollection<QuickLink> QuickLinks { get; set; }

            [Include]
            public ClientQuickLinkCollectionType LinkCollectionType { get; set; }

        }
}

Like I said above it is possible that I am doing something completely wrong, but ensuring the above 2 items are setup correctly has solved my problem. I should also note that the class tree which is being returned back from the RIA call was created AFTER the initial setup wizard was run and we cannot find anyway to re-run the wizard without blowing away the original code and having it recreated.

Hope this helps the next newbie

Till next time,

Using Binding to create Panels/Pivots in your WP7 Application

Derik Whittaker — Tue, 19 Apr 2011 10:19:00 GMT

If you are building a Windows Phone 7 application it is very likely that you are going to incorporate either the Panoramic or Pivot layouts in your app. In most cases when you are building these your panels/pivots are fairly static. However, what do you do when the number of panels/pivots needs to changed based on environmental setting (ie data or user preferences)?

One solution is to use the code behind and manually create your panels/pivots. However, I personally feel this method is clunky and fugly. I would rather stay as close to the MvvM pattern as possible as well as harness the power of Binding to build my UI on the fly based on values inside my view model. In this post we are going to take a look at how simple it is to bind your View Model to your UI and have your panels/pivots built for you.

Create the View Model’s to Bind to the UI

Main View Model – This is the one bound directly to the UI

    public class DashboardViewModel : ViewModelBase
    {
        // This is an internal class and does not change the implementation...
        private readonly IDashboardService _dashboardService;

        public DashboardViewModel( IDashboardService dashboardService )
        {
            _dashboardService = dashboardService;
        }


        public string Title 
        {
            get { return _dashboardService.DashboardTitle; } 
            set 
            { 
                _dashboardService.DashboardTitle = value;
                RaisePropertyChangedEventImmediately( "Title" );
            }
        }

        public ObservableCollection PanelCollection
        {
            get { return _dashboardService.PanelItems; }
            set
            {
                _dashboardService.PanelItems = value;
                RaisePropertyChangedEventImmediately( "PanelCollection" );
            }
        }
    }

In the class above there are 2 properties we need to know about.

Title – This is the property in the VM which will create the actual title for the entire Panorama control
PanelCollection – This is the property in the VM which contains the list of items which will be used to generate each panel/pivot in the UI

Panel View Model – These are the ones which will build each panel/pivot

    public interface IDashboardPanelItemViewModel
    {
        DashboardPanelType DashboardPanelType { get; set; }

        string DashboardTitle { get; set; }

        ObservableCollection<IDashboardPanelListItemViewModel>: PanelListItems { get; set; }
    }

In the class (actually it is an interface) above there are 3 properties we need to worry about

DashboardPanelType – This really does not change how the panels are bound to the UI but rather is used to determine how the actual panel data is displayed (future post on this)
DashboardTitle – This is the property which will create the text title for the panel/pivot
PanelListItems – This is the property which will contain the individual data points which will be displayed on the created panel/pivot

Create the xaml to hookup the binding

When binding the Main View Model (the first class above) to the UI we need to do 2 things

Need to bind our main View Model to the Panorama (or PIvot)
Need to bind the individual list item from the element in PanelCollection to the panel

When looking at the 2 snippets above you want to pay attention to the ItemsSource Property in both.

The End Result (bit fugly, but this is for demo only)

As you can using Binding to create your panels/pivots based on the data in your view model is super simple and requires NO code behind code to accomplish. Please be aware though that you should NOT generate too many panels/pivots as that is a massive UI design smell.

Till next time,