8. ドロップダウン部分の最大高さを設定する
ドロップダウン部分の高さは既定値ではInfinity(無限大)となっており、これを任意の高さに変更するにはMaxDropDownHeightプロパティ
(整数)を設定します。 表示する候補数が多く、指定した高さの範囲内に収まらない場合には自動でスクロールバーが表示されます。
下記は ドロップダウンの高さを45に設定する例です。
<sdk:AutoCompleteBox Height="28" Name="fruitsACB" Width="221" MaxDropDownHeight="45" />
'ドロップダウンの高さを設定する fruitsACB.MaxDropDownHeight = 45
//ドロップダウンの高さを設定する fruitsACB.MaxDropDownHeight = 45;
ドロップダウン部分の高さは、MaxDropDownHeight プロパティで設定する。
9. 外観を変更する
AutoCompleteBoxコントロールは、テキストボックスとドロップダウンから成り立っており、それぞれについての外観を変更できます。外観の設定は、テキストボックス部分とドロップダウン部分のそれぞれに設定することができます。
外観の設定に使用できるプロパティを下記に示します。
プロパティ | 説明 |
Background | 背景色 |
Foreground | 前景色(フォントの色) |
FontWeight | 太字にする場合は"Bold"を指定、斜体は"Italic"を指定 |
FontSize | フォントサイズを指定 |
BorderBrush | 枠線のブラシを指定 |
ただし、ドロップダウン部分はAutoCompleteBoxの属性値として直接指定をすることができないため、リソースを作成して、AutoCompleteBoxコントロールのItemContainerStyle
で指定します。
ドロップダウン部分のリソースを作成するには、StyleのTargetTypeプロパティ
にListBoxItemを指定します。
下記は、テキストボックス部分に青いグラデーションをかけたスタイルを、ドロップダウン部分には背景が濃い青で前景色に白のスタイルを設定する例です。リソースは親コンテナであるGridに作成しています。
<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>
テキストボックス部分の外観はAutoComleteBoxコントロールのプロパティに直接設定できる。
ドロップダウン部分の外観はItemContainerStyleで設定する。
背景色 、前景色、太字/斜体、フォントサイズ、枠線の色などを変更することができる。