Saturday, August 28, 2010

WPF Binidng - IsSynchronizedWithCurrentItem with SelectedIndex = -1

In this post, we will discuss another behavior of Binding, when IsSynchronizedWithCurrentItem is used on a combo box for which we don't want to set any default selection by assigning SelectedIndex = -1.
Let's create a window with two combo boxes. We are binding one combo box with some array. We are binding the other combo box with the items in first combo box. To synchronize the selection of both combo boxes, we are setting IsSynchronizedWithCurrentItem on both. Since we don't want any default value to be selected, we are setting SelectedIndex as -1.

<Window x:Class="WPFComboBoxEditable.Window7"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
DataContext="Data"
Title="Window7" Height="300" Width="300">
<Window.Resources>
<x:Array x:Key="Data" Type="{x:Type sys:String}">
<sys:String>First</sys:String>
<sys:String>Second</sys:String>
<sys:String>Third</sys:String>
</x:Array>
</Window.Resources>
<Grid>
<ComboBox Visibility="Visible" Margin="285.527,186.648,0,0"
Name="comboBox1" ItemsSource="{Binding}" Background="Plum" Height="29.997"
IsSynchronizedWithCurrentItem="True"
VerticalAlignment="Top" HorizontalAlignment="Left" Width="191.092" SelectedIndex ="-1" >
</ComboBox>

<ComboBox Visibility="Visible" Margin="0,186.648,337.744,0" Name="comboBox2"
ItemsSource="{Binding ElementName=comboBox1,Path=ItemsSource}"
IsSynchronizedWithCurrentItem="True"
Background="Plum" Height="29.997" VerticalAlignment="Top"
HorizontalAlignment="Right" Width="191.092" SelectedIndex ="-1" >
</ComboBox>
</Grid>
</Window>

This would appear as follows:


You can see that setting SelectedIndex as -1 had no effect. Still first value of the combo box items appears. This is an observed behavior. Now how to fix this?

To fix this, we can set SelectedIndex separately as follows:

<Window x:Class="WPFComboBoxEditable.Window7"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
DataContext="Data"
Title="Window7" Height="300" Width="300">
<Window.Resources>
<x:Array x:Key="Data" Type="{x:Type sys:String}">
<sys:String>First</sys:String>
<sys:String>Second</sys:String>
<sys:String>Third</sys:String>
</x:Array>
</Window.Resources>
<Grid>
<ComboBox Visibility="Visible" Margin="285.527,186.648,0,0"
Name="comboBox1" ItemsSource="{Binding}" Background="Plum" Height="29.997"
IsSynchronizedWithCurrentItem="True"
VerticalAlignment="Top" HorizontalAlignment="Left" Width="191.092" >
<ComboBox.SelectedIndex>-1</ComboBox.SelectedIndex>
</ComboBox>

<ComboBox Visibility="Visible" Margin="0,186.648,337.744,0" Name="comboBox2"
ItemsSource="{Binding ElementName=comboBox1,Path=ItemsSource}"
IsSynchronizedWithCurrentItem="True"
Background="Plum" Height="29.997" VerticalAlignment="Top"
HorizontalAlignment="Right" Width="191.092" >
<ComboBox.SelectedIndex>-1</ComboBox.SelectedIndex>
</ComboBox>
</Grid>
</Window>

You can see that we have specified the value of SelectedIndex as a child tag. Now the window would appear as follows:

No comments: