Press "Enter" to skip to content

Sincronizzare il contenuto di una combobox con una variabile del Model

In risposta ad una domanda effettuata sul Forum Microsoft, in cui veniva chiesto come riuscire a sincronizzare il valore di una combobox con quello della variabile sul model, ho scritto un mini esempio che mostra come fare, in questo mini post, indicherò tutte le cose di cui ricordarsi perché funzioni.

 

Ho creato un applicazione WPF con il template di progetto standard di Visual Studio 2015, nella MainWindow ho inserito il codice che ci permette di far modificare il contenuto della combobox al variare del valore di una property del modello:

    <Grid>

<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ComboBox
Grid.Row="0"
Margin="4"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ItemsSource="{Binding ListOfItems}"
SelectedValue="{Binding SelectedItem, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
/>
<StackPanel
Grid.Row="1"
Orientation="Horizontal"
FlowDirection="RightToLeft">
<Button
Margin="4"
Padding="10,2,10,2"
Content="Next"
Click="Next_Click"/>
<Button
Margin="4"
Padding="10,2,10,2"
Content="Previous"
Click="Previous_Click"/>

</StackPanel>
</Grid>

Lo XAML contiene il layout necessario uniche cose da notare:

            ItemsSource="{Binding ListOfItems}"
SelectedValue="{Binding SelectedItem, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"


Il binding della lista che fa da sorgente alla combobox sull’ItemsSource ed il Binding bidirezionale del SelectedValue della combobox ad una property del model.

Vediamo il codice C#.

public partial class MainWindow : Window, INotifyPropertyChanged

Prima cosa importante, la finestra è il model di se stessa, quindi implementiamo INotifyPropertyChanged perché le property in binding notifichino la modifica del loro contenuto.

public MainWindow()
{
InitializeComponent();
this.DataContext = this;
ListOfItems = new ObservableCollection<string>();

ListOfItems.Add("Pears");
ListOfItems.Add("Apples");
ListOfItems.Add("Pineapples");
ListOfItems.Add("Mango");
ListOfItems.Add("Papaya");
ListOfItems.Add("Lemon");
ListOfItems.Add("Lime");
ListOfItems.Add("Orange");
ListOfItems.Add("Grapefruit");
ListOfItems.Add("Grapes");
ListOfItems.Add("Kiwi");
ListOfItems.Add("Nuts");
ListOfItems.Add("Peanuts");
ListOfItems.Add("Pecan");
ListOfItems.Add("Hazelnuts");
ListOfItems.Add("Banana");
ListOfItems.Add("Watermelon");
}

Nel costruttore indichiamo che la finestra è il Model di se stessa, assegnandola al DataContext e generiamo e popoliamo la lista che fa da sorgente dati alla combobox.

public const string FLD_ListOfItems = "ListOfItems";
private ObservableCollection<string> mListOfItems;

public ObservableCollection<string> ListOfItems
{
get
{
return mListOfItems;
}
private set
{
mListOfItems = value;
OnPropertyChanged(FLD_ListOfItems);
}
}

Creiamo la lista, ricordandoci di utilizzare una collection che implementa automaticamente gli eventi di notifica delle modifiche alla User Interface, in questo caso l’ObservableCollection.

public const string FLD_SelectedItem = "SelectedItem";

private string mSelectedItem;

public string SelectedItem
{
get
{
return mSelectedItem;
}
set
{
mSelectedItem = value;
OnPropertyChanged(FLD_SelectedItem);
}
}

La property in binding con il SelectedItem della combobox, che implementa la notifica della sua variazione.

private void Next_Click(object sender, RoutedEventArgs e)
{
SelectedIndex += 1;
if (SelectedIndex >= ListOfItems.Count)
{
SelectedIndex = 0;
}
SelectedItem = ListOfItems[SelectedIndex];


}

private void Previous_Click(object sender, RoutedEventArgs e)
{
SelectedIndex -= 1;
if (SelectedIndex < 0)
{
SelectedIndex = ListOfItems.Count - 1;
}
SelectedItem = ListOfItems[SelectedIndex];
}

I due event handler dei button, che spostano il SelectedItem sul successivo o il precedente valore nella lista, per farlo, rileviamo l'indice dell'elemento attuale e gli sommiamo o sottraiamo uno. Nel caso arriviamo alla fine della lista, in entrambe le direzioni, ripartiamo dall'estremo opposto, quindi se arriviamo alla fine ci spostiamo sul primo elemento, se arriviamo all'inizio ci spostiamo sull'ultimo.

 

 

Potete scaricare il progetto esempio dal link qui indicato:

Addendum: Versione 2.0 che usa una classe invece di una stringa come sorgente dati della combobox:

Potete scaricare il progetto esempio dal link qui indicato: