Question

I’ve been Google’ing a bit around for this, but without getting any real answer. Probably because my question might be a bit cryptic. Here goes:

Lets say i have an ObservableCollection<SomeModel> containing a bunch of models. I then add the corresponding Views to a Canvas. Specifying this in the resources of the Window, and then bind the Canvas’ ItemsSource to the ObservableCollection<SomeModel>. This works fine.
SomeModel is bound to SomeView, this is a UserControl.

Now, when this View gets focus, or when I MouseDown on it, I would like to have it marked as “Selected”. Somehow, i would like to have a property in the codebehind to the Window holding my Canvas, where i can always get the selected item.

I’ve been thinking of having a BindingList instead of the ObservableCollection, and when an IsSelected property on the model changes, then a method will extract the selected item from the list. But this seems to be a bit of a performance killer, as i will be notified on all changes to the items.

How can I accomplish this?

Answer 1

There are multiple ways you could solve this. But probably the simplest it to work with a ListBox and bind to it. ListBox as it has bindable ItemsSource and a SelectedItem property that has the item that is currently selected in it. It also calls the SelectionChanged event when the selection changes if you want to do something in the code behind .cs file.

I would recommend keeping the ObservableCollection in your View Model to keep true to MVVM.

If the style or placement of ListBox does not suit your override the template to something that suits your needs better.

You could look at a behaviour if the above doesn’t work for you but best to keep it simple.

UPDATE

This is how you would build the view. Note the ItemsPanel attribute is bound to a defined ItemsPanelTemplate in the UserControl.Resources section which specifies a Canvas to put the items on.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:SilverlightApplication1"
x:Class="SilverlightApplication1.View1"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
    <local:View1Model x:Key="View1ModelDataSource" />
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Canvas />
    </ItemsPanelTemplate>   
</UserControl.Resources>

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource View1ModelDataSource}}">
    <ListBox Margin="80,85,183,54" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemsSource="{Binding DataModelCollection}"/>
</Grid>

On the View Model

public class View1Model
{
     private ObservableCollection<SomeModel> _DataModelCollection;

     public ObservableCollection<SomeModel> DataModelCollection
     {
        get { return this._DataModelCollection; }
        set { this._DataModelCollection = value; }
     }
 }

It should be noted though that Canvas itself does not have any logic to let the user move controls around on it at runtime.