AutoCompleteBox コントロールは、テキストボックスとドロップダウンから成り立っており、それぞれについての外観を変更することが可能です。
上記の外観を設定した XAMLを下記に示します。
XAMLの例
<Grid x:Name="LayoutRoot"> <Grid.Resources> <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> <Setter Property="Background" Value="DarkBlue" /> <Setter Property="Foreground" Value="White" /> <Setter Property="Margin" Value="1" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="FontSize" Value="14" /> <Setter Property="BorderBrush" Value="DarkGray" /> </Style> </Grid.Resources> <StackPanel Height="42" HorizontalAlignment="Left" Margin="10,10,0,0" Name="StackPanel1" Orientation="Horizontal" VerticalAlignment="Top" Width="477"> <sdk:Label Content="フルーツ:" FontSize="16" Height="28" Name="Label2" Width="89" /> <sdk:AutoCompleteBox Height="28" Name="fruitsACB" Width="221" ItemContainerStyle="{StaticResource ListBoxItemStyle}"> <sdk:AutoCompleteBox.Background> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"> <GradientStop Color="#FFCAD6EC" Offset="1" /> <GradientStop Color="White" Offset="0" /> </LinearGradientBrush> </sdk:AutoCompleteBox.Background> <sdk:AutoCompleteBox.Foreground>DarkBlue</sdk:AutoCompleteBox.Foreground> <sdk:AutoCompleteBox.BorderBrush>Blue</sdk:AutoCompleteBox.BorderBrush> </sdk:AutoCompleteBox> </StackPanel> </Grid>
テキストボックス、ドロップダウンには下記のプロパティを指定することができます。
プロパティ | 説明 |
---|---|
Background | 背景色 |
Foreground | 前景色(フォントの色) |
FontWeigh | 太字にする場合は”Bold”を指定、斜体は”Italic”を指定 |
FontSize | フォントサイズを指定 |
BorderBrush | 枠線のブラシを指定 |
ただし、ドロップダウン部分は AutoCompleteBox の属性値として直接指定をすることができないため、親コンテナであるGridコントロールにリソースを作成し、AutoCompleteBox コントロールの ItemContainerStyle で指定しています。
ドロップダウン部分のリソースを作成するには、Style の TargetType プロパティに ListBoxItem を指定します。
また、テキストボックス部分もリソースを利用することができます。この場合は TargetType プロパティに TextBoxを指定したリソースを作成しておき、AutoCompleteBox コントロールの TextBoxStyle プロパティで指定します。