TextBox にドロップダウンを設ける
Visual Studio の Forms のデザイナで TextBox の Text プロパティ編集するとき、ドロップダウンでエディタが広がりますよね。
この機能を WPF のテキストボックスで実装したくて色々調べてみましたが、これがなかなか見つからない。
標準テキストボックスにないのは当然として、サードパーティー製のテキストボックスにもこの機能は見当たりません。
そこでテンプレートを使って TextBox をそれっぽく改造してみました。右側のトグルボタンが押されている状態ならドロップダウンを表示します。
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="MainWindow" x:Name="Window" Title="MainWindow" Width="300" Height="200"> <Grid x:Name="LayoutRoot"> <TextBox Style="{DynamicResource TextBoxStyle1}" Width="180" AcceptsReturn="True" Height="24"> <TextBox.Resources> <Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TextBox}"> <Border> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="24" /> </Grid.ColumnDefinitions> <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true"> <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Microsoft_Windows_Themes:ListBoxChrome> <ToggleButton Grid.Column="1" Name="ToggleButton1" /> <Popup x:Name="Popup1" PlacementTarget="{Binding ElementName=Button1}" PopupAnimation="Fade" Height="Auto"> <TextBox x:Name="PopupText" Width="Auto" Height="Auto" AcceptsReturn="True" TextWrapping="Wrap" IsReadOnly="True" Text="{TemplateBinding Text}" > </TextBox> <Popup.Style> <Style TargetType="Popup"> <Setter Property="IsOpen" Value="False" /> <Style.Triggers> <DataTrigger Binding="{Binding IsChecked, ElementName=ToggleButton1 }" Value="True" > <Setter Property="IsOpen" Value="True" /> </DataTrigger> </Style.Triggers> </Style> </Popup.Style> </Popup> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </TextBox.Resources> </TextBox> </Grid> </Window>
ただしこれだとボタン押したままでは開きっぱなしになるので、キャンセルで閉じるようにするとか考えないといかんなぁ・・・