Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF: Move focus to the next item in an ItemsControl on enter

Tags:

c#

wpf

listbox

WPF: When user presses the enter key while inside a texbox in a ItemsControl, I want to move focus to a textbox in the next item in ItemsControl, or create a new one if user was in the last item.

To be more clear:

SCENARIO 1

ItemsControl items:
[ textbox in item 1 ] <- user is here
[ textbox in item 2 ]
[ textbox in item 3 ]

After pressing Enter:

[ textbox in item 1 ]
[ textbox in item 2 ] <- user is here
[ textbox in item 3 ]

SCENARIO 2

ItemsControl items:

[ textbox in item 1 ]
[ textbox in item 2 ]
[ textbox in item 3 ] <- user is here

After pressing Enter:

[ textbox in item 1 ]
[ textbox in item 2 ]
[ textbox in item 3 ]
[ textbox in item 4 ] <- user is here

If it helps, here is the code for item data template:

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <TextBox Text="{Binding Path=PartName, FallbackValue='----',TargetNullValue='----', NotifyOnSourceUpdated=True}" KeyDown="TextBox_KeyDown"/>
            <Button Grid.Column="1" FontSize="10" x:Name="DeletePartButton" Click="DeletePartButton_Click" Height="22">Usuń</Button>
        </Grid>
    </DataTemplate>
</ItemsControl.ItemTemplate>

EDIT 2: I use ItemsControl because selecting feature is not wanted.

EDIT 3: I have found a partial solution. It works for moving a focus to a next element, but not a new one (which is the most important functionality here)

    private void PartNameTextBox_KeyDown(object sender, KeyEventArgs e)
    {
        var box = (TextBox)sender;

        if (e.Key == Key.Enter)
        {
            var part = (PiecePart)box.DataContext;
            int index = part.ParentPiece.Parts.IndexOf(part);
            if (index == part.ParentPiece.PartCount - 1)
            {
                part.ParentPiece.Parts.Add(new PiecePart(GetNewPartName(part.ParentPiece)));
                bool success = PartListBox.ApplyTemplate();
                // try to force wpf to build a visual tree for the new item success = false :(
            }
// throws out of bounds exception if a new item was added (and wasn't added to a visual tree)
            var el = ((UIElement)VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(PartListBox, 0),0),1),0),0),++index),0),0));
            el.Focus();
        }
    }
like image 622
14 revs, 3 users 99% Avatar asked Mar 13 '15 08:03

14 revs, 3 users 99%


4 Answers

On PreviewKeyDown of TextBox

private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
 if (e.Key == Key.Enter)
  {
   var txt= sender as TextBox;
   var selecteditem=FindParent<ListBoxItem>(txt);
   int index = ListBox.ItemContainerGenerator.IndexFromContainer(selecteditem);
   if(index<ListBox.Items.Count)
    {
    var afterItem=(ListBoxItem)ListBox.ItemContainerGenerator.ContainerFromIndex(index+1);
    TextBox tbFind = GetDescendantByType(afterItem, typeof (TextBox), "TextBox") as TextBox;
    if (tbFind != null)
    {
     FocusHelper.Focus(tbFind);
    }
   }
  }
}

public static Visual GetDescendantByType(Visual element, Type type, string name)
{
 if (element == null) return null;
 if (element.GetType() == type)
 {
  FrameworkElement fe = element as FrameworkElement;
  if (fe != null)
  {
     if (fe.Name == name)
     {
        return fe;
     }
  }
 }
Visual foundElement = null;
if (element is FrameworkElement)
  (element as FrameworkElement).ApplyTemplate();
for (int i = 0;
    i < VisualTreeHelper.GetChildrenCount(element);
    i++)
{
  Visual visual = VisualTreeHelper.GetChild(element, i) as Visual;
  foundElement = GetDescendantByType(visual, type, name);
  if (foundElement != null)
     break;
}
return foundElement;
}

public static T FindParent<T>(DependencyObject child) where T : DependencyObject
{
 //get parent item
DependencyObject parentObject = VisualTreeHelper.GetParent(child);

//we've reached the end of the tree
if (parentObject == null) return null;

//check if the parent matches the type we're looking for
T parent = parentObject as T;
if (parent != null)
    return parent;
else
    return FindParent<T>(parentObject);
}

One more helper to set the Focus on the TextBox:

public static class FocusHelper
{
public static void Focus(UIElement element)
{
 element.Dispatcher.BeginInvoke(DispatcherPriority.Input, new ThreadStart(delegate()
 {
    element.Focus();
 }));
}
}
like image 158
ar.gorgin Avatar answered Sep 25 '22 18:09

ar.gorgin


The correct way to move focus to the next element in WPF is to use the TraversalRequest class which Represents a request to move focus to another control and the FocusNavigationDirection Enumeration which Specifies the direction within a user interface (UI) in which a desired focus change request is attempted. This example is taken from the TraversalRequest class page on MSDN:

// Creating a FocusNavigationDirection object and setting it to a 
// local field that contains the direction selected.
FocusNavigationDirection focusDirection = _focusMoveValue;

// MoveFocus takes a TraveralReqest as its argument.
TraversalRequest request = new TraversalRequest(focusDirection);

// Gets the element with keyboard focus.
UIElement elementWithFocus = Keyboard.FocusedElement as UIElement;

// Change keyboard focus. 
if (elementWithFocus != null)
{
    elementWithFocus.MoveFocus(request);
} 
like image 42
Sheridan Avatar answered Sep 23 '22 18:09

Sheridan


Listbox.SelectedIndex = 0;

private void Listbox_OnKeyUp(object sender, KeyEventArgs e)
{
    if (e.Key== Key.Enter)
    {
         if(Listbox.Items.Count-1>Listbox.SelectedIndex)
             Listbox.SelectedIndex++;
         else 
             Listbox.SelectedIndex=0;
    }
}

This work when user focus on your listbox.

like image 36
Nguyen Kien Avatar answered Sep 25 '22 18:09

Nguyen Kien


I got it. To move a focus to a next element, I use Sheridan's solution. To move a focus to a new element, I use an "adding" flag and TextBox.Loaded event.

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid Background="White" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="PartNameTextbox" Text="{Binding Path=PartName, FallbackValue='----',TargetNullValue='----', NotifyOnSourceUpdated=True}" KeyDown="PartNameTextBox_KeyDown" 
         Loaded="PartNameTextbox_Loaded"/>
            <Button Grid.Column="1" FontSize="10" x:Name="DeletePartButton" Click="DeletePartButton_Click" Height="22">Usuń</Button>
        </Grid>
    </DataTemplate>
</ItemsControl.ItemTemplate>

code-behind:

bool partAdding = false;
private void PartNameTextBox_KeyDown(object sender, KeyEventArgs e)
{
    var box = (TextBox)sender;

    if (e.Key == Key.Enter)
    {
        var part = (PiecePart)box.DataContext;
        int index = part.ParentPiece.Parts.IndexOf(part);
        if (index == part.ParentPiece.PartCount - 1)
        {
            part.ParentPiece.Parts.Add(new PiecePart(GetNewPartName(part.ParentPiece)));
            UpdateCurrentLine(part.ParentPiece);
            partAdding = true;
        }
        // Gets the element with keyboard focus.
        UIElement elementWithFocus = Keyboard.FocusedElement as UIElement;

        // Creating a FocusNavigationDirection object and setting it to a 
        // local field that contains the direction selected.
        FocusNavigationDirection focusDirection = FocusNavigationDirection.Down;

        // MoveFocus takes a TraveralReqest as its argument.
        TraversalRequest request = new TraversalRequest(focusDirection);

        // Change keyboard focus. 
        if (elementWithFocus != null)
        {
            elementWithFocus.MoveFocus(request);
        }
    }
}

private void PartNameTextbox_Loaded(object sender, RoutedEventArgs e)
{
    if (partAdding)
    {
        var box = ((TextBox)sender);            
        var pp = ((PiecePart) box.DataContext);
        if (pp.IsLastPart)
        {
            box.Focus();
            box.SelectionStart = box.Text.Length;
            partAdding = false;
        }
    }
}
like image 32
14 revs, 3 users 99% Avatar answered Sep 21 '22 18:09

14 revs, 3 users 99%