Robert Luman Robert Luman - 3 years ago 92
C# Question

WPF ObservableCollection not updating in view

I am working on a project using MVVM where a user connects to a database server and is presented a list of database areas on that server to use. For the list of areas, I am using a ComboBox that has ItemSource bound to an ObservableCollection.

ComboBox ItemsSource="{Binding AreaCollecton}" SelectedItem="{Binding SelectedArea}"


In the ViewModel, I have the ObservableCollection defined like this:

private ObservableCollection<string> areaCollection = new ObservableCollection<string>();

public ObservableCollection<string> AreaCollection
{
get { return areaCollection; }
set{
areaCollection = value;
OnPropertyChanged("AreaCollection");
}
}


The collection is updated when a server name is entered and a Connect button is clicked. The Click event will poll the server entered for what areas are available and return the list to the ViewModel.

public void Connect()
{
areaCollection.Clear();

serverConnection = new ServerConnect();
areaList = serverConnection.getAreaList(server);
//areaList is defined as a Dictionary<string, string>

foreach(KeyValuePair<string, string> area in areaList)
{
areaCollection.Add(area.Key);
}
OnPropertyChanged("AreaCollection");
}


I put a break point at the foreach in the Connect method (invoked from the button click event) and as I stepped through I saw areaCollection being updated from areaList as expected. However, once it completed building areaCollection, nothing is showing in the ComboBox on the View.

I am fairly new to WPF and MVVM so I have a feeling there is something small I am missing here. I've looked through some of the other posts here relating to similar issues, and have implemented the suggestions there but it still is not updating the View so I am not sure what I am missing. Any help is greatly appreciated.

EDIT: I'm adding the full XAML in case that is more helpful than just the ComboBox line.

<Grid Height="400" Width="400" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="lblPrompt" TextWrapping="Wrap" Text="Enter Laboratory login and connection info:" FontSize="18" />

<Label Style="{StaticResource ConnectLabel}" Grid.Row="1" Grid.Column="0" Content="Server:" />
<TextBox Style="{StaticResource ConnectTextBox}" Grid.Row="1" Grid.Column="1" x:Name="txtbxServerName" TextWrapping="Wrap" TabIndex="3" Text="{Binding Server}" />

<Button Style="{StaticResource ConnectButton}" Grid.Row="2" Grid.Column="1" x:Name="btnConnect" Content="Connect" FontSize="14">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="Connect" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>

<Label Style="{StaticResource ConnectLabel}" Grid.Row="3" Grid.Column="0" Content="Area:" />
<ComboBox Style="{StaticResource ConnectCombo}" Grid.Row="3" Grid.Column="1" x:Name="txtbxAreaName" TabIndex="4" ItemsSource="{Binding AreaCollecton}" SelectedItem="{Binding SelectedArea}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="AreaConnect" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>

<Label Style="{StaticResource ConnectLabel}" Grid.Row="4" Grid.Column="0" Content="Lab Username:" />
<TextBox Style="{StaticResource ConnectTextBox}" Grid.Row="4" Grid.Column="1" x:Name="txtbxUsername" TextWrapping="Wrap" TabIndex="1" Text="{Binding Username}" />

<Label Style="{StaticResource ConnectLabel}" Grid.Row="5" Grid.Column="0" Content="Lab Password:" />
<PasswordBox Margin="2" Grid.Row="5" Grid.Column="1" x:Name="pwdbxPassword" TabIndex="5" PasswordChanged="PasswordBox_PasswordChanged" />

<Button Style="{StaticResource ConnectButton}" Grid.Row="6" Grid.Column="1" x:Name="btnLogin" Content="Login" FontSize="14">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="Login" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>

<TextBlock Grid.Row="7" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" FontSize="14" Text="{Binding Status}" />

</Grid>

Answer Source

At first glance, i could see the Combox itemSource name is different than what you are setting in code behind. Shouldn't it be "AreaCollection" instead of "AreaCollecton". Let me know if solves the issue.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download