StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It's not graceful or polished, but here is a workable sample. If I made this polished I would have implemented true MVVM, but as a sample, this will get you started.</p> <p>XAML:</p> <pre><code><Window x:Class="TwoListboxes.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="800"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="120" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <ListBox x:Name="List1" Grid.Column="0" Height="200" Margin="10" SelectionMode="Multiple" ItemsSource="{Binding Path=Collection1}"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Path=Name}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <StackPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"> <Button Content="&gt;" Width="60" Click="MoveRightEvent" /> <Button Content="&gt;&gt;" Width="60" Click="MoveAllRightEvent" /> <Button Content="&lt;&lt;" Width="60" Click="MoveAllLeftEvent" /> <Button Content="&lt;" Width="60" Click="MoveLeftEvent" /> </StackPanel> <ListBox x:Name="List2" Grid.Column="2" Height="200" Margin="10" ItemsSource="{Binding Path=Collection2}"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Path=Name}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </Window> </code></pre> <p>The code-behind:</p> <pre><code>/// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { #region Members private readonly ViewModel<TrackerItem> _vm; #endregion public MainWindow() { // Get viewmodel and set context _vm = new ViewModel<TrackerItem>(); _vm.Collection1 = new ObservableCollection<TrackerItem> { new TrackerItem { Name = "Item1", Value = "1"}, new TrackerItem { Name = "Item2", Value = "2"}, new TrackerItem { Name = "Item3", Value = "3"}, new TrackerItem { Name = "Item4", Value = "4"}, new TrackerItem { Name = "Item5", Value = "5"}, new TrackerItem { Name = "Item6", Value = "6"}, new TrackerItem { Name = "Item7", Value = "7"}, new TrackerItem { Name = "Item8", Value = "8"}, new TrackerItem { Name = "Item9", Value = "9"}, new TrackerItem { Name = "Item10", Value = "10"} }; this.DataContext = _vm; // Initialize UI InitializeComponent(); } /// <summary> /// Moves selected items in a list from one collection to another. /// </summary> /// <param name="list"></param> /// <param name="source"></param> /// <param name="destination"></param> private void MoveItems(ListBox list, ObservableCollection<TrackerItem> source, ObservableCollection<TrackerItem> destination) { if (list.SelectedItems.Count > 0) { // List for items to be removed. var hitList = new List<TrackerItem>(); // Move items foreach (var selectedItem in list.SelectedItems) { var item = selectedItem as TrackerItem; if (item != null) { // Tag item for removal hitList.Add(item); // Check if item is in target list var targetList = (from p in destination where p == item select p).ToList(); // Add to destination if (!targetList.Any()) { destination.Add(item); } } } // Remove items foreach (var hitItem in hitList) { // Remove item source.Remove(hitItem); } } } /// <summary> /// Moves all items from one list to another. /// </summary> /// <param name="source"></param> /// <param name="destination"></param> private void MoveAllItems( ObservableCollection<TrackerItem> source, ObservableCollection<TrackerItem> destination) { // List for items to be removed. var hitList = new List<TrackerItem>(); // Move items foreach (var item in source) { if (item != null) { // Tag item for removal hitList.Add(item); // Check if item is in target list var targetList = (from p in destination where p == item select p).ToList(); // Add to destination if (!targetList.Any()) { destination.Add(item); } } } // Remove items foreach (var hitItem in hitList) { // Remove item source.Remove(hitItem); } } /// <summary> /// Click event: moves selected items to the right. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void MoveRightEvent(object sender, RoutedEventArgs e) { MoveItems(List1, _vm.Collection1, _vm.Collection2); } /// <summary> /// Click event: moves all items to the right.. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void MoveAllRightEvent(object sender, RoutedEventArgs e) { MoveAllItems(_vm.Collection1, _vm.Collection2); } /// <summary> /// Click event: moves all items to the left. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void MoveAllLeftEvent(object sender, RoutedEventArgs e) { MoveAllItems(_vm.Collection2, _vm.Collection1); } /// <summary> /// Click event: moves selected items to the left. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void MoveLeftEvent(object sender, RoutedEventArgs e) { MoveItems(List2, _vm.Collection2, _vm.Collection1); } } </code></pre> <p>The ViewModel:</p> <pre><code>public class ViewModel<T> : INotifyPropertyChanged { #region Properties private ObservableCollection<T> _collection1; /// <summary> /// This is the first collection. /// </summary> public ObservableCollection<T> Collection1 { get { return _collection1; } set { if (value != _collection1) { _collection1 = value; NotifyPropertyChanged("Collection1"); } } } private ObservableCollection<T> _collection2; /// <summary> /// This is the second collection. /// </summary> public ObservableCollection<T> Collection2 { get { return _collection2; } set { if (value != _collection2) { _collection2 = value; NotifyPropertyChanged("Collection2"); } } } #endregion #region Constructors /// <summary> /// Default constructor. /// </summary> public ViewModel() { // Create initial collections. // Populate first collection with sample data _collection1 = new ObservableCollection<T>(); // Seconf collection is empty _collection2 = new ObservableCollection<T>(); } #endregion #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); } } #endregion } </code></pre> <p>TrackerItem</p> <pre><code>public class TrackerItem : INotifyPropertyChanged { private string _name; /// <summary> /// A name. /// </summary> public string Name { get { return _name; } set { if (value != _name) { _name = value; NotifyPropertyChanged("Name"); } } } private string _value; /// <summary> /// A value. /// </summary> public string Value { get { return _value; } set { if (value != _value) { _value = value; NotifyPropertyChanged("Value"); } } } #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); } } #endregion } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload