外観を変更する

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>

テキストボックス、ドロップダウンには下記のプロパティを指定することができます。

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

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

また、テキストボックス部分もリソースを利用することができます。この場合は TargetType プロパティに TextBoxを指定したリソースを作成しておき、AutoCompleteBox コントロールの TextBoxStyle プロパティで指定します。