Binding of, and Navigation from a ListBox

Topics: Conventions, Getting Started, UI Architecture
Mar 7, 2012 at 7:42 PM

Hello,

I am looking for some general guidance on the best way to approach the following...

I have a List<MyClass> that I am looking to bind to a ListBox.  I will then have a DataTemplate with provides the necessary UI to show all the properties of MyClass.  It is my understanding that using:

<ListBox x:Name="Items" />

Will bind ItemsSource to a property called Items and SelectedItem to a property called SelectedItem, which makes sense.

However, from this View and ViewModel I would actually like to navigate to another View and ViewModel, basically in a Master/Detail scenario.  The first ViewModel show a list of all the objects, and then clicking on an item in the ListBox causes a navigation to the other ViewModel to show the Details of that item.

What is the best way of going about doing this?

Thanks in advance!

Gary

Coordinator
Mar 7, 2012 at 8:09 PM

<ListBox x:Name="Items" />

<ContentControl cal:View.Model="{Binding SelectedItem, Mode=TwoWay}" />

This will keep the content control's content in sync with the list box selection. Additionally, because you use the View.Model attached property, Caliburn.Micro will load the appropriate view for the selected item.

Is that what you are looking for?

Mar 7, 2012 at 8:18 PM

In all honesty, maybe, I am really not sure :)

What I have just done is this:

        private BindableCollection<Project> projects = new BindableCollection<Project>();

        public BindableCollection<Project> Projects
        {
            get
            {
                return this.projects;
            }
            set
            {
                this.projects = value;
                NotifyOfPropertyChange(() => this.Projects);
            }
        }

With the following in the View:

                <ListBox x:Name="Projects">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text='{Binding Name}'  
                                   Margin='2 0 12 0'   
                                   FontSize='30' />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation='Horizontal' />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>

And this gives me what I want in terms of "viewing" the items, but then I would like to handle the navigation from one item within the ListBox to another screen for the associated ViewModel.  From what you have described, it sounds like the ControlControl will do this, or, will this load the ViewModel onto the same screen?

In the example that you posted, what is the cal prefix linked to?

Thanks

Gary 

Coordinator
Mar 7, 2012 at 8:47 PM

The cal prefix reference the Caliburn.Micro namespace. View.Model is an attached property which lets you inject views based on a bound model. So selecting the item in the list box would cause the contents of the control to change. That sets up a basic master/detail view. But, if you want to navigate the entire screen (including moving away from the list box) when you slelect something, then you need to take a different approach. I'm not sure I understand completely what your UI looks like, so I'm having a hard time describing the correct solution.

Mar 22, 2012 at 6:11 AM
EisenbergEffect wrote:

The cal prefix reference the Caliburn.Micro namespace. View.Model is an attached property which lets you inject views based on a bound model. So selecting the item in the list box would cause the contents of the control to change. That sets up a basic master/detail view. But, if you want to navigate the entire screen (including moving away from the list box) when you slelect something, then you need to take a different approach. I'm not sure I understand completely what your UI looks like, so I'm having a hard time describing the correct solution.

Hi,

As you said " if you want to navigate the entire screen (including moving away from the list box) when you slelect something, then you need to take a different approach."

How can this type of behavior be implemented?

Basically idea is that clicking on a link will load an entirely different View.

Example scenario for Silverlight:

User is on Order Screen that displays details of a specific Order (id=123) and also the list of products in the order.

Each product name is displayed as a Link.

Clicking on the product name link,loads Product Details screen.

After user is done viewing the Product Screen, may choose to come back at Order screen.

Thanks