AutoCompleteBox Styles and Templates
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.
The following table lists the named parts for the AutoCompleteBox control.
|
Part |
Type |
Description |
|---|---|---|
|
SelectionAdapter |
An ISelectionAdapter that allows the user to select from a list of possible matches. |
|
|
Selector |
A Selector that allows the user to select from a list of possible matches. |
|
|
Text |
A TextBox where you can type the text. |
|
|
Popup |
A drop-down that lists the possible matches. |
Note:
|
|---|
|
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. |
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. |
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 |
|---|---|---|
|
The style applied to the list box that contains the possible matches. |
||
|
The style applied to the TextBox where you can type the text. |
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 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. |
| Note: |
|---|
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>
