UWP - AutoSuggestBoxのカスタマイズ

Question

標準のAutoSuggestBoxコントロールで検証をサポートする必要があります。だから私の考えは、TextBoxをValidatingTextBox（James CroftのValidatingTextBoxの実装）に変更することでAutoSuggestBoxコントロールをカスタマイズすることでした。それも可能ですか？はいの場合 - どのように、もしそうでなければ - 代替手段は何ですか？

Answer 1

だから、私の考えでは、それはそれはAutoSuggestBoxのTextBoxを置き換える推奨されませんValidatingTextBox

へのTextBoxです変更することにより、AutoSuggestBoxコントロールをカスタマイズすることでした。そのため一部のデフォルト機能が失敗する可能性があります。代わりに、いくつかの機能を追加することができます。そして、WinRTXamlToolkitは、TextBoxの制御に対して大きなバリデーションの拡張機能を提供します。

次の手順でAutoSuggestBoxに、この拡張機能を適用することができます。

1. リファレンスWinRTXamlToolkitをプロジェクトに。以下のようなあなたのXAMLページにWinRTXamlToolkit.Controls.Extensionsの参照を追加します。

   <Page 
   ... 
   xmlns:extensions="using:WinRTXamlToolkit.Controls.Extensions" 
   ...> 
   

2. のVisual Studioを使用してAutoSuggestBoxコントロールのスタイルテンプレートのコピーを作成します。または、hereからテンプレートをコピーし、AutoSuggestBoxコントロールに適用することもできます。

3. テンプレート内のTextBoxコントロールを検索します。以下のようにそれにextensions:FieldValidationExtensions.Format="the format you need"を追加します。

   <TextBox extensions:FieldValidationExtensions.Format="Numeric" 
        x:Name="TextBox" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/> 
   

4. を使用すると、検証エラーメッセージを表示したい場合。あなたはGridからStackPanelこのTextBoxのパネルを変更して、以下のようなTextBlockを追加することができます。

   <StackPanel> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="Orientation"> 
          <VisualState x:Name="Landscape"/> 
          <VisualState x:Name="Portrait"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <TextBox extensions:FieldValidationExtensions.Format="Numeric" 
            x:Name="TextBox" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/> 
         <TextBlock Text="{Binding (extensions:FieldValidationExtensions.ValidationMessage), ElementName=TextBox}" 
            Visibility="{Binding (extensions:FieldValidationExtensions.ValidationMessageVisibility), ElementName=TextBox}" /> 
        ... 
   </StackPanel> 
   

今、あなたが使用するための基本的なvalidatingAutoSuggestBoxの準備ができて取得します。