I've got a Combobox whose ItemTemplate is bound to a DataTemplate containing one of my custom label controls. All the custom control does is localize the content assigned to it.
The Combobox (when closed) will display the text of the first item selected. However when the selected item is changed, the display of the closed Combobox will not update. I know the actual selected item is updated because it's bound to a property that changes correctly. The only problem is the display text.
So for instance if I select the item with text 'Item 1' the closed Combobox will display 'Item 1'. Then if I select 'Item 2' the closed Combobox will still display 'Item 1'.
Here's how it's set up ('Name' is a property of the items being bound in the ItemsSource):
<Grid.Resources>
<DataTemplate x:Key="MyTemplate">
<MyCustomLabel Content="{Binding Name}" />
<DataTemplate>
</Grid.Resources>
<Combobox ItemsSource="{Binding MyItems}" ItemTemplate="{StaticResource MyTemplate}" />
Below is the code for my label control:
public class MyLabel : Label
{
/// <summary>
/// When reassigning content in the OnContentChanged method, this will prevent an infinite loop.
/// </summary>
private bool _overrideOnContentChanged;
protected override void OnContentChanged(object oldContent, object newContent)
{
// if this method has been called recursively (since this method assigns content)
// break out to avoid an infinite loop
if (_overrideOnContentChanged)
{
_overrideOnContentChanged = false;
return;
}
base.OnContentChanged(oldContent, newContent);
var newContentString = newContent as string;
if (newContentString != null)
{
// convert the string using localization
newContentString = LocalizationConverter.Convert(newContentString);
// override the content changed method
// will prevent infinite looping when this method causes itself to be called again
_overrideOnContentChanged = true;
Content = newContentString;
}
}
}
Any advice would be greatly appreciated. Thanks!
Perform a 2-way databinding on the SelectedItem property of the combo box.
The target property that you're binding the combo-box to - should raise a PropertyChanged event.
<ComboBox ItemsSource={Binding Path=Source} SelectedItem={Binding Path=CurrentItem, Mode=TwoWay}/>
class ComboContext : INotifyPropertyChanged
{
public List<object> Source { get; set; } // attach your source here
public object CurrentItem { get { return mCurrentItem; } set { mCurrentItem = value; OnPropertyChanged("CurrentItem"); } } // bind to this property
private object mCurrentItem;
void OnPropertyChanged(string name)
{
if(PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
The code sample might not be "complete" - it's 1am and I'm kinda tired, but it should put you on the right track.
Edit2.
Just noticed your template, it's wrong, the whole idea is wrong.
<ComboBox ItemsSource={Binding Path=Source} SelectedItem={Binding Path=CurrentItem, Mode=TwoWay}>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text={Binding}/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Notice that the texblock's text is a binding with no path, (and it's a default binding too.) the no-path binding means that this textblock will bind to whatever is directly "underneath".
Related
My goal is to have the bound property value update with the correct value if the selected profile changes its Name. Right now it maintains the old value which breaks binding on serialization/deserialization.
My XAML;
<ComboBox SelectedValue="{Binding value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="120" SelectedValuePath="Name" ItemsSource="{Binding Profiles}, Mode=OneWay}">
<ComboBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:Profile}">
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox
My collection of selectible profiles;
ObservableCollection<Profile> profiles = new ObservableCollection<Profile>();
my Profile class;
public partial class Profile: INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public string Name
{
get { return _name; }
set { if (value != _name) { _name = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name")); } }
}
private string _name = "[Default]";
}
INotify seems to be working just fine because the displayed Name in the combobox does update for any profiles listed when their name changes. But when serialized the prop bound to SelectedValue known as value does not contain the new value for Name.
You are correct. Looks like SelectedValue is only updated when the selection changes in the ComboBox and changing the Name doesn't actually change the current selection thus no update. You could instead bind the SelectedItem to a property. That would contain the updated Name. Any controls would bind to SelectedItem.Name instead of Value.
If you must use SelectedValue then you could unselect and reselect the comboBox's selection (yuck!) or force the SelectedValue to update whenever you make changes to the Name property, for example:
if (comboBox1.SelectedItem != null) {
if (!comboBox1.SelectedValue.Equals(((Profile) comboBox1.SelectedItem).Name)) {
comboBox1.SelectedValue = ((Profile) comboBox1.SelectedItem).Name;
}
}
again, not that pretty but it works. There may be a way to get the SelectedValue's BindingExpression and force the update but simply calling UpdateSource on it doesn't seem to do anything unless the selection has changed.
comboBox1.GetBindingExpression (ComboBox.SelectedValueProperty).UpdateSource ();
I am working on a WPF desktop application using the MVVM pattern.
I am trying to filter some items out of a ListView based on the text typed in a TextBox. I want the ListView items to be filtered as I change the text.
I want to know how to trigger the filter when the filter text changes.
The ListView binds to a CollectionViewSource, which binds to the ObservableCollection on my ViewModel. The TextBox for the filter text binds to a string on the ViewModel, with UpdateSourceTrigger=PropertyChanged, as it should be.
<CollectionViewSource x:Key="ProjectsCollection"
Source="{Binding Path=AllProjects}"
Filter="CollectionViewSource_Filter" />
<TextBox Text="{Binding Path=FilterText, UpdateSourceTrigger=PropertyChanged}" />
<ListView DataContext="{StaticResource ProjectsCollection}"
ItemsSource="{Binding}" />
The Filter="CollectionViewSource_Filter" links to an event handler in the code behind, which simply calls a filter method on the ViewModel.
Filtering is done when the value of FilterText changes - the setter for the FilterText property calls a FilterList method that iterates over the ObservableCollection in my ViewModel and sets a boolean FilteredOut property on each item ViewModel.
I know the FilteredOut property is updated when the filter text changes, but the List does not refresh. The CollectionViewSource filter event is only fired when I reload the UserControl by switching away from it and back again.
I've tried calling OnPropertyChanged("AllProjects") after updating the filter info, but it did not solve my problem.
("AllProjects" is the ObservableCollection property on my ViewModel to which the CollectionViewSource binds.)
How can I get the CollectionViewSource to refilter itself when the value of the FilterText TextBox changes?
Many thanks
Don't create a CollectionViewSource in your view. Instead, create a property of type ICollectionView in your view model and bind ListView.ItemsSource to it.
Once you've done this, you can put logic in the FilterText property's setter that calls Refresh() on the ICollectionView whenever the user changes it.
You'll find that this also simplifies the problem of sorting: you can build the sorting logic into the view model and then expose commands that the view can use.
EDIT
Here's a pretty straightforward demo of dynamic sorting and filtering of a collection view using MVVM. This demo doesn't implement FilterText, but once you understand how it all works, you shouldn't have any difficulty implementing a FilterText property and a predicate that uses that property instead of the hard-coded filter that it's using now.
(Note also that the view model classes here don't implement property-change notification. That's just to keep the code simple: as nothing in this demo actually changes property values, it doesn't need property-change notification.)
First a class for your items:
public class ItemViewModel
{
public string Name { get; set; }
public int Age { get; set; }
}
Now, a view model for the application. There are three things going on here: first, it creates and populates its own ICollectionView; second, it exposes an ApplicationCommand (see below) that the view will use to execute sorting and filtering commands, and finally, it implements an Execute method that sorts or filters the view:
public class ApplicationViewModel
{
public ApplicationViewModel()
{
Items.Add(new ItemViewModel { Name = "John", Age = 18} );
Items.Add(new ItemViewModel { Name = "Mary", Age = 30} );
Items.Add(new ItemViewModel { Name = "Richard", Age = 28 } );
Items.Add(new ItemViewModel { Name = "Elizabeth", Age = 45 });
Items.Add(new ItemViewModel { Name = "Patrick", Age = 6 });
Items.Add(new ItemViewModel { Name = "Philip", Age = 11 });
ItemsView = CollectionViewSource.GetDefaultView(Items);
}
public ApplicationCommand ApplicationCommand
{
get { return new ApplicationCommand(this); }
}
private ObservableCollection<ItemViewModel> Items =
new ObservableCollection<ItemViewModel>();
public ICollectionView ItemsView { get; set; }
public void ExecuteCommand(string command)
{
ListCollectionView list = (ListCollectionView) ItemsView;
switch (command)
{
case "SortByName":
list.CustomSort = new ItemSorter("Name") ;
return;
case "SortByAge":
list.CustomSort = new ItemSorter("Age");
return;
case "ApplyFilter":
list.Filter = new Predicate<object>(x =>
((ItemViewModel)x).Age > 21);
return;
case "RemoveFilter":
list.Filter = null;
return;
default:
return;
}
}
}
Sorting kind of sucks; you need to implement an IComparer:
public class ItemSorter : IComparer
{
private string PropertyName { get; set; }
public ItemSorter(string propertyName)
{
PropertyName = propertyName;
}
public int Compare(object x, object y)
{
ItemViewModel ix = (ItemViewModel) x;
ItemViewModel iy = (ItemViewModel) y;
switch(PropertyName)
{
case "Name":
return string.Compare(ix.Name, iy.Name);
case "Age":
if (ix.Age > iy.Age) return 1;
if (iy.Age > ix.Age) return -1;
return 0;
default:
throw new InvalidOperationException("Cannot sort by " +
PropertyName);
}
}
}
To trigger the Execute method in the view model, this uses an ApplicationCommand class, which is a simple implementation of ICommand that routes the CommandParameter on buttons in the view to the view model's Execute method. I implemented it this way because I didn't want to create a bunch of RelayCommand properties in the application view model, and I wanted to keep all the sorting/filtering in one method so that it was easy to see how it's done.
public class ApplicationCommand : ICommand
{
private ApplicationViewModel _ApplicationViewModel;
public ApplicationCommand(ApplicationViewModel avm)
{
_ApplicationViewModel = avm;
}
public void Execute(object parameter)
{
_ApplicationViewModel.ExecuteCommand(parameter.ToString());
}
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
}
Finally, here's the MainWindow for the application:
<Window x:Class="CollectionViewDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CollectionViewDemo="clr-namespace:CollectionViewDemo"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<CollectionViewDemo:ApplicationViewModel />
</Window.DataContext>
<DockPanel>
<ListView ItemsSource="{Binding ItemsView}">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Name}"
Header="Name" />
<GridViewColumn DisplayMemberBinding="{Binding Age}"
Header="Age"/>
</GridView>
</ListView.View>
</ListView>
<StackPanel DockPanel.Dock="Right">
<Button Command="{Binding ApplicationCommand}"
CommandParameter="SortByName">Sort by name</Button>
<Button Command="{Binding ApplicationCommand}"
CommandParameter="SortByAge">Sort by age</Button>
<Button Command="{Binding ApplicationCommand}"
CommandParameter="ApplyFilter">Apply filter</Button>
<Button Command="{Binding ApplicationCommand}"
CommandParameter="RemoveFilter">Remove filter</Button>
</StackPanel>
</DockPanel>
</Window>
Nowadays, you often don't need to explicitly trigger refreshes. CollectionViewSource implements ICollectionViewLiveShaping which updates automatically if IsLiveFilteringRequested is true, based upon the fields in its LiveFilteringProperties collection.
An example in XAML:
<CollectionViewSource
Source="{Binding Items}"
Filter="FilterPredicateFunction"
IsLiveFilteringRequested="True">
<CollectionViewSource.LiveFilteringProperties>
<system:String>FilteredProperty1</system:String>
<system:String>FilteredProperty2</system:String>
</CollectionViewSource.LiveFilteringProperties>
</CollectionViewSource>
CollectionViewSource.View.Refresh();
CollectionViewSource.Filter is reevaluated in this way!
Perhaps you've simplified your View in your question, but as written, you don't really need a CollectionViewSource - you can bind to a filtered list directly in your ViewModel (mItemsToFilter is the collection that is being filtered, probably "AllProjects" in your example):
public ReadOnlyObservableCollection<ItemsToFilter> AllFilteredItems
{
get
{
if (String.IsNullOrEmpty(mFilterText))
return new ReadOnlyObservableCollection<ItemsToFilter>(mItemsToFilter);
var filtered = mItemsToFilter.Where(item => item.Text.Contains(mFilterText));
return new ReadOnlyObservableCollection<ItemsToFilter>(
new ObservableCollection<ItemsToFilter>(filtered));
}
}
public string FilterText
{
get { return mFilterText; }
set
{
mFilterText = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("FilterText"));
PropertyChanged(this, new PropertyChangedEventArgs("AllFilteredItems"));
}
}
}
Your View would then simply be:
<TextBox Text="{Binding Path=FilterText,UpdateSourceTrigger=PropertyChanged}" />
<ListView ItemsSource="{Binding AllFilteredItems}" />
Some quick notes:
This eliminates the event in the code behind
It also eliminates the "FilterOut" property, which is an artificial, GUI-only property and thus really breaks MVVM. Unless you plan to serialize this, I wouldn't want it in my ViewModel, and certainly not in my Model.
In my example, I use a "Filter In" rather than a "Filter Out". It seems more logical to me (in most cases) that the filter I am applying are things I do want to see. If you really want to filter things out, just negate the Contains clause (i.e. item => ! Item.Text.Contains(...)).
You may have a more centralized way of doing your Sets in your ViewModel. The important thing to remember is that when you change the FilterText, you also need to notify your AllFilteredItems collection. I did it inline here, but you could also handle the PropertyChanged event and call PropertyChanged when the e.PropertyName is FilterText.
Please let me know if you need any clarifications.
If I understood well what you are asking:
In the set part of your FilterText property just call Refresh() to your CollectionView.
I just discovered a much more elegant solution to this issue. Instead of creating a ICollectionView in your ViewModel (as the accepted answer suggests) and setting your binding to
ItemsSource={Binding Path=YourCollectionViewSourceProperty}
The better way is to create a CollectionViewSource property in your ViewModel. Then bind your ItemsSource as follows
ItemsSource={Binding Path=YourCollectionViewSourceProperty.View}
Notice the addition of .View This way the ItemsSource binding is still notified whenever there is a change to the CollectionViewSource and you never have to manually call Refresh() on the ICollectionView
Note: I can't determine why this is the case. If you bind directly to a CollectionViewSource property the binding fails. However, if you define a CollectionViewSource in your Resources element of a XAML file and you bind directly to the resource key, the binding works fine. The only thing I can guess is that when you do it completely in XAML it knows you really want to bind to the CollectionViewSource.View value and binds it for you acourdingly behind the scenes (how helpful! :/) .
I am databinding a view to a viewmodel and am having trouble initializing a combobox to a default value. A simplification of the class I'm using in the binding is
public class LanguageDetails
{
public string Code { get; set; }
public string Name { get; set; }
public string EnglishName { get; set; }
public string DisplayName
{
get
{
if (this.Name == this.EnglishName)
{
return this.Name;
}
return String.Format("{0} ({1})", this.Name, this.EnglishName);
}
}
}
The combobox is declared in the view's XAML as
<ComboBox x:Name="LanguageSelector" Grid.Row="0" Grid.Column="1"
SelectedItem="{Binding SelectedLanguage,Mode=TwoWay}"
ItemsSource="{Binding AvailableLanguages}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
and the viewmodel contains this code
private List<LanguageDetails> _availableLanguages;
private LanguageDetails _selectedLanguage;
public LoginViewModel()
{
_availableLanguages = LanguageManager.GetLanguageDetailsForSet(BaseApp.AppLanguageSetID);
_selectedLanguage = _availableLanguages.SingleOrDefault(l => l.Code == "en");
}
public LanguageDetails SelectedLanguage
{
get { return _selectedLanguage; }
set
{
_selectedLanguage = value;
OnPropertyChanged("SelectedLanguage");
}
}
public List<LanguageDetails> AvailableLanguages
{
get { return _availableLanguages; }
set
{
_availableLanguages = value;
OnPropertyChanged("AvailableLanguages");
}
}
At the end of the constructor both _availableLanguages and _selectedLanguage variables are set as expected, the combobox's pulldown list contains all items in _availableLanguages but the selected value is not displayed in the combobox. Selecting an item from the pulldown correctly displays it and sets the SelectedLanguage property in the viewmodel. A breakpoint in the setter reveals that _selectedLanguage still contains what it was initialized to until it is overwritten with value.
I suspect that there is some little thing I'm missing, but after trying various things and much googling I'm still stumped. I could achieve the desired result in other ways but really want to get a handle on the proper use of databinding.
You need to change the order of you bindings in XAML so that your ItemsSource binds before the SelectedItem.
<ComboBox x:Name="LanguageSelector" Width="100"
ItemsSource="{Binding AvailableLanguages}"
SelectedItem="{Binding SelectedLanguage,Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
If you set a breakpoint on the 'get' of both the SeletedLanguage and AvailibleLanguage, you will notice that the SelectedLanguage gets hit before your AvailibleLanguage. Since that's happening, it's unable to set the SelectedLanguage because the ItemsSource is not yet populated. Changing the order of the bindings in your XAML will make the AvailibleLanguages get hit first, then the SelectedLanguage. This should solve your problem.
1) When you assign the SelectedLanguage, use the public property SelectedLanguage instead of the private _selectedLanguage, so that the setter gets executed,
2) You need to move the assignment of the selectedlanguage to the moment that the view has been loaded. You can do it by implementing the Loaded event handler on the View. If you want to be "mvvm compliant" then you should use a Blend behavior that will map UI loaded event to a viewmodel command implementation in which you would set the selected language.
I have a Dictionary which is binded to a combobox. I have used dictionary to provide spaces in enum.
public enum Option {Enter_Value, Select_Value};
Dictionary<Option,string> Options;
<ComboBox
x:Name="optionComboBox"
SelectionChanged="optionComboBox_SelectionChanged"
SelectedValuePath="Key"
DisplayMemberPath="Value"
SelectedItem="{Binding Path = SelectedOption}"
ItemsSource="{Binding Path = Options}" />
This works fine.
My queries:
1. I am not able to set the initial value to a combo box.
In above XAML snippet the line
SelectedItem="{Binding Path = SelectedOption}"
is not working. I have declared SelectOption in my viewmodel. This is of type string and I have intialized this string value in my view model as below:
SelectedOption = Options[Options.Enter_Value].ToString();
2. The combobox is binded to datadictionary which have two options first is "Enter_value" and second is "Select_value" which is actually Option enum.
Based on the Option enum value I want to perform different action.
For example
if option is equal to option.Enter_value then
Combo box becomes editable and user can enter the numeric value in it.
if option is equal to option.Select_value value then
the value comes from the database and the combo box becomes read only and shows the fetched value from the database.
Please Help!!
Try binding SelectedValue, not SelectedItem if SelectedOption is of type Option.
About your second question: Based on selection you can hide your ComboBox and display a TextBlock or TextBox in it's place. Or you can use RadioButtons and enable or disable input accordingly.
Your problem, probably, is that you've bound SelectedItem to a property of the wrong type.
An ItemsControl iterates over its ItemsSource's enumerator to build its list of items. The enumerator for your dictionary is of type KeyValuePair<Option, string>. So your SelectedOption property must also be of that type - if you look in the Output window when your application is running, you'll probably see a data-binding error to that effect there.
I can't understand your second question.
Edit
Okay, it's a lot easier to just provide a working example than to explain why code that I can't see isn't working.
First, you need a view model class that implements INotifyPropertyChanged and that exposes SelectedItem, Value, and IsValueReadOnly properties, and that correctly raises PropertyChanged events for those properties when the selected item changes.
public enum Option
{
EditOption,
OtherOption
} ;
public class MyViewModel : INotifyPropertyChanged
{
private Dictionary<Option, string> _Items;
private KeyValuePair<Option, string> _SelectedItem;
private string _Value;
public MyViewModel()
{
_Items = new Dictionary<Option, string>
{
{Option.EditOption, "Editable value"},
{Option.OtherOption, "Other value"}
};
}
public Dictionary<Option, string> Items
{
get { return _Items; }
}
public KeyValuePair<Option, string> SelectedItem
{
get { return _SelectedItem; }
set
{
_SelectedItem = value;
OnPropertyChanged("SelectedItem");
OnPropertyChanged("IsValueReadOnly");
OnPropertyChanged("Value");
}
}
public bool IsValueReadOnly
{
get { return _SelectedItem.Key != Option.EditOption; }
}
public string Value
{
get { return IsValueReadOnly ? "Read-only" : _Value; }
set { _Value = value; }
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler h = PropertyChanged;
if (h != null)
{
h(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Now the XAML for your ComboBox and TextBox looks like this:
<Window x:Class="WpfApplication6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WpfApplication6="clr-namespace:WpfApplication6"
Title="MainWindow">
<Window.DataContext>
<WpfApplication6:MyViewModel/>
</Window.DataContext>
<StackPanel>
<ComboBox ItemsSource="{Binding Items}"
DisplayMemberPath="Key"
SelectedItem="{Binding SelectedItem}"/>
<TextBox Text="{Binding Value}"
IsReadOnly="{Binding IsValueReadOnly}"/>
</StackPanel>
</Window>
I need to implement CheckBoxList control with ItemsSource and CheckedItems properties. Items from ItemsSource should be displayed as checked checkboxes if CheckedItems contains these values or unchecked otherwise. Also I need two-way databinding support for CheckedItems property (value of this property should be updated when user clicks on checkboxes).
Here some code which probably can help to understand my problem
XAML:
<UserControl x:Class="Namespace.Controls.CheckBoxList" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ListBox x:Name="LayoutRoot">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>
Code behind:
public partial class CheckBoxList : UserControl
{
public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(CheckBoxList), null);
public static readonly DependencyProperty CheckedItemsProperty = DependencyProperty.Register("CheckedItems", typeof(IEnumerable), typeof(CheckBoxList), null);
public IEnumerable ItemsSource
{
get { return (IEnumerable)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
public IEnumerable CheckedItems
{
get { return (IEnumerable)GetValue(CheckedItemsProperty); }
set { SetValue(CheckedItemsProperty, value); }
}
public CheckBoxList()
{
InitializeComponent();
LayoutRoot.SetBinding(ItemsControl.ItemsSourceProperty, new Binding("ItemsSource") { Source = this });
}
}
I think that I need to bind ListBox to UserControl with custom converter, which will return collection of items with additional IsChecked property, but it works only in case of one-way data binding.
Looks like I need two-way binding to two properties at one time, but I don't know how to implement it and will appreciate any help with this issue.
Thanks in advance.
First of all you should consider deriving from ListBox rather than UserControl. The ListBox already does most of what you want.
Secondly consider one way binding to an IList. You can then add and remove entires to that IList as the respective items are selected.
Rather than try to bind a CheckBox control in an Item Template you make a copy of the ListBox styles, place them in Generic.xaml as the style of your new control. Then modify the unselected and selected visual states using a checked and unchecked check box as part of the visual appearance.
Now you can attach to the SelectionChanged event and use the Event args AddedItems list to add to the bound IList and the RemovedItems list to remove items from the bound list.
You would need to clear and re-add the set of items to the list box SelectedItems list when either your CheckedItems is assigned or the ItemsSource is changed.
There are probably a number gotchas that you will need to work round but this seems like a more direct path to your goal than starting from scratch with a UserControl base.
Add an observable collection for your list box datasource to your datacontext:
private ObservableCollection<MyItem> _myItems;
public ObservableCollection<MyItem> MyItems
{
get { return _searchByFields; }
set
{
_myItems = value;
}
}
Add a class to hold the data about your checkboxes:
public class MyItem
{
public bool Checked {get; set; }
public string MyItemValue { set ; set; }
}
Then in your data template bind listbox to the collection and your data template checkboxes to the respective MyItem properties:
<UserControl x:Class="Namespace.Controls.CheckBoxList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ListBox x:Name="LayoutRoot"
DataContext="[Dataconext here]"
ItemsSource={Binding MyItems}>
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Checked, Mode=TwoWay}"
Content="{Binding MyItemValue}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>
Don't forget to set the DataContext of the binding to the appropriate class (you might be doing this in the XAML or the code behind perhaps)