This is a short snippet on a cool little property for anything that
derives from
Selector
(combo box, list box, etc..) called
IsSynchronizedWithCurrentItem.
This property allows multiple items controls that are bound to the same
collection (on their ItemsSource property) to also display the same
selection. This means that whatever is selected in one ItemsControl will
be shown as selected in the other.
Below is a screenshot of the extremely simple sample app we will be
creating today. It has a combo box and a list box which are both bound
to the same backing collection. Granted, this is hard to convey in a
screenshot, but if you change the current selection in either the combo
box or the list box, the selection also changes in the other.
By default, the value of this property is null, which essentially means
'maybe'. Most of the time, the 'maybe' resolves to false, unless the
Selector is using a
CollectionView,
in which case it resolves to true. If you explicitly set the property to
true or false, that overrides this 'maybe' behavior.
Really, there isn't much special to do to get this to work - all that
you need to do is set IsSynchronizedWithCurrentItem to true on both the
ListBox and ComboBox:
<Window x:Class="SyncSelection.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="250" Width="300" Name="This">
<StackPanel Margin="5">
<ComboBox ItemsSource="{Binding ElementName=This, Path=BackingCollection}"
IsSynchronizedWithCurrentItem="True"
Margin="0 0 0 10" />
<ListView ItemsSource="{Binding ElementName=This, Path=BackingCollection}"
Height="150"
IsSynchronizedWithCurrentItem="True" />
</StackPanel>
</Window>
And the C# code behind is as simple as can be (nothing special needs to
be done here to get the selection synchronization to work):
public partial class Window1 : Window
{
private ObservableCollection<string> _BackingColllection =
new ObservableCollection<string>();
public Window1()
{
_BackingColllection.Add("Item 1");
_BackingColllection.Add("Item 2");
_BackingColllection.Add("Item 3");
_BackingColllection.Add("Item 4");
_BackingColllection.Add("Item 5");
_BackingColllection.Add("Item 6");
InitializeComponent();
}
public ObservableCollection<string> BackingCollection
{ get { return _BackingColllection; } }
}
You might be wondering why something like this would be useful. Well,
there are two reasons this can come in handy - first, the two views
could possibly be sorted differently, and it might be useful for the
user to interact with both. Another possibility is that by using data
templates, the two views are actually displaying different data to the
user, and so it is meaningful to have the selection stay synchronized.
Comments
Post a Comment