AutoCompleteBox Styling

2 posts, 0 answers
  1. Wiekus
    Wiekus avatar
    1 posts
    Member since:
    Oct 2014

    Posted 31 Jul 2015 Link to this post

    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>​

     

  2. Nasko
    Admin
    Nasko avatar
    588 posts

    Posted 04 Aug 2015 Link to this post

    Hello Wiekus,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top