WPF make combobox binding twoways - wpf

I have a combo box that is editable, and i have a button that is enable when SelectedReplacement that binds to the combobox is not null and disable when it is. When it's null, i would input some random text to make the button enable, the problem is it wouldn't become enable when there I input text. making the Mode TwoWay doesn't help. i assumed setting the propertychangedevent would bind the new text to SelectedReplacement, but Im wrong, so any help is appreciated.
<ComboBox ItemsSource="{Binding SelectedError.Suggestions}"
Text="{m:Binding Path=SelectedError.SelectedReplacement, Mode=TwoWay}"
IsEditable="True"
HorizontalAlignment="Stretch"/>
i also tried to get the propertychanged
private void ViewModelPropertyChanged(SpellcheckViewModel sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(sender.SelectedError.SelectedReplacement))
{
_correctCommand?.Refresh();
}
}

I try to write a demo project to meet your requirement.
Mainly, the enable state is controlled by another boolean property IsButtonEnabled in the view model, the value for that property is controlled by InputText property which is controlled by the text you input in the ComboBox control.
Here is the UI:
<StackPanel Margin="10">
<ComboBox
x:Name="cmb"
IsEditable="True"
ItemsSource="{Binding AllItems}"
TextBoxBase.TextChanged="cmb_TextChanged"
TextSearch.TextPath="Name">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBox
x:Name="hiddenTextBox"
Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="Collapsed" />
<Button
x:Name="btn"
Margin="0,10,0,0"
Content="Show message"
IsEnabled="{Binding IsButtonEnabled}" />
</StackPanel>
And here is the main logic in the view model:
public ObservableCollection<Item> AllItems
{
get { return _allItems; }
set { _allItems = value; this.RaisePropertyChanged("AllItems"); }
}
public bool IsButtonEnabled
{
get { return _isButtonEnabled; }
set { _isButtonEnabled = value; this.RaisePropertyChanged("IsButtonEnabled"); }
}
/// <summary>
/// When InputValue changed, change the enable state of the button based on the current conditions
/// </summary>
public string InputText
{
get { return _inputText; }
set
{
_inputText = value;
this.RaisePropertyChanged("InputText");
// You can control the enable state of the button easily
if (AllItems.Any(item => item.Name == value))
{
// SelectedItem is not null
IsButtonEnabled = true;
}
else if (!string.IsNullOrEmpty(value))
{
// SelectedItem is null
IsButtonEnabled = true;
}
else
{
IsButtonEnabled = false;
}
}
}
Finally, here is the project: ComboBoxDemo

Related

Caliburn.Micro - Passing combobox items to a button

I'm trying to pass items from my Combobox (which is binded to my Model object's lists) to my button. My problem is that I'm new to Caliburn.Micro + WPF and not quite sure how to subscribe/pass the desired values to my button (like sending strings of a PropetyName to a Button(string propetyName)).
ViewModel code:
class ShellViewModel : Screen
{
private DataModel _fileInFolder;
private BindableCollection<DataModel> _data;
public ShellViewModel()
{
// .GetData() preforms the objects' initialization
DataModel dataOutput = new DataModel();
Data = new BindableCollection<DataModel>(dataOutput.GetData());
}
public BindableCollection<DataModel> Data
{
get
{
return _data;
}
set
{
_data = value;
NotifyOfPropertyChange(() => Data);
}
}
public DataModel FileInFolder
{
get { return _fileInFolder; }
set
{
_fileInFolder = value;
NotifyOfPropertyChange(() => FileInFolder);
}
}
//This is where the items will be passed to.
public void OpenFile()
{
}
}
XAML code:
<Grid>
<!-- Folders -->
<ComboBox ItemsSource="{Binding Data}" SelectedItem="{Binding FileInFolder}"
HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="250">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Folders}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- Files -->
<ComboBox x:Name="FileInFolder_Files"
HorizontalAlignment="Left" Margin="280,10,0,0" VerticalAlignment="Top" Width="250"/>
<!-- Open File -->
<Button x:Name="OpenFile"
Content="Open File" HorizontalAlignment="Left" Margin="560,10,0,0" VerticalAlignment="Top" Width="90">
</Button>
</Grid>
Sorry if my description is vague/missing more clarification, I'm a new user here!
FileInFolder is the selected item of the combo.
OpenFile is in the same class and can therefore reference FileInFolder.
public void OpenFile()
{
var whatever = FileInFolder.SomeProperty;
// etc
}
You probably want some null checking in there.

how to get the value of checkbox which is inside the combo box WPF?

I have a combobox and the checkbox is present inside the combobox. I want the value of the multi selection checkbox. My code:
<ComboBox Name="LocationFilterComboBox" Width="100" SelectedItem="{Binding LocationValue}">
<ComboBox.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox Content="{Binding LocationValue}" IsChecked="{Binding ElementName=all, Path=IsChecked, Mode=TwoWay}" Width="120" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Back-end code:
//code to get the value
public partial class Location
{
#region Property
private string LOCAID;
public string LocaId
{
get
{
return LOCAID;
}
set
{
value = LOCAID;
}
}
private string LOCADESC;
public string LocationValue
{
get
{
return LOCADESC;
}
set
{
value = LOCADESC;
}
}
#endregion
}
}
//code for binding the location
public IList<Location> BindAllLocation()
{
if (Repository != null) Repository.Dispose();
Repository = GetInvoiceRepository();
IList<Location> locationList = Repository.GetLocations(((App)Application.Current).DataContextFactory);
return locationList;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
LocationFilterComboBox.ItemsSource = BindAllLocation();
}
I would not set the ItemsSource directly. Try binding it:
private ObservableCollection<Location> _locationList = new ObservableCollection<Location>();
public ObservableCollection<Location> LocationList
{
get { return _locationList; };
set
{
if (_locationList == value)
return;
_locationList = value;
OnPropertyChanged();
}
private Location _currentLocation;
public Location CurrentLocation
{
get { return _currentLocation; };
set
{
if (_currentLocation == value)
return;
_currentLocation = value;
OnPropertyChanged();
}
public IList BindAllLocation()
{
if (Repository != null) Repository.Dispose();
Repository = GetInvoiceRepository();
IList<Location> locationList = Repository.GetLocations(((App)Application.Current).DataContextFactory);
return locationList;
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
foreach (var item in BindAllLocation())
LocationList.Add(item);
}
In Xaml:
<ComboBox ItemsSource="{Binding *binding to LocationList*}" Width="100" SelectedItem="{Binding CurrentLocation}">
<ComboBox.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<CheckBox Content="{Binding LocationValue}" IsChecked="{Binding IsChecked, Mode=TwoWay}" Width="120" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I do not know the DataContext on the ComboBox so if you have Problems with that try this.
Then you can sort out the selected Values using:
var result = LocationList.Where(x => x.IsChecked);
Of course you have to have a IsChecked Property for that.
Since the IsChecked property of each CheckBox in the ComboBox is bound to the IsChecked property of the "all" CheckBox, you should be able to get the value directly from this one:
bool isChecked = all.IsChecked;
The other option would otherwise be to add a bool property to the Location class and bind to this one:
<CheckBox Content="{Binding LocationValue}" IsChecked="{Binding IsChecked}" Width="120" />
You could then get the value of each individual CheckBox in the ComboBox by simply iterating over its ItemsSource:
foreach(var location in LocationFilterComboBox.Items.OfType<Location>())
{
bool isChecked = location.IsChecked;
}

Why isn't my user control with a combobox binding correctly?

I've got a really simple UserControl I'm trying to create that contains a list of US states. I am trying to expose the selected state via a "SelectedState" property. However, I'm having trouble trying to get this binding to fire once it's hooked up in another UserControl / form.
The XAML for the user control looks like this:
<UserControl x:Class="Sample.Desktop.UserControls.StateDropdown"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Sample.Desktop.UserControls"
mc:Ignorable="d"
Width="170" Height="28"
d:DesignHeight="28" d:DesignWidth="170">
<ComboBox x:Name="cboState"
ItemsSource="{Binding StateList, RelativeSource={RelativeSource AncestorType=UserControl}}"
SelectedValue="{Binding SelectedState, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Abbreviation}"></Label>
<Label> - </Label>
<Label Content="{Binding Name}"></Label>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
In the code-behind, I have this code:
public static readonly DependencyProperty SelectedStateProperty = DependencyProperty.Register("SelectedState",
typeof(USState),
typeof(StateDropdown),
new UIPropertyMetadata(null,
new PropertyChangedCallback(OnSelectedStateChanged),
new CoerceValueCallback(OnCoerceSelectedState)));
private static object OnCoerceSelectedState(DependencyObject o, object value)
{
StateDropdown stateDropdown = o as StateDropdown;
if (stateDropdown != null)
return stateDropdown.OnCoerceSelectedState((USState)value);
else
return value;
}
private static void OnSelectedStateChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
StateDropdown stateDropdown = o as StateDropdown;
if (stateDropdown != null)
stateDropdown.OnSelectedStateChanged((USState)e.OldValue, (USState)e.NewValue);
}
protected virtual USState OnCoerceSelectedState(USState value)
{
// TODO: Keep the proposed value within the desired range.
return value;
}
protected virtual void OnSelectedStateChanged(USState oldValue, USState newValue)
{
// TODO: Add your property changed side-effects. Descendants can override as well.
}
public USState SelectedState
{
// IMPORTANT: To maintain parity between setting a property in XAML and procedural code, do not touch the getter and setter inside this dependency property!
get
{
return (USState)GetValue(SelectedStateProperty);
}
set
{
SetValue(SelectedStateProperty, value);
}
}
I wasn't able to get the SelectedValue bound property of SelectedState to fire, so I ended up hooking up the SelectionChanged event.
private void cboState_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems?.Count > 0)
{
SelectedState = (USState)e.AddedItems[0];
}
}
In my other user control, I have this in the XAML:
<uc:StateDropdown Margin="10,0,0,0" SelectedState="{Binding SelectedState}" ></uc:StateDropdown>
And the ViewModel (I'm using Caliburn Micro), I have this property:
protected USState _selectedState;
public USState SelectedState
{
get { return _selectedState; }
set
{
_selectedState = value;
NotifyOfPropertyChange(() => SelectedState);
}
}
The combo is populated as expected. However, SelectedState is never fired/updated when I change the selection.
I had also previously tried using SelectedItem instead of SelectedValue, with the same results.
I'm sure I'm missing something obvious, but I'm having trouble seeing where I went wrong.
EDIT: Here's what fixed the binding.
I removed the SelectionChanged event. Then I modified my "hosting page" usercontrol to set TwoWay binding:
<uc:StateDropdown Margin="10,0,0,0" SelectedState="{Binding SelectedState, Mode=TwoWay}" ></uc:StateDropdown>
As soon as I added that, SelectedState started being updated when I changed the ComboBox value.
The only things I see, is this line :
SelectedValue="{Binding SelectedState, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}"
You don't need it, because of the SelectionChanged event. And it can cause the problem.
Also I would bind the SelectedState of the UserControl using a TwoWay binding.
Hope that will help you.

Unselect WPF DataGrid when ItemsSource changed

I have the following DataGrid in WPF :
<DataGrid x:Name="dgPatientMedicationOrderList" Width="Auto" HorizontalAlignment="Stretch" RowHeight="40" Background="Transparent" HorizontalContentAlignment="Left"
GridLinesVisibility="None" RowHeaderWidth="0" VirtualizingStackPanel.VirtualizationMode="Standard" SelectedIndex="-1"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" AutoGenerateColumns="False" SelectionMode="Single"
IsSynchronizedWithCurrentItem="True" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Stretch" IsReadOnly="True"
ItemsSource="{Binding PatientOrdersCollectionView}">
When a user clicks on a row in the DataGrid, it's SelectionChanged event is fired and the bound ViewModel command drives the View to load another user control corresponding to the DG row. In my view I am changing my datagrid's source binding from my ViewModel. Now the problem is that every time the ItemsSource is changed the SelectionChanged event is fired selecting the first item in the DataGrid; this is followed by the view loading the user control without the user explicitly selecting the DataGrid row. How can I prevent the DataGrid from selecting any Row when it's ItemsSource is changed ?
Simplified Demo Code:
XAML:
<Button Content="Change Source" Command="{Binding ChangeItemsSourceCmd}" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,20" />
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" Orientation="Vertical">
<TextBlock Text="{Binding SelectedPerson.Id, StringFormat=ID: {0}}" />
<TextBlock Text="{Binding SelectedPerson.Name, StringFormat=Name: {0}}" />
<TextBlock Text="{Binding SelectedPerson.Gender, StringFormat=Gender: {0}}" />
<TextBlock Text="{Binding SelectedPerson.Country, StringFormat=Country: {0}}" />
</StackPanel>
</Grid>
ViewModel:
public class WindowViewModel : ViewModelBase
{
private Person _selectedPerson;
private ObservableCollection<Person> _personList;
public Person SelectedPerson
{
get { return _selectedPerson; }
set { RaisePropertyChange<Person>(() => SelectedPerson, ref _selectedPerson, ref value); }
}
public ObservableCollection<Person> PersonList
{
get { return _personList; }
set
{
SelectedPerson = null;
RaisePropertyChange<ObservableCollection<Person>>(() => PersonList, ref _personList, ref value);
}
}
public WindowViewModel()
{
PersonList = new ObservableCollection<Person>()
{
new Person() { Id=101, Name="Mahesh", Gender="Male", Country="India"},
new Person() { Id=102, Name="Srinivas", Gender="Male", Country="Sri Lanka"},
new Person() { Id=103, Name="Isha", Gender="Female", Country="United States"},
new Person() { Id=104, Name="Salim", Gender="Male", Country="Pakistan"}
};
}
public ICommand ChangeItemsSourceCmd
{
get
{
return new RelayCommand(ChangeItemsSourceCmdHandler);
}
}
private void ChangeItemsSourceCmdHandler()
{
PersonList = new ObservableCollection<Person>()
{
new Person() { Id=105, Name="Raman", Gender="Male", Country="Uganda"},
new Person() { Id=106, Name="Anurag", Gender="Male", Country="England"},
new Person() { Id=107, Name="Komal", Gender="Female", Country="Thailand"},
new Person() { Id=108, Name="Nitin", Gender="Male", Country="Africa"}
};
}
}
You should:
1.Add a SelectedItem Binding in your DataGrid:
SelectedItem="{Binding Selected, Mode=TwoWay}"
2.Have the related property (firing PropertyChanged of course)
public object Selected
{
get { return selected; }
set
{
selected = value;
OnPropertyChanged("Selected");
}
}
3.Set it to null in your Itemssource setter (or before you change it)
public IEnumerable PatientOrdersCollectionView
{
get { return patientOrdersCollectionView; }
set
{
Selected = null; // Put it to null here to unselect it from grid
patientOrdersCollectionView = value;
OnPropertyChanged("PatientOrdersCollectionView");
}
}
Should do the trick.

Binding with checkbox (select all)

I want to implement a checkbox which functions as a select-all / unselect-all checkbox but I am getting some problems with the binding. I am not really new to XAML and WPF so it is a mistery to me why my code is not working. I hope you can help. This is what I am doing:
First of all, I use MVVMLight and the event-to-command tags.
My view is called SetupView.xaml and my view-model is called SetupViewModel.cs
public class SetupViewModel : ViewModelBase
{
private List<FilterOptions> m_informationToShow;
private FilterOptions m_currentSelection;
public List<FilterOptions> InformationToShow
{
get { return m_informationToShow; }
set
{
m_informationToShow = value;
RaisePropertyChanged("InformationToShow");
RaisePropertyChanged("InformationToShowCount");
}
}
public FilterOptions CurrentSelection
{
get { return m_currentSelection; }
set
{
m_currentSelection = value;
RaisePropertyChanged("CurrentSelection");
}
}
}
The FilterOptions-object is my model object. Because you will need some of it it to understand the problem, here it show the part you need to understand the problem:
public class FilterOptions
{
private string m_projectName;
private BugsFilter m_bugsFilter;
private BuildsFilter m_buildsFilter;
private ChangeSetsFilter m_changeSetsFilter;
private ProgressInfoFilter m_progressInfoFilter;
private RisksFilter m_risksFilter;
private bool m_projectHealthFilter;
public bool AllFilterValues
{
get
{
if (m_bugsFilter.AtLeastOneFieldEnabled() ||
m_buildsFilter.AtLeastOneFieldEnabled() ||
m_changeSetsFilter.AtLeastOneFieldEnabled() ||
m_progressInfoFilter.AtLeastOneFieldEnabled() ||
m_risksFilter.AtLeastOneFieldEnabled() ||
m_projectHealthFilter
)
{
return true;
}
else
{
return false;
}
}
set
{
if (value == false)
{
m_bugsFilter.NoInformation();
m_buildsFilter.NoInformation();
m_changeSetsFilter.NoInformation();
m_progressInfoFilter.NoInformation();
m_risksFilter.NoInformation();
m_projectHealthFilter = false;
}
else
{
m_bugsFilter.CompleteInformation();
m_buildsFilter.CompleteInformation();
m_changeSetsFilter.CompleteInformation();
m_progressInfoFilter.CompleteInformation();
m_risksFilter.CompleteInformation();
m_projectHealthFilter = true;
}
}
}
I will proceed with my view:
<UserControl.Resources>
<viewModels:SetupViewModel x:Key="thisViewModel"></viewModels:SetupViewModel>
<DataTemplate x:Key="ProjectEntryTemplate">
<Border Margin="75,20,5,0">
<CheckBox Name="naam" Content="{Binding ProjectName}"
FontFamily="Segoe UI"
FontWeight="Light"
FontSize="24"
IsChecked="{Binding AllFilterValues}"
DataContext="{Binding}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<mvvm:EventToCommand Command="{Binding ProjectListItemCheckedChanged, Source={StaticResource thisViewModel}}"
PassEventArgsToCommand="True"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<mvvm:EventToCommand Command="{Binding ProjectListItemCheckedChanged, Source={StaticResource thisViewModel}}"
PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
</Border>
</DataTemplate>
</UserControl.Resources>
As you can see, I have a datatemplate which I am using in a listbox:
<ListBox ItemsSource="{Binding InformationToShow}"
ItemTemplate="{StaticResource ProjectEntryTemplate}"
SelectedIndex="0"
BorderThickness="0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<mvvm:EventToCommand Command="{Binding SelectionListboxChanged}"
PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
Besides from that, I have in the same window, in another grid on the right side, a lot of checkboxes. They all correspond to a given filter from the FilterOptions object. This is what I am doing in my view:
<StackPanel Orientation="Vertical"
Margin="0,5,0,5">
<CheckBox Name="activeBugs" Content="Active bugs"
FontFamily="Segoe UI"
FontWeight="Light"
FontSize="22"
IsChecked="{Binding CurrentSelection.BugsFilter.ActiveBugs}">
</CheckBox>
<CheckBox Name="resolvedBugs" Content="Resolved bugs"
FontFamily="Segoe UI"
FontWeight="Light"
FontSize="22"
IsChecked="{Binding CurrentSelection.BugsFilter.ResolvedBugs}"/>
<CheckBox Name="bugTrend" Content="Bug trend"
FontFamily="Segoe UI"
FontWeight="Light"
FontSize="22"
IsChecked="{Binding CurrentSelection.BugsFilter.BugTrend}"/>
</StackPanel>
Last but not least, this are the command functions which I have in my view-model:
RelayCommand m_selectionChanged;
public ICommand SelectionListboxChanged
{
get
{
if (m_selectionChanged == null)
m_selectionChanged = new RelayCommand(param => SelectionListboxChangedExec(param), param => true);
return m_selectionChanged;
}
}
private void SelectionListboxChangedExec(object param)
{
SelectionChangedEventArgs e = (SelectionChangedEventArgs)param;
ListBox b = (ListBox)e.Source;
CurrentSelection = (FilterOptions)b.SelectedItem;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
RelayCommand m_projectCheckedChanged;
public ICommand ProjectListItemCheckedChanged
{
get
{
if (m_projectCheckedChanged == null)
m_projectCheckedChanged = new RelayCommand(param => ProjectListItemCheckedChangedExec(param), param => true);
return m_projectCheckedChanged;
}
}
private void ProjectListItemCheckedChangedExec(object param)
{
RoutedEventArgs e = (RoutedEventArgs)param;
CheckBox checkBox = (CheckBox)e.Source;
FilterOptions dataContext = (FilterOptions)checkBox.DataContext;
if ((bool)checkBox.IsChecked)
dataContext.AllFilterValues = true;
else
{
dataContext.AllFilterValues = false;
}
//var expression = checkBox.GetBindingExpression(ToggleButton.IsCheckedProperty);
//expression.UpdateSource();
}
I really cant find the problem. Is there anyone who can help me?
Your help will be much appreciated !!
Thank you all in advance !
Why do you have to do it with a command? bind the checkbox to a BindingOption class that internally notifies the parent ViewModel, this notification really doesn't belong in the view, but to the view-model.
The ViewModel isn't supposed to know that the view uses a CheckBox.
So what u should do have the individual options have a notifying IsSelected property bound to the CheckBoxes, provide each of them with a reference to the parent ViewModel, and notify the parent when current IsSelected was changed. Doing this in the View, although you can find many way to do it, you're not supposed to, MVVM is about separating view-tasks from viewmodel-tasks.
This is way also gives you control on "Select all", "Deselect all" or "Invert selection" etc.

Resources