Style for AutoCompleteBox

[enno0815de]

Hi,

how can i set the style property on the control? what must I do to create a static template for the autocompletebox? I had tried to create a resource for this, but it doesn't work...

Especially for bypassing the switch between light and dark theme. I have an app that uses a template that does not switch any colors on setting the theme, so if i switch to light theme the control switches to a transparent layout. In this case the control isn't readable for a user!

any suggestions? thanks any advice... :)

regards enno

[Lancelot]

Hi Enno,

I've gone ahead and retrieved the entire control template for RadAutoCompleteBox for you.

You can just copy and paste this code directly into a new page in your app. Delete the root grid and paste this code into a the blank page. I've placed a RadAutoCompleteBox in the page bound to the template

You'll be able to edit the template to suit your dark theme needs and then apply it globally throughout the app by placing it in your App.xaml file.

Good Luck on your app!
Lancelot

<phone:PhoneApplicationPage.Resources>
        <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">
            <ContentControl x:Name="ContentElement" BorderThickness="0" Padding="{TemplateBinding Padding}" Margin="{StaticResource PhoneTextBoxInnerMargin}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
        </ControlTemplate>
        <ControlTemplate x:Key="RadAutoCompleteBoxControlTemplate1" TargetType="telerik:RadAutoCompleteBox">
            <Grid Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver" />
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="ReadOnly">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyContent" Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="FocusedInvalid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="FocusedValid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GreenBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ValidationStates">
                        <VisualState x:Name="NotValidated" />
                        <VisualState x:Name="Validating">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationMessage" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneSubtleBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationImage" Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BusyIndicator" Storyboard.TargetProperty="IsRunning">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <System:Boolean>True</System:Boolean>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Valid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationMessage" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GreenBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationImage" Storyboard.TargetProperty="Source">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Telerik.Windows.Controls.Input;Component/TextBox/Images/valid.png" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationBorder" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GreenBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Invalid">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationMessage" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationImage" Storyboard.TargetProperty="Source">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Telerik.Windows.Controls.Input;Component/TextBox/Images/invalid.png" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationBorder" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <ContentControl x:Name="HeaderPresenter" CacheMode="BitmapCache" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding HeaderStyle}" />
                    <TextBlock x:Name="ValidationMessage" Grid.Column="1" VerticalAlignment="Center" Text="{TemplateBinding ValidationMessage}" FontSize="{StaticResource PhoneFontSizeNormal}" Padding="0,0,0,8" />
                    <Image x:Name="ValidationImage" Margin="8,0,0,0" Source="/Telerik.Windows.Controls.Input;Component/TextBox/Images/validating.png" Grid.Column="2" />
                </Grid>
                <Border Grid.Row="1" x:Name="EnabledBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ContentControl x:Name="ContentElement" BorderThickness="0" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" />
                        <TextBlock x:Name="PART_Watermark" Text="{TemplateBinding Watermark}" Foreground="Gray" Padding="{TemplateBinding Padding}" Margin="{StaticResource PhoneTextBoxInnerMargin}" /><telerikPrimitives:RadImageButton Margin="3" MinWidth="36" MinHeight="36" x:Name="PART_ClearButton" Style="{TemplateBinding ClearButtonStyle}" ButtonType="Clear" Grid.Column="1" /><Telerik_Windows_Controls_PhoneTextBox:TextBoxActionButton Margin="3" MinWidth="36" MinHeight="36" x:Name="PART_ActionButton" Grid.Column="2" Style="{TemplateBinding ActionButtonStyle}" Visibility="{TemplateBinding ActionButtonVisibility}" />
                    </Grid>
                </Border>
                <Border Grid.Row="1" x:Name="ValidationBorder" BorderThickness="0 0 0 3" />
                <telerikPrimitives:RadBusyIndicator x:Name="BusyIndicator" Grid.Row="1" Margin="0,0,0,-10" VerticalAlignment="Bottom" Content="{x:Null}" AnimationStyle="AnimationStyle9" />
                <Border Grid.Row="1" x:Name="DisabledOrReadonlyBorder" Visibility="Collapsed" Background="Transparent" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <TextBox x:Name="DisabledOrReadonlyContent" Text="{TemplateBinding Text}" Foreground="{StaticResource PhoneDisabledBrush}" Background="Transparent" SelectionBackground="{TemplateBinding SelectionBackground}" SelectionForeground="{TemplateBinding SelectionForeground}" TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}" IsReadOnly="True" Template="{StaticResource PhoneDisabledTextBoxTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" />
                </Border>
                <telerik:AutoCompleteBoxWindow Grid.Row="1" CloseAnimation="{x:Null}" x:Name="PART_Popup" PlacementTarget="{Binding ElementName=EnabledBorder}" WindowSizeMode="AutoSize">
                    <telerik:AutoCompleteBoxWindow.OpenAnimation>
                        <telerik1:RadResizeHeightAnimation StartHeight="0" Duration="0:0:0.3" FillBehavior="Stop">
                            <telerik1:RadResizeHeightAnimation.Easing>
                                <CircleEase EasingMode="EaseOut" />
                            </telerik1:RadResizeHeightAnimation.Easing>
                        </telerik1:RadResizeHeightAnimation>
                    </telerik:AutoCompleteBoxWindow.OpenAnimation>
                    <Border MaxHeight="{TemplateBinding MaxPopupHeight}" MinHeight="46" x:Name="PART_SuggestionsHolder" Background="{StaticResource PhoneContrastBackgroundBrush}">
                        <Telerik_Windows_Controls_AutoCompleteTextBox:AutoCompleteItemsControl ItemTemplate="{TemplateBinding SuggestionItemTemplate}" Foreground="{StaticResource PhoneContrastForegroundBrush}" x:Name="PART_SuggestionsControl">
                            <Telerik_Windows_Controls_AutoCompleteTextBox:AutoCompleteItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel />
                                </ItemsPanelTemplate>
                            </Telerik_Windows_Controls_AutoCompleteTextBox:AutoCompleteItemsControl.ItemsPanel>
                        </Telerik_Windows_Controls_AutoCompleteTextBox:AutoCompleteItemsControl>
                    </Border>
                </telerik:AutoCompleteBoxWindow>
            </Grid>
        </ControlTemplate>
        <DataTemplate x:Key="SuggestionDataTemplate1"><TextBlock Text="{Binding}" />
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <telerik:RadAutoCompleteBox x:Name="radAutoCompleteBox"
                                        Height="80"
                                        VerticalAlignment="Top"
                                        Width="456"
                                        Template="{StaticResource RadAutoCompleteBoxControlTemplate1}"
                                        SuggestionItemTemplate="{StaticResource SuggestionDataTemplate1}"/>
        </Grid>
    </Grid>

[enno0815de]

Hi Lancelot ,

Thanks for the code snippet, now i can create a template for the control. :)

@TelerikTeam: can you add this as a new entry for the control to the help, like as it is on other controls "Style and Template"?

Tanks a lot

regards Enno

[Deyan]

Hello Enrico,

Good that you've managed to solve the case.

We will consider the suggestion to enrich the help contents about styling and templates.

Do not hesitate to get back to us anytime you have further questions or need assistance.

Kind regards,
Deyan
the Telerik team