在Windows 8下一个文本框自动完成框/ Metro UI的(Auto-complete box

2019-06-27 01:59发布

我想实现自动完成上一个文本框,在使用C#/ XAML在Windows 8 UI / Metro UI的应用程序。

目前,在软/触摸键盘所示,它掩盖了自动完成框。 然而,在文本框的焦点,Windows 8的自动滚动整个视图并确保文本框是焦点。

在现实中,我要的是(实际上由自动完成框的高度)向上滚动,多一点的看法。

我知道我可以拦截InputPane.GetForCurrentView的显示事件()

我可以设置InputPaneVisibilityEventArgs.EnsuredFocusedElementInView到显示事件精细内真(所以Windows不会尝试做任何事情)......但是,我怎么能调用相同的滚动功能的Windows 8会做,但要求它滚动再多一点!?

下面是主要页面的代码:

    <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>

如果你开始了分辨率最低的模拟器,用手去“触摸”的文本框,这将弹出软键盘。 在真正的应用程序,自动完成列表将在用户输入文本与项目出现。

所以,简单地说,我怎么能移动屏幕了一点,使用户可以看到整个自动完成列表?

请记住,在真正的应用程序,它会更糟,因为用户可能没有注意到出现“下面”的键盘的自动完成列表。

我真的很希望得到一些建议,非常感谢!

Answer 1:

好吧,这里是我会怎样解决这个,因为我似乎无法找到任何办法来控制应用程序的基础上,键盘的外观滚动。 我想创建一个用户控件,将形成自动完成的文本框的基础。

<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>

这是一个令人难以置信的基本实现,所以你必须调整,以满足您的需求。

然后,我将在下面的代码隐藏添加到用户控件

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;
    }        
}

接下来的步骤是,以暴露属性传递给被绑定到列表框数据。 硬核是一个ListBoxItem模板多,这取决于你如何可重用希望它是。



Answer 2:

我创建的Windows Store应用程序的AutoCompleteBox的NuGet包可在https://nuget.org/packages/AutoCompleteBoxWinRT



文章来源: Auto-complete box under a text box in Windows 8 / Metro UI