WP7 + CM + Simple Databinding

Nov 9, 2010 at 3:19 AM
Edited Nov 9, 2010 at 3:33 PM

Hi -

  I have created Page1.xaml, it is a PhoneApplicationPage.

  It has a corresponding viewmodel, Page1ViewModel which extends the CM.Screen.

  I have a simple user control called uc1.xaml.

  In Page1.xaml I have a ListBox, <ListBox x:Name="TestList" ItemsSource="{Binding=...}"/>

  Assuming i want one way binding and I want to bind to a Property on the Page1ViewModel creating instances of uc1 to put inside the listbox,what would the binding look like if the name of the property is ActiveUserControls?

 I realize this is a basic binding question but i'm new to silverlight and wp7 development.  I'm looking at the ViewModelBinder.BindProperties method and the ConventionManager but it is not making much sense to me.

 Thanks - 

 

Nov 9, 2010 at 4:14 AM
Edited Nov 9, 2010 at 4:14 AM

Looking at the CM.ConventionManager class  I see the ItemsControl (which ListBox extends) is being added in the Constructor.    I can see the Loaded string being set for the event name.   I realize the DataContext is the ViewModel but I still can't figure out what the property on the ViewModel should be called and what type it should be.   Essentially I want to bind the listbox to a List<uc1> items.  

I come from the Windows Forms world - you know the simple binding world.  :-)

 

 

Nov 9, 2010 at 6:04 AM

Hi there,

 

I might be missing something, but for that type of binding you need to name the list as the property. So assuming you have property in the model:

IList<someCrazyAssType> MyHumbleList { get; set; }

you will have a xaml like:

<ListBox x:Name="MyHumbleList" />

 

If this answers your question you should really take a look at the documentation http://caliburnmicro.codeplex.com/documentation (really good stuff in there).

Cheers,

Nov 9, 2010 at 8:43 AM

@Rdotlee
You are probably doing something "wrong"; for example, CM.Screen is not intended to be a base class for Views, but for ViewModels.
Let me elaborate a bit. CM is mainly (but not exclusively) built around MVVM pattern; the pattern focuses on building a logical (i.e. not visual) model for the UI, aimed to drive the interaction of the user with the application. This is called "ViewModel".

On the other hand, the View is kept free from application logic concerns, with the only task of representing the ViewModel state in a visual fashion. This is usually accoomplished with bindings, with little or no code-behind at all.
You can have a look at Rob's "MVVM Study" at http://caliburnproject.org/

This approach is somewhat disconcerting when coming from Winform, which is very View-centric. You have to stop thinking in terms of controls and start modeling your application as a tree of smaller parts, each responsible for a portion of the whole video screen.
CM helps you to build such a (view)model: CM.Screen is a base class aimed to (logically) represent an atomic UI piece -a leaf in the UI tree-  while Conductor<> (and its descendants) manages the lifecycle of one or more sub-screens -intermediary nodes in the UI tree-.
You might want to have a look at the documentation: http://caliburnmicro.codeplex.com/wikipage?title=Screens%2c%20Conductors%20and%20Composition

That being said, you might build your scenario with something like this:

public class Page1ViewModel: Screen {
	//NOTE: since the VM should model the UI in abstract terms, would be better to use
	//a name not involving specific UI components, for example: ActiveItems
	public BindableCollection<MyItemViewModel> ActiveUserControls {get;set;}
}
<PhoneApplicationPage  x:Class="My.Namespace.Page1View" 
	xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro" 
	...>
	
	<ListBox Name="ActiveUserControls" />
	
	<!-- Or, using an explicit binding
	<ListBox cal:View.Model="{Binding ActiveUserControls} />
	-->
	
</PhoneApplicationPage>

 

public class MyItemViewModel {
	...
}
<UserControl x:Class="My.Namespace.MyItemView" ...>
	
</UserControl>

Hope it helps.

Nov 9, 2010 at 12:21 PM

Hello Calin and marcoamendola -

  I very much appreciate your responses.     Unfortunately I had a typo in my original post.  My ViewModel class extended Screen not the Page.    Sorry about that marcoamendola, although I do appreciate your comments on MVVM versus Win Forms and your discussion of CM.Screen and Conductor - that helped to clear up some differences I had in my mind.

  Ok - I might be seeing my problem, my usercontrol does not have a viewmodel behind it.  I tried creating the ActiveUseControls property in the Page1ViewModel as a BindableCollection of uc1 objects, not uc1ViewModel objects because I had no uc1ViewModel.  

  I also tried creating the property as  List<uc1>.     I'll create a ViewModel for my user control and see what happens.

  I'm at work and don't have access to try this fix, but I will later.

  Thanks again for both of your responses.

 

 

 

 

 

Nov 10, 2010 at 2:22 AM

Hi -

 

  Adding the ViewModel  for my user control did the trick.  Then I made the property on the Page1ViewModel be a BindableCollection of the user control ViewModel.

  Thanks again for everyones input.