Auto-complete box under a text box in Windows 8 / Metro UI

Question

I want to implement auto-complete on a textbox in a Windows 8 UI / Metro UI app using C#/XAML.

At the moment, when the soft / touch keyboard shows, it obscures the auto-complete box. However, on the text box focus, Windows 8 automatically scrolls the entire view up and ensures the text box is in focus.

In reality, all I want is the view to scroll up a little more (in fact, by the height of the auto-complete box).

I realise I can intercept the Showing event of InputPane.GetForCurrentView()

I can set InputPaneVisibilityEventArgs.EnsuredFocusedElementInView to true inside the Showing event fine (so Windows won't try to do anything).... however, how can I invoke the same scrolling functionality that Windows 8 would do, but ask it to scroll a little more!?

Here's the code for the main page:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,200,0,0">
        <TextBlock HorizontalAlignment="Center" FontSize="60">App 1</TextBlock>
        <TextBlock HorizontalAlignment="Center">Enter text below</TextBlock>
        <TextBox HorizontalAlignment="Center" Margin="-10,0,10,0" Width="400" Height="30"/>
        <ListBox HorizontalAlignment="Center" Width="400">
            <ListBoxItem>Auto complete item 1</ListBoxItem>
            <ListBoxItem>Auto complete item 2</ListBoxItem>
            <ListBoxItem>Auto complete item 3</ListBoxItem>
            <ListBoxItem>Auto complete item 4</ListBoxItem>
            <ListBoxItem>Auto complete item 5</ListBoxItem>
        </ListBox>
    </StackPanel>
</Grid>

If you start up the simulator with the lowest resolution, use the hand to "touch" the textbox, this will bring up the soft keyboard. In the real app, the auto complete list will appear with items as the user enters text.

So in a nutshell, how can I move the screen up a bit more so the user can see the entire autocomplete list?

Bear in mind, in the real app, it'll be worse, as the user may not even notice the autocomplete list appearing "underneath" the keyboard.

I really would appreciate some advice, many thanks!

Answer 1

Ok, here is how I would tackle this since I cannot seem to find any way to control the scrolling of the app based on the appearance of the keyboard. I would create a user control that would form the basis for the auto-complete textbox.

<UserControl
x:Class="App6.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <TextBox x:Name="textBox" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"  GotFocus="textBox_GotFocus" LostFocus="textBox_LostFocus" />
    <ListBox x:Name="listBox" Height="150"  Margin="0,-150,0,0" VerticalAlignment="Top" Visibility="Collapsed"/>
</Grid>

This is an incredibly basic implementation, so you will have to tweak to meet your needs.

Then, I would add the following code-behind to the user control

public sealed partial class MyUserControl1 : UserControl
{
    // Rect occludedRect;
    bool hasFocus = false;

    public MyUserControl1()
    {
        this.InitializeComponent();
        InputPane.GetForCurrentView().Showing += MyUserControl1_Showing;
    }

    void MyUserControl1_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
    {
        if (hasFocus)
        {
            var occludedRect = args.OccludedRect;

            var element = textBox.TransformToVisual(null);
            var point = element.TransformPoint(new Point(0, 0));

            if (occludedRect.Top < point.Y + textBox.ActualHeight + listBox.ActualHeight)
            {
                listBox.Margin = new Thickness(0, -listBox.ActualHeight, 0, 0);         // Draw above     
            }
            else
            {
                listBox.Margin = new Thickness(0, textBox.ActualHeight, 0, 0); // draw below
            }
        }          
    }

    private void textBox_GotFocus(object sender, RoutedEventArgs e)
    {
        listBox.Visibility = Windows.UI.Xaml.Visibility.Visible;
        hasFocus = true;
    }

    private void textBox_LostFocus(object sender, RoutedEventArgs e)
    {
        listBox.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        hasFocus = false;
    }        
}

Next steps would be to expose properties to pass data to be bound to the ListBox. Hard core would be ListBoxItem templating and more, depending on how reusable you wanted it to be.

Answer 2

I have created an AutoCompleteBox for Windows Store apps, the nuget package is available at https://nuget.org/packages/AutoCompleteBoxWinRT