1

C#/XAML を使用して、Windows 8 UI / Metro UI アプリのテキスト ボックスにオートコンプリートを実装したいと考えています。

現時点では、ソフト/タッチ キーボードが表示されると、オートコンプリート ボックスが見えなくなります。ただし、テキスト ボックスにフォーカスがあると、Windows 8 はビュー全体を自動的に上にスクロールし、テキスト ボックスにフォーカスがあることを確認します。

実際には、私が望むのはビューをもう少し上にスクロールすることだけです (実際には、オートコンプリート ボックスの高さだけ)。

InputPane.GetForCurrentView() の Showing イベントをインターセプトできることに気付きました

私は、InputPaneVisibilityEventArgs.EnsuredFocusedElementInView を、Showing イベント内で true に設定することができます (そのため、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>

最も低い解像度でシミュレーターを起動する場合は、手でテキスト ボックスに「触れる」と、ソフト キーボードが表示されます。実際のアプリでは、ユーザーがテキストを入力すると、オート コンプリート リストに項目が表示されます。

要するに、ユーザーがオートコンプリート リスト全体を表示できるように、画面をもう少し上に移動するにはどうすればよいでしょうか?

実際のアプリでは、ユーザーはキーボードの「下」に表示されるオートコンプリート リストに気付かない可能性があるため、さらに悪化することに注意してください。

アドバイスをいただければ幸いです。どうもありがとうございました。

4

2 に答える 2

4

Windows ストア アプリ用の AutoCompleteBox を作成しました。nuget パッケージはhttps://nuget.org/packages/AutoCompleteBoxWinRTで入手できます。

于 2012-12-17T22:24:54.543 に答える
0

わかりました、キーボードの外観に基づいてアプリのスクロールを制御する方法が見つからないように見えるので、これに取り組む方法を次に示します。オートコンプリート テキスト ボックスの基礎となるユーザー コントロールを作成します。

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

次のステップは、ListBox にバインドされるデータを渡すためのプロパティを公開することです。ハード コアは、必要な再利用性に応じて、ListBoxItem テンプレートなどです。

于 2012-08-21T00:41:48.057 に答える