Silverlight／WPFで使える逆引きTips集
――オートコンプリート機能編

（1） AutoCompleteBoxコントロール

8. ドロップダウン部分の最大高さを設定する

　ドロップダウン部分の高さは既定値ではInfinity（無限大）となっており、これを任意の高さに変更するにはMaxDropDownHeightプロパティ（整数）を設定します。 表示する候補数が多く、指定した高さの範囲内に収まらない場合には自動でスクロールバーが表示されます。

　下記は ドロップダウンの高さを45に設定する例です。

ドロップダウンの高さを設定する

XAMLの例

<sdk:AutoCompleteBox Height="28" Name="fruitsACB" Width="221" MaxDropDownHeight="45" />

VBの例

'ドロップダウンの高さを設定する
fruitsACB.MaxDropDownHeight = 45

C#の例

//ドロップダウンの高さを設定する
fruitsACB.MaxDropDownHeight = 45;

ポイント

　ドロップダウン部分の高さは、MaxDropDownHeight プロパティで設定する。

9. 外観を変更する

　AutoCompleteBoxコントロールは、テキストボックスとドロップダウンから成り立っており、それぞれについての外観を変更できます。外観の設定は、テキストボックス部分とドロップダウン部分のそれぞれに設定することができます。

　外観の設定に使用できるプロパティを下記に示します。

外観を設定するプロパティ

プロパティ	説明
Background	背景色
Foreground	前景色（フォントの色）
FontWeight	太字にする場合は"Bold"を指定、斜体は"Italic"を指定
FontSize	フォントサイズを指定
BorderBrush	枠線のブラシを指定

　ただし、ドロップダウン部分はAutoCompleteBoxの属性値として直接指定をすることができないため、リソースを作成して、AutoCompleteBoxコントロールのItemContainerStyleで指定します。

　ドロップダウン部分のリソースを作成するには、StyleのTargetTypeプロパティにListBoxItemを指定します。

　下記は、テキストボックス部分に青いグラデーションをかけたスタイルを、ドロップダウン部分には背景が濃い青で前景色に白のスタイルを設定する例です。リソースは親コンテナであるGridに作成しています。

外観を変更する

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>

ポイント

　テキストボックス部分の外観はAutoComleteBoxコントロールのプロパティに直接設定できる。

　ドロップダウン部分の外観はItemContainerStyleで設定する。
背景色 、前景色、太字/斜体、フォントサイズ、枠線の色などを変更することができる。