Share via

  • Article

AutoCompleteBox Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This topic describes the styles and templates for the AutoCompleteBox control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

AutoCompleteBox Parts

The following table lists the named parts for the AutoCompleteBox control.

Part

Type

Description

SelectionAdapter

ISelectionAdapter

An ISelectionAdapter that allows the user to select from a list of possible matches.

Selector

Selector

A Selector that allows the user to select from a list of possible matches.

Text

TextBox

A TextBox where you can type the text.

Popup

Popup

A drop-down that lists the possible matches.
NoteNote:

You can use either a SelectionAdapter part or a Selector part while customizing the AutoCompleteBox template. The Selector part is preferred because it provides better support for Expression Blend.

AutoCompleteBox States

The following table lists the visual states for the AutoCompleteBox control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the AutoCompleteBox control.

Pressed

CommonStates

The AutoCompleteBox control is pressed.

Disabled

CommonStates

The AutoCompleteBox control is disabled.

Focused

FocusStates

The AutoCompleteBox control has focus.

Unfocused

FocusStates

The AutoCompleteBox control does not have focus.

PopupOpened

PopupStates

The drop-down is opened.

PopupClosed

PopupStates

The drop-down is closed.

Valid

ValidationStates

The AutoCompleteBox control is valid.

InvalidFocused

ValidationStates

The AutoCompleteBox control is not valid and has focus.

InvalidUnfocused

ValidationStates

The AutoCompleteBox control is not valid and does not have focus.

AutoCompleteBox Style Properties

The following table lists the Style properties of the AutoCompleteBox control. You must set the TargetType property when you create a Style.

Property Name

Target Type

Description

ItemContainerStyle

ListBox

The style applied to the list box that contains the possible matches.

TextBoxStyle

TextBox

The style applied to the TextBox where you can type the text.

Default Style and Template

The following shows the XML namespace mappings that you have to specify when you work with styles and templates.

<!-- XML Namespace mappings. -->
xmlns:input="clr-namespace:System.Windows.Controls.Input"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Important noteImportant Note:

The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries.
NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the AutoCompleteBox control.

<Style TargetType="input:AutoCompleteBox">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0" />
                <GradientStop Color="#FF8399A9" Offset="0.375" />
                <GradientStop Color="#FF718597" Offset="0.375" />
                <GradientStop Color="#FF617584" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="#FFFFFFFF" />
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="MinWidth" Value="45" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="input:AutoCompleteBox">
                <Grid Opacity="{TemplateBinding Opacity}">
                    <TextBox Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" IsTabStop="True" x:Name="Text" Style="{TemplateBinding TextBoxStyle}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}" Margin="0" />
                    <Border x:Name="ValidationErrorElement" Visibility="Collapsed" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource CommonValidationToolTipTemplate}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                <ToolTip.Triggers>
                                    <EventTrigger RoutedEvent="Canvas.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <system:Boolean>true</system:Boolean>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </ToolTip.Triggers>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                        <Grid Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12" Background="Transparent">
                            <Path Fill="#FFDC000C" Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" />
                            <Path Fill="#ffffff" Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" />
                        </Grid>
                    </Border>
                    <Popup x:Name="Popup">
                        <Grid Opacity="{TemplateBinding Opacity}">
                        <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="0" BorderThickness="0">
                            <Border.RenderTransform>
                                <TranslateTransform X="1" Y="1" />
                            </Border.RenderTransform>
                            <Border.Background>
                                <SolidColorBrush Color="#11000000" />
                            </Border.Background>
                                <Border HorizontalAlignment="Stretch" Opacity="1.0" Padding="0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="0">
                                        <Border.RenderTransform>
                                            <TransformGroup>
                                                <TranslateTransform X="-1" Y="-1" />
                                            </TransformGroup>
                                        </Border.RenderTransform>
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFDDDDDD" Offset="0" />
                                                <GradientStop Color="#AADDDDDD" Offset="1" />
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <ListBox x:Name="Selector" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemContainerStyle="{TemplateBinding ItemContainerStyle}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderThickness="0" ItemTemplate="{TemplateBinding ItemTemplate}" />
                                </Border>
                            </Border>
                        </Grid>
                    </Popup>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="PopupStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1" To="PopupOpened" />
                                <VisualTransition GeneratedDuration="0:0:0.2" To="PopupClosed" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="PopupOpened">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="1.0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PopupClosed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="0.0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid" />
                            <VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>True</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The default ControlTemplate for AutoCompleteBox references the ControlTemplate for CommonValidationTooltip. The following XAML shows the ControlTemplate for CommonValidationTooltip that you must specify when you work with the AutoCompleteBox control templates:

<ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
    <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="Translation" X="-25" />
        </Grid.RenderTransform>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup Name="OpenStates">
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition GeneratedDuration="0" />
                    <vsm:VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase Amplitude=".3" EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                        </Storyboard>
                    </vsm:VisualTransition>
                </vsm:VisualStateGroup.Transitions>
                <vsm:VisualState x:Name="Closed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Open">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0" Duration="0" />
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>

        <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5" />
        <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4" />
        <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3" />
        <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2" />

        <Border Background="#FFDC000C" CornerRadius="2">
            <TextBlock UseLayoutRounding="false" Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" />
        </Border>
    </Grid>
</ControlTemplate>