AutoCompleteBox with TextChanged event not selecting properly - silverlight

Hi I'm using an AutoCompleteBox like this
<!-- XAML Code -->
<sdk:AutoCompleteBox Grid.Row="2"
FilterMode="None"
ItemsSource="{Binding Customers}"
SelectedItem="{Binding Path=SelectedCustomer, Mode=TwoWay}"
Text="{Binding CustomerSearchString, Mode=TwoWay}"
ValueMemberBinding="{Binding Path=FullName}"
ValueMemberPath="FullName"
TextChanged="{ext:Invoke MethodName=Search, Source={Binding}}"/>
C# part:
// Search Method in the viewmodel
public void Search()
{
var customerOperation = _context.Load(_context.GetCustomerByNameQuery(CustomerSearchString));
customerOperation.Completed += (s, e) => Customers = new List<Customer>(customerOperation.Entities);
}
In my app to quick-search for customers for an fast and uncomplicated method to search. I get it to display everything correctly in the dropdown, and when I select with the mouse it works perfectly.
But when I press ArrowDown, you see the text come up for a split-second but then it reverts and puts the cursor back in the textbox instead of selecting the first entry down. I tried using the TextInput event, but that one won't fire.
How can I avoid this behaviour?
SOLUTION:
The problem was, that the TextChanged event got fired when the user selected an entry, creating some sort of race condition like behaviour where the Text got reset. The solution was to use the KeyUp event (don't use KeyDown, because the Text property won't be updated yet). This event doesn't get triggered when the user selects something, solving the problem.
Final code (ViewModel unchanged):
<!-- XAML Code -->
<sdk:AutoCompleteBox Grid.Row="2"
FilterMode="None"
ItemsSource="{Binding Customers}"
SelectedItem="{Binding Path=SelectedCustomer, Mode=TwoWay}"
Text="{Binding CustomerSearchString, Mode=TwoWay}"
ValueMemberBinding="{Binding Path=FullName}"
ValueMemberPath="FullName"
KeyUp="{ext:Invoke MethodName=Search, Source={Binding}}"/>
Thanks everyone!

Add a handler like this in code:
KeyEventHandler eventHandler = MyAutoCompleteBox_KeyDown;
MyAutoCompleteBox.AddHandler(KeyDownEvent, eventHandler, true);

I'm not understanding why you are using a TextChanged event...? What is that for? If you take that out, does it work? I use an autocomplete box in my project and I don't need a search method... all I do is just supply a list of objects to the autocompletebox and the it searches that list when the user types. I can select either by mouse or by up/down arrows. The only thing that I can think of is that each time you try to use the up/down arrow the text changes and fires off the search function and closes the selection option drop down...

Related

Combobox: Get text and selected item in mvvm way

The combobox is editable so user can also write. I have two usecases:
Get the text from combobox in a Lostfocus way, when user writes
something in the box and when he presses "Tab" then I want the text
from the combobox and I add the value in the itemsSource list.
When the users makes the selection from the combobox dropdown, I want that
selected item as soon he selects it and this time I dont
want to have it in Lostfocus manner but somewhat like
PropertyChanged way.
I tried the code which is given below:
<ComboBox Margin="3" x:Name="Combobox" SelectedItem="{Binding SelectedPath, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Text="{Binding PathLocation, UpdateSourceTrigger=LostFocus, ValidatesOnNotifyDataErrors=True}" IsTextSearchEnabled="True" VerticalContentAlignment="Center" ItemsSource="{Binding SelectedPaths}" IsEditable="True" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"/>
Things worked fine for the first time when the application starts but after some interactions the problem arises. When the user starts typing in the combobox the SelectedItem property of combobox triggers which is contrary to what I want in the first use case.
In short: when the user writes something in the combobox I want to have it in a Lostfocus manner and when he makes the selection from the dropdown of combobox I want to have it in a PropertyChanged manner.
Let me know if more details are required.
I removed the "IsTextSearchEnabled" property but it also didnt work then I came to know that "IsTextSearchEnabled" property of Comobobox is by default true, which is causing some values suggested by the combobox are setting in my properties. As soon as I made the "IsTextSearchEnabled" to false, it is working fine.

How to override PreviewKeyDown on a TextBox?

I have a handler for the PreviewKeyDown event on a TextBox inside a control I made, which checks to see if the user has pressed the down key. The event handler correctly handles the key press when the control sits inside a layout container like a grid. If however, I place the control inside a DataGrid's DataGridTempalteColumn, the control does not do what I need it to do.
I think the issue is that because the PreviewKeyDown is on a Tunneling strategy, the host DataGrid gets to handle the down arrow key press before my control does. For the down arrow the DataGrid moves the focus to the next row. The DataGrid doesn't seem to be setting the IsHandled to true, because it the event eventually gets down to my control, but it does nevertheless do its own thing on the event, which breaks things for me.
The issue isn't really with the DataGrid, but with the fact that my control has a tunneling PreviewKeyDown event from the TextBox. I'm looking for a way to override this default event on the TextBox. Perhaps there's something I can do with attached behaviors? Maybe I need to inherit from the TextBox and then override? So far I've not found anything that indicates how to handle a situation like this.
Below is the original text for this question that didn't yield any answers
I'm having difficulty using a custom autocomplete text box I made as a DataTemplate in a DataGridTemplateColumn.
<DataGrid.Columns>
<DataGridTemplateColumn Header="Material" Width="300">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<local:actextbox Text="{Binding Path=Description, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
MatchList="{Binding Path=DataContext.LaborTemplatesList, RelativeSource={RelativeSource AncestorType=UserControl, AncestorLevel=2}}"/>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Description}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
The actextbox class derives from user control and has event handlers to respond to certain key presses like so
private void myTextBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Down & myPopup.IsOpen == true)
{
myPopUpList.SelectedIndex = 0;
ListBoxItem lbi = (ListBoxItem)myPopUpList.ItemContainerGenerator.ContainerFromItem(myPopUpList.SelectedItem);
lbi.Focus();
e.Handled = true;
}
}
The intent is that when an autocomplete popup is displayed, pressing down and up allows the user to navigate its contents. This works as expected when the control is placed in a hierarchy of layout containers; however, when it is part of the cell in a datagrid the expected behaviour is lost. Looks like the previewKeyDown is used by the DataGrid to apply its own interpretation of the down or up arrows, and while it does not set the event as handled, by the time the event gets down to my control focus is lost, and different row is selected.
I've looked online all over, and wasn't able to find any clues on how to handle this. Certainly, I've seen controls inside DataGridTemplateColumns handle all sorts of inputs, but how they accomplish this is lost on me.
OK, following some advice to use Snoop I figured out what was happening. In fact the issue was not that the DataGrid was doing something with the PreviewKEyDown event, but that I was moving focus away from the data grid cell that was presently being edited triggering a CellEditEnding event. This resulted in the behaviour I was observing.

WPF - How to restyle ComboBox to remove the textbox/editbox and replace with static text

I want to restyle a WPF ComboBox which is formatted to be a drop-list type, BUT remove the selected TextBox which gets populated with the selected contents and just replace it with some static text and an image which remains constant, simulating a button like look.
So in effect it becomes a button-drop-list, so when I select an item from the drop list, I can populate another control via command bindings with its selected value and the button style remains.
Basically something like this crude picture I've hacked together.
I've seen examples of button with context menus, but I don't like the idea, and a ComboBox fits my needs perfectly in terms of function and easy command and data binding.
I know it can be done, but I lost faith in my ablity after reading overly confusing examples based on other controls. I couldn't find an example detailing my needs to learn from.
Cheers
DIGGIDY
After much playing around, I decided the better option was to go for a button with bound context menu, this worked out to be the better solution in the end.
Thanks for your help Marc.
I had got the same problem and actually, it's simple.
Just put a read-only ComboBox with a SelectionChanged event.
You put in index 0 your static text.
Now, when the user is selecting something, get the selected item and then, set the SelectedIndex to 0. So you got the item the user selected but the displayed text is the same.
See:
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBox combo = (ComboBox)sender;
if (combo.SelectedIndex > 0)
{
// Do your stuff here...
// Then
combo.SelectedIndex = 0;
}
}
[EDIT] According to me, I prefer my previous answer. So make sure you, reader, that my previous answer doesn't match your expectations. [/EDIT]
Another answer is to put your object above the ComboBox and then catch the MouseDown event from this object and dropped down the ComboBox. I used a read-only TextBox in my example.
See:
<Grid>
<ComboBox x:Name="Combo" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="120">
<ComboBoxItem Content="TEST" />
<ComboBoxItem Content="TEST1" />
<ComboBoxItem Content="TEST2" />
<ComboBoxItem Content="TEST3" />
</ComboBox>
<TextBox HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" Text="TextBox" VerticalAlignment="Top" Width="120" IsReadOnly="True" PreviewMouseDown="TextBox_PreviewMouseDown"/>
</Grid>
And then the code behind:
private void TextBox_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true; // Prevents the event.
Combo.IsDropDownOpen = true; // Drops down the ComboBox.
}
It works fine for me.

Explicit Binding UpdateSource() Doesn't Work Until Mouse Hovers Over TextBox

So I'm calling the UpdateSource() method on Text property of TextBox in code behind. The ErrorTemplate should come up, but it doesn't until I move my mouse over the TextBox.
Or maybe it does but doesn't get repainted? Any ideas how to fix this to update GUI instantly?
EDIT:
It is PropertyChanged. The problem is not with updating source. The problem is that when source updates, it causes validation and the ErrorTemplate should come up, but it doesn't until I move my mouse over validated TextBox.
EDIT:
Appearently it does update when I move my mouse over some other GUI elements as well (like radio button), which doesn't have anything to do with validation. This is definitely an issue of repainting or binding validation error check trigger. How can I trigger that in code behind?
Binding to Text property of 'TextBox' control is quite specific. UpdateSourceTrigger is set to "LostFocus" by default. It is for improving performance. Try to change it to PropertyChanged.
You may be able to get Validation_Error to fire.
<TextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" x:Name="fieldValue" BorderBrush="SteelBlue" BorderThickness="2" TextWrapping="Wrap"
Text="{Binding Path=DF.FieldValue, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Validation.Error="Validataion_Error"
LostFocus="fieldValue_LostFocus" KeyUp="fieldValue_KeyUp"/>
private void Validataion_Error(object sender, ValidationErrorEventArgs e)
{
if (e.Action == ValidationErrorEventAction.Added)
{
MessageBox.Show(e.Error.ErrorContent.ToString(), "Fatal Update Error");
}
}
It may be that since that event is on the TextBox is only fires when the TextBox has focus. You may need to throw a custom event and handle it at the Page/Window.

WPF Combo box + MouseLeftButtonDown

Hopefully someone can help because I haven't been able to figure this out. Here's my xaml code for the popup/combo box, please not there is other code before and after this for the rest of the layout.
<Popup x:Name="popupMethods" Height="400" Width="150"
StaysOpen="False" Placement="Bottom" IsOpen="false"
HorizontalAlignment="Left">
<ComboBox x:Name="combo" MouseLeftButtonDown="combo_MouseDown">
<TextBlock>Hello</TextBlock>
<TextBlock>World</TextBlock>
<TextBlock>This</TextBlock>
<TextBlock>is</TextBlock>
<TextBlock>Autocomplete</TextBlock>
<TextBlock>Textbox</TextBlock>
</ComboBox>
</Popup>
Have it set up to popup on the screen whenever the user starts typing, which works. The problem is I want the user to be able to click one of the words in the combo box and that gets inserted into the text box. This parts not working as the MouseLeftButtonDown is never being fired. I've tried a couple of different methods including the one from this site
http://www.designerwpf.com/2008/12/03/getting-a-mouseleftbuttondown-or-mouseleftbuttonup-
event-from-your-textbox/
as well as one I saw somewhere else that was combo.MouseLeftButtonDown += delegate { };
Thanks for any help.
Instead of MouseLeftButtonDown event handler, use PreviewMouseLeftButtonDown you can achieve the same.
You probably want to look at the SelectionChanged event. It fires whenever an item in the ComboBox's drop down is selected.
I think that the ComboBox internally handles the MouseLeftButtonDown event, and that is causing it not to be passed on to your code.

Resources