I am trying to get my AutoCompleteBox to have any other colour than the yellow when mouseover or selecting a dropdown option, as seen in the attached image.
I'm able to change the textbox colours it self but nothing else.
I need to get this done as soon as possible.
Please help or can I get an exmaple, any help please and thank you.
My code sofar:
<Style x:Key="RadAutoCompleteBoxItemStyle" TargetType="controls:RadAutoCompleteBoxItem">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="3 3 0 0"/>
<Setter Property="Padding" Value="2 0"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:RadAutoCompleteBoxItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Opacity" To="0.6"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Pink" Background="Green">
<StackPanel Orientation="Horizontal">
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<telerik:RadButton x:Name="RemoveItemButton"
Margin="4 0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
CornerRadius="0"
CommandParameter="{Binding}"
Foreground="{TemplateBinding Foreground}"
Cursor="Arrow"
IsTabStop="False"
Command="{x:Static telerik:RadAutoCompleteBoxCommands.RemoveItem}"
Width="13"
Height="13"
Focusable="False">
<Path Data="M0,0 L5,5 M5,0 L0,5" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="Black"/>
</telerik:RadButton>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadAutoCompleteTextBoxStyle" TargetType="telerik:RadWatermarkTextBox">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="3 3 0 0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadWatermarkTextBox">
<Grid x:Name="RootElement" Cursor="IBeam">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.150" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.150">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_ContentHost"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualState x:Name="WatermarkHidden">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="WatermarkVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="WatermarkVisible"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Opacity="1"/>
<Border x:Name="MouseOverVisual"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
IsHitTestVisible="False"
Opacity="0"
Visibility="Collapsed"/>
<Border x:Name="DisabledVisualElement"
BorderBrush="Black"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
IsHitTestVisible="False"
Opacity="0"/>
<ScrollViewer
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
BorderThickness="0"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
IsTabStop="False"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
x:Name="PART_ContentHost"/>
<Border x:Name="FocusVisual"
Opacity="0"
IsHitTestVisible="False"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
BorderBrush="Black"
CornerRadius = "2"
BorderThickness="1" >
<Border BorderBrush="Black" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}"/>
</Border>
<ContentControl x:Name="WatermarkVisualElement"
IsTabStop="False"
FontStyle="Italic"
Opacity="0.5"
Content="{TemplateBinding WatermarkContent}"
ContentTemplate="{TemplateBinding WatermarkTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
BorderThickness="{TemplateBinding BorderThickness}"
IsHitTestVisible="False"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="RadAutoCompleteBoxTemplate" TargetType="controls:RadAutoCompleteBox">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="0.6"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="2"/>
<Border x:Name="MouseOverVisual"
BorderBrush="Black"
CornerRadius="2"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0"/>
<Border x:Name="FocusVisual"
Opacity="0"
IsHitTestVisible="False"
CornerRadius="2"
Background="Green"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="Black">
<Border BorderBrush="Black" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}"/>
</Border>
<Border x:Name="DisabledVisualElement"
BorderBrush="Black"
BorderThickness="{TemplateBinding BorderThickness}"
Background="Green"
CornerRadius="2"
IsHitTestVisible="False"
Opacity="0"/>
<ScrollViewer x:Name="PART_ScrollViewer"
Height="{TemplateBinding Height}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
VerticalContentAlignment="Center"
BorderThickness="0"
Background="Transparent"
Padding="0"
IsTabStop="False"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
Margin="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<controls:AutoCompleteBoxesItemsControl
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
BoxesItemTemplate="{TemplateBinding BoxesItemTemplate}"
x:Name="PART_Boxes"
IsTabStop="False"
Foreground="{TemplateBinding Foreground}"
Margin="{TemplateBinding Padding}">
<controls:AutoCompleteBoxesItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controls:AutoCompleteBoxesWrapPanel Width="{Binding ActualWidth, ElementName=WatermarkTextBox}"/>
</ItemsPanelTemplate>
</controls:AutoCompleteBoxesItemsControl.ItemsPanel>
</controls:AutoCompleteBoxesItemsControl>
</ScrollViewer>
<Popup x:Name="PART_Popup">
<Grid x:Name="PopupRoot">
<telerik:RadListBox x:Name="PART_ListBox"
ItemsSource="{TemplateBinding FilteredItems}"
ItemTemplate="{TemplateBinding DropDownItemTemplate}"
MinWidth="{TemplateBinding MinDropDownWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
<Style x:Key="RadAutoCompleteBoxStyle" TargetType="controls:RadAutoCompleteBox">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TextBoxStyle" Value="{StaticResource RadAutoCompleteTextBoxStyle}"/>
<Setter Property="Template" Value="{StaticResource RadAutoCompleteBoxTemplate}"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="0 0 3 3"/>
<Setter Property="Cursor" Value="IBeam"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTooltipTemplate}"/>
</Style>
<Style TargetType="controls:RadAutoCompleteBoxItem" BasedOn="{StaticResource RadAutoCompleteBoxItemStyle}"/>
<Style TargetType="controls:RadAutoCompleteBox" BasedOn="{StaticResource RadAutoCompleteBoxStyle}"/>
</Window.Resources>
<Grid>
<controls:RadAutoCompleteBox x:Name="txtTest" DisplayMemberPath="Companies" SelectionMode="Single" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="24.666,37.999,0,0" Width="214.667" >
</controls:RadAutoCompleteBox>
</Grid>​
1 Answer, 1 is accepted
In order to achieve the desired appearance of RadAutoCompleteBox you need to modify the default Style of RadListBox - the DropDown portion part of the control consist of Popup with RadListBox inside it. By changing the Background of the Borders inside the Template of RadListBox named x:Name="MouseOverVisual" and x:Name="SelectedVisual" the desired appearance will be achieved.
We have created a sample project that demonstrate the described above approach and you could run and evaluate it - please, notice Implicit Styles were used.
Hopes this helps.
Regards,
Nasko
Telerik