Background: In my View I have a TextBlock and a TextBox. As soon as the text changes in the TextBox the TextChanged event gets fired and after filtering a list, I want to update the property which is bound to the TextBlock.
In my case it's a counter that shows the number of contacts in the current list.
Problem: When I debug the property (ContactsCount) gets always updated correctly, but only in Code and not in the UI. Strangely enough the UI only updates after I delete the text from the TextBox, to the last list count, but not the actual one.
Code
View:
<TextBlock Text="{Binding ContactsCount, UpdateSourceTrigger=PropertyChanged}"
d:Text="4 Contacts"/>
<xctk:WatermarkTextBox Text="{Binding SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Watermark="Search Contact"
Margin="20,10">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding Path=SearchBoxTextChanged}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</xctk:WatermarkTextBox>
ViewModel:
public string ContactsCount
{
get => contactsCount;
set
{
contactsCount = value;
OnPropertyChanged(ContactsCount);
}
}
public string SearchText
{
get => searchText;
set
{
searchText = value;
OnPropertyChanged(SearchText);
}
}
public CommandHandler SearchBoxTextChanged { get; set; }
SearchBoxTextChanged = new CommandHandler(TextChanged);
private void TextChanged()
{
var filteredList = contactsList.Where(c => c.FirstName != null && c.FirstName.Contains(searchText.ToLower(), StringComparison.OrdinalIgnoreCase) ||
c.SecondName != null && c.SecondName.Contains(searchText.ToLower(), StringComparison.OrdinalIgnoreCase));
Contacts = new ObservableCollection<Contact>(filteredList);
// Bug: Doesn't update the UI after ContactsCount gets changed
ContactsCount = $"{Contacts.Count} Contacts";
}
You didn't post the code of your OnPropertyChanged() method, but I suspect if should be
OnPropertyChanged("SearchText");
or better
OnPropertyChanged(nameof(SearchText));
i.e. pass in the name of the updated property, not its value.
Related
I have a datagridview populated with items and I am using a SelectionChanged event to populate textboxes from that data when selected.
If I make a selection, everything works. If I click elsewhere in the App and then come back to click the SelectionChanged event again on the same item - it doesn't work.
According to MSDN:
"This event occurs whenever there is a change to a selection."
MSDN SelectionChangedEvent
So it appears that despite clicking elsewhere, resetting the Textboxes - the selected item is not changing as the SelectionChanged event no longer triggers - click on another item and it works, click back again and it works - but click on it, reset textboxes, click it again - nothing happens, this includes clicking in the datagridview itself in a blank area.
XAML:
<DataGrid x:Name="TimeView" Grid.Row="1" Grid.Column="3"
Grid.ColumnSpan="3" Grid.RowSpan="4" Margin="10 50 10 10"
CanUserAddRows="False" Visibility="{Binding StartTiming}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cal:ActionMessage MethodName="SelectedTimeChangeEvent">
<cal:Parameter Value="$eventArgs" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</DataGrid>
ViewModel
public void SelectedTimeChangeEvent(SelectionChangedEventArgs e)
{
foreach (TimeData addedRow in e.AddedItems)
{
TbID = addedRow.ID;
TbDate = addedRow.Date;
TbStartTime = addedRow.StartTime;
TbDescription = addedRow.Description;
}
}
Since I am using MVVM and Caliburn, TimeView is connected to an ICollection, which is in turn connected to an ObservableCollection:
private ObservableCollection<TimeData>? _timeCollection;
public ObservableCollection<TimeData>? TimeCollection
{
get { return _timeCollection; }
set
{
_timeCollection = value;
NotifyOfPropertyChange(() => TimeCollection);
}
}
private ICollectionView? _timeView;
public ICollectionView? TimeView
{
get { return _timeView; }
set
{
_timeView = value;
NotifyOfPropertyChange(() => TimeView);
}
}
There is a work around, which is the following after populating the Textboxes:
TimeView = null;
TimeView = CollectionViewSource.GetDefaultView(TimeCollection);
This works, but I thought that there might be a "deselect" option that would be better than repopulating every time a selection is made, one of my Datagrids contains 15,000 items, and it is still instant, but seems overkill to populate it every time a selection is made.
i would recommend bindings, they automaticly reset when nothing is selected
<DockPanel>
<StackPanel DataContext="{Binding SelectedTime}" DockPanel.Dock="Left">
<TextBlock Text="{Binding ID}"/>
<TextBlock Text="{Binding Date}"/>
<TextBlock Text="{Binding StartTime}"/>
<TextBlock Text="{Binding Description}"/>
</StackPanel>
<DataGrid ItemsSource="{Binding TimeView}" SelectedItem="{Binding SelectedTime}">
...
</DataGrid>
</DockPanel>
public TimeData SelectedTime
{
get { return _selectedTime; }
set
{
_selectedTime = value;
NotifyOfPropertyChange(() => SelectedTime);
}
}
also there is this neet feature
protected virtual void SetValue<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
{
field = value;
OnPropertyChanged(propertyName);
}
so you can write
set { SetValue(ref _selectedTime, value) }
This is for a Windows 10 Universal App.
XAML:
<RelativePanel Padding="4" Margin="4,12,0,0">
<TextBlock x:Name="Label" Text="Class Name" Margin="12,0,0,4"/>
<ListView x:Name="ClassTextBoxes"
ItemsSource="{Binding TextBoxList}"
SelectionMode="None" RelativePanel.Below="Label">
<ListView.ItemTemplate>
<DataTemplate >
<RelativePanel>
<TextBox x:Name="tbox"
PlaceholderText="{Binding PlaceHolder}"
Text="{Binding BoxText,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Padding="4" Width="200" MaxLength="25"/>
<TextBlock x:Name="errorLabel"
RelativePanel.Below="tbox"
Text="{Binding Error, Mode=TwoWay}"
Padding="0,0,0,4"
FontSize="10"
Foreground="Red"/>
<Button Content="Delete" Margin="12,0,0,0" RelativePanel.RightOf="tbox"/>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativePanel>
Model:
public class TextBoxStrings : BaseModel
{
private string _placeholder;
public string PlaceHolder
{
get { return _placeholder; }
set
{
if (_placeholder != value)
{
_placeholder = value;
NotifyPropertyChanged();
}
}
}
private string _boxText;
public string BoxText
{
get { return _boxText; }
set
{
if (_boxText != value)
{
_boxText = CheckBoxText(value);
NotifyPropertyChanged();
}
}
}
public string CheckBoxText(string val)
{
var r = new Regex("[^a-zA-Z0-9]+");
return r.Replace(val, "");
}
}
ViewModel:
private TrulyObservableCollection<TextBoxStrings> _textBoxList;
public TrulyObservableCollection<TextBoxStrings> TextBoxList
{
get { return _textBoxList; }
set
{
if (_textBoxList != value)
{
_textBoxList = value;
RaisePropertyChanged();
}
}
}
and I add new TextBoxString objects to my TextBoxList collection from within my view-model.
I want to make it that users can't type in certain characters (or rather, they get deleted whenever they
are typed in.
This works...in the model. Setting breakpoints and looking at the values, everything in the Model is working: value goes into the setter and gets changed, _boxText holds the new value that is set from CheckBoxText();
But the problem is, in my View, the textbox doesn't reflect changes to the underlying text that I make in the model.
So if I type in "abc*()" into "tbox", the value in the model will be "abc". The value of the textbox, however, will still be "abc*()".
I have a feeling it has something to do with the fact that I'm editing items that are inside of a collection and I don't have anything implemented to handle changing items within a collection. I was under the impression that using INotifyPropertyChanged and ObservableCollection<T> would take care of that for me.
Does anyone have any suggestions?
Thank you!
Edit: So, now I'm trying to use TrulyObservableCollection because I thought this was the problem, but it hasn't helped. Here it is: https://gist.github.com/itajaja/7507120
But the problem is, in my View, the textbox doesn't reflect changes to the underlying text that I make in the model.
As you've seen, the TextBox do reflect changes to your model. When you type in "abc*()" in the TextBox, the value in the model will be changed to "abc". The problem here is that the binding system in UWP is "intelligent". For TwoWay bindings, changes to the target will automatically propagate to the source and in this scenario, binding system assumes that the PropertyChanged event will fire for corresponding property in source and it ignores these events. So even you have RaisePropertyChanged or NotifyPropertyChanged in you source, the TextBox still won't update.
In WPF, we can call BindingExpression.UpdateTarget Method to force the update. But this method is not available in UWP.
As a workaround, you should be able to use TextBox.TextChanged event to check the input like following:
private void tbox_TextChanged(object sender, TextChangedEventArgs e)
{
var tb = sender as TextBox;
if (tb != null)
{
var originalText = tb.Text;
var r = new Regex("[^a-zA-Z0-9]+");
if (originalText != r.Replace(originalText, ""))
{
var index = (tb.SelectionStart - 1) < 0 ? 0 : (tb.SelectionStart - 1);
tb.Text = r.Replace(originalText, "");
tb.SelectionStart = index;
}
}
}
However it may break your MVVM model, you can use data validation to avoid this and here is a blog: Let’s Code! Handling validation in your Windows Store app (WinRT-XAML) you can refer to. And for my personal opinion, data validation is a better direction for this scenario.
if (_boxText != value)
{
_boxText = CheckBoxText(value);
NotifyPropertyChanged();
}
Try changing this to:
var tmp = CheckBoxText(value);
if (_boxText != tmp)
{
_boxText = tmp;
NotifyPropertyChanged();
}
I hope, in your XAML, the binding to property BoxText is two-way, right?
You should edit BoxText and then send checked value to UI. Just send value to CheckBoxText and already edited should be assigned to _boxText. And then you should send BoxText to UI by calling RaisePropertyChanged("BoxTest"). Please, see the following code snippet:
private string _boxText;
public string BoxText
{
get { return _boxText; }
set
{
if (_boxText != value)
{
_boxText=CheckBoxText(value);
RaisePropertyChanged("BoxText");
}
}
}
There is no difference where you use INotifyPropertyChanged for one property of for properties placed in collection. The complete example with collections and ListView can be seen here
This question already has answers here:
How to clear text box on click in MVVM
(2 answers)
Closed 7 years ago.
I have a textbox in which I am handling its text changed event.Now when I click button I want to clear the text from the textbox.
Now when I have text in the textbox and when I call my command the text is not cleared.
xaml
<TextBox Text="{Binding SearchText,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" Name="mytxtBox">
<TextBox.InputBindings>
<KeyBinding Command="{Binding Path=SearchCommand}" CommandParameter="{Binding ElementName=mytxtBox, Path=Text}" Key="Enter"/>
</TextBox.InputBindings>
</TextBox>
ViewModel
public string SearchText
{
get
{
return TypedText;
}
set
{
TypedText=value;
if (string.IsNullOrEmpty(TypedText.ToString()))// This is called when the text is empty
{
Some Logic//
}
SetProperty(ref TypedText, value);
}
}
private void MyCommandExecuted(string text)
{
SearchText= string.Empty;
}
You seem not to understand the framework you are using
public string SearchText
{
set
{
TypedText = value;
SetProperty(ref TypedText, value);
}
}
These two lines of code should/could NEVER ever be in the same block of code EVER.
What is happening is this.
The first line sets TypedText to value. OKAY...
Second line, check if TypedText is equal to value (spoiler alert, it is), and set them to be equal if not AND THEN TELL WPF that you changed to value.
The problem is, the second line never runs its logic (of tell WPF that I've changed). The reason this never runs is the first line.
Remove TypedText = value; from your code and it might just work.
set
{
if (string.IsNullOrEmpty(value))// This is called when the text is empty
{
Some Logic//
}
SetProperty(ref TypedText, value);
}
However, one last thing. I really really really hate code where the setter DOES stuff. Why is there logic here? From an external user, it might do something unexpected.
I have a textbox in which I am handling its text changed event
No you don't, or at least not in the code excerpt that you have shown in your question:
<TextBox Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Name="mytxtBox">
<TextBox.InputBindings>
<KeyBinding Command="{Binding Path=SearchCommand}" CommandParameter="{Binding ElementName=mytxtBox, Path=Text}" Key="Enter"/>
</TextBox.InputBindings>
</TextBox>
In this example, you have a string property data bound to the TextBox.Text property, which is similar, but not the same as handling its text changed event.
Either way, in order to clear this data bound value, you just need to set your data bound string property to an empty string (after removing that extraneous code from the setter):
public string SearchText
{
get { return TypedText; }
set { TypedText = value; SetProperty(ref TypedText, value); }
}
...
private void MyCommandExecuted(string text)
{
SearchText = string.Empty;
}
I have an existing solution of my WPF UI but it's ViewModel implementation is clunky and I'm looking to improve.
Below is a gif of how my current system works:
There's a Current Task (note: only ever one item)
There's a Task List for Tasks (note: possibly many) that need to run in the future
When the user selects one list box, the other selection is removed
The problem is, I'm implementing Current Task as a Listbox with only one item. This means I have to lug around a backing IList for the ItemSource and another property for the SelectedItem.
Is there another control I can use to behave like ListBoxItem, but I can bind my CurrentTask directly to it and not have to muck around with an List for ItemSource as well?
EDIT: To get the selection to go away when one listbox is selected, I have a trigger set up on the SelectionChanged event.
(deleted my previous answer)
It occurs to me that at least part of the functionality you're looking for is implemented by the RadioButton class. Multiple RadioButtons in the same scope guarantee that only one of them is selected. You'll probably have to do a little work to make sure that your RadioButtons can be scoped correctly in your UI, and you'll probably need to retemplate some things to get exactly the UI you need. Additionally, RadioButton does not have a SelectedItem/SelectValue property to which it can write to, because WPF provides no built-in mechanism for multiple controls to safely bind to a "SelectedWhatever" property. But you could roll this yourself pretty easily with codebehind or triggers.
Here's the implementation I went with:
XAML View
<!-- The Current Task box -->
<ListBox x:Name="CurrentTaskBox" FlowDirection="RightToLeft" Background="{StaticResource WhiteBrush}">
<ListBoxItem IsSelected="{Binding CurrentTaskSelected, Mode=TwoWay}" Content="{Binding CurrentTask.TaskId}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Selected">
<command:EventToCommand Command="{Binding SetTaskDetailsFromCurrentTaskCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBoxItem>
</ListBox>
<!-- The Task List box -->
<ListBox x:Name="TaskListBox" SelectedIndex="{Binding TaskListIndex}" SelectedValue="{Binding TaskListSelection}" IsSynchronizedWithCurrentItem="True" HorizontalContentAlignment="Stretch" ItemsSource="{Binding TaskList}" FlowDirection="RightToLeft" DisplayMemberPath="TaskId" Margin="3">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<command:EventToCommand Command="{Binding SetTaskDetailsFromTaskListCommand}" CommandParameter="{Binding SelectedItem, ElementName=TaskListBox}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
ViewModel
/* Omitted most INPC property declarations...kinda boring */
public ICommand SetTaskDetailsFromCurrentTaskCommand { get { return new RelayCommand(SetTaskDetailsFromCurrentTask); } }
public ICommand SetTaskDetailsFromTaskListCommand { get { return new RelayCommand<TaskScheduleSequenceDto>(async taskSelection => await SetTaskDetailsFromTaskList(taskSelection)); } }
private bool _currentTaskSelected;
public bool CurrentTaskSelected
{
get
{
return _currentTaskSelected;
}
set
{
Set(() => CurrentTaskSelected, ref _currentTaskSelected, value);
}
}
private async Task SetTaskDetailsFromTaskList(TaskScheduleSequenceDto taskListSelection)
{
if (taskListSelection == null)
{
return;
}
var taskDetails = await _broker.RetrieveTaskDetails(taskListSelection.TaskId);
TaskDetails = taskDetails;
CurrentTaskSelected = false;
}
private void SetTaskDetailsFromCurrentTask()
{
TaskDetails = CurrentTask;
TaskListSelection = null;
CurrentTaskSelected = true;
}
This works fine and only requires that I have a single CurrentTask property in my VM, which I think is much cleaner.
I am using PRISM to develop my Windows Phone app using the MVVM design pattern. I need to pass my SelectedItem object from my LongListSelector through my delegate command into my method.
I can do that. The problem is, I'm passing in the wrong object. I don't know if it's a design problem or I am binding improperly.
I need the object to be an Album object. What I'm getting instead is either null or my ViewModel. (I've changed the code a few times and those are the only things I can get.)
XAML
<phone:LongListSelector x:Name="AlbumList" ItemsSource="{Binding Albums}"
Margin="10,0,0,0" LayoutMode="Grid" GridCellSize="200, 200"
ItemTemplate="{StaticResource AlbumTemplate}"
toolkit:TiltEffect.IsTiltEnabled="True"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding DataContext.SelectAlbumCommand, ElementName=ContentPanel}"
CommandParameter="{Binding}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
ViewModel
private ObservableCollection<Album> _albums;
public ObservableCollection<Album> Albums
{
get { return _albums; }
set
{
if (value != null)
{
_albums = value;
NotifyPropertyChanged();
}
}
}
private Album _selectedAlbum;
public Album SelectedAlbum
{
get { return _selectedAlbum; }
// code removed as it is not needed; the object is null when trying to set.
}
public void AlbumSelected(object p)
{
App.Dispatcher.BeginInvoke(() =>
{
SelectedAlbum = (Album)p;
});
////Navigate("/Views/PhotosListPage.xaml");
}
//command that takes an object as parameter.
_selectAlbumCommand = new DelegateCommand<object>(this.AlbumSelected);
In case you merely want to set the SelectedAlbum by your SelectAlbumCommand, why don't you try binding the SelectedItem to SelectedAlbum instead?
<phone:LongListSelector x:Name="AlbumList" ItemsSource="{Binding Albums}"
SelectedItem="{Binding SelectedAlbum}" />
In case you actually want to pass the SelectedItem to the SelectedAlbumCommand (for some other reason), you should bind the CommandParameter to the SelectedItem of the LongListSelector
<i:InvokeCommandAction Command="{Binding DataContext.SelectAlbumCommand, ElementName=ContentPanel}" CommandParameter="{Binding ElementName=AlbumList, Path=SelectedItem}"/>
Apparently, you cannot use LongListSelector for this. I had to change this to a listbox and it worked fine.
Had I searched harder, I would have found this: How to select an item in LongListSelector using the MVVM-pattern?
and this: WP8 LongListSelector SelectedItem not bindable