WPF Toolkit AutoCompleteBox - How to set different background, foreground on dropdown than on textbox

1
votes

I'm using the AutoCompleteBox control from the WPF Toolkit.

How do I set different background and foreground on item dropdown than on the textbox?

The XAML below applies a different style to the item textblock in the dropdown, but leaves the background behind the dropdown items with the background colour of the autocomplete textbox. Basically I want the autocomplete textbox to have a dark background and the dropdown to have a white background.

    <Style x:Key="SearchBox2" TargetType="wpftoolkit:AutoCompleteBox" >
        <Setter Property="Background" Value="#3B4044"></Setter>
        <Setter Property="Foreground" Value="#FFFFFF"></Setter>
        <Setter Property="BorderBrush" Value="#000000"></Setter>
        <Setter Property="BorderThickness" Value="1"></Setter>
        <Setter Property="Height" Value="25"></Setter>
    </Style>

       <wpftoolkit:AutoCompleteBox 
            x:Name="SearchBox"
            Grid.Column="0" Grid.Row="0"
            ValueMemberPath="SearchDesc"
            FilterMode="Contains"
            IsTextCompletionEnabled="True" 
            Text="Search for an app..."
            Style="{StaticResource SearchBox2}" >
            <wpftoolkit:AutoCompleteBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding LongDesc}" Foreground="#16509A" Background="White" />
                    </StackPanel>
                </DataTemplate>
            </wpftoolkit:AutoCompleteBox.ItemTemplate>
        </wpftoolkit:AutoCompleteBox>
1
wpfwpftoolkit

1 Answers

2
votes

Instead of using ItemTemplate, make use of ItemContainerStyle. Please find the code fix below and let me know whether or not this works for you.

Please try this code:

<wpftoolkit:AutoCompleteBox 
    x:Name="SearchBox"
    Grid.Column="0" Grid.Row="0"            
    FilterMode="Contains"
    IsTextCompletionEnabled="True" 
    Text="Search for an app...">
    <wpftoolkit:AutoCompleteBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="#16509A"/>
        </Style>
    </wpftoolkit:AutoCompleteBox.ItemContainerStyle>           
</wpftoolkit:AutoCompleteBox>