This is a migrated thread and some comments may be shown as answers.

Styling AutocompleteBox

2 Answers 85 Views

AutocompleteBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

jakub asked on 26 Mar 2015, 07:15 AM

I would like to change style for my AutocompleteBox so I open Blend and create new style based on copy of existing one:

<Style x:Key="RadAutoCompleteBoxStyle1" TargetType="telerikInput:RadAutoCompleteBox">

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>

<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>

<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>

<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>

<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>

<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>

<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>

<Setter Property="HeaderStyle">

<Setter.Value>

<Style TargetType="ContentControl">

<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>

<Setter Property="Padding" Value="0,0,0,8"/>

<Setter Property="HorizontalAlignment" Value="Left"/>

</Style>

</Setter.Value>

</Setter>

<Setter Property="ClearButtonVisibility" Value="Collapsed"/>

<Setter Property="ActionButtonVisibility" Value="Collapsed"/>

<Setter Property="Padding" Value="2"/>

<Setter Property="SuggestionItemTemplate">

<Setter.Value>

<DataTemplate>

<TextBlock Text="{Binding}"/>

</DataTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikInput:RadAutoCompleteBox">

<Grid Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver"/>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="ReadOnly">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledOrReadonlyBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledOrReadonlyBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledOrReadonlyContent">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="FocusedInvalid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="FocusedValid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">

<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.TargetProperty="Foreground" Storyboard.TargetName="ValidationMessage">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneSubtleBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ValidationImage">

<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsRunning" Storyboard.TargetName="BusyIndicator">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<System:Boolean>True</System:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Valid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ValidationMessage">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GreenBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ValidationImage">

<DiscreteObjectKeyFrame KeyTime="0" Value="/Telerik.Windows.Controls.Input;Component/TextBox/Images/valid.png"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ValidationBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource GreenBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Invalid">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ValidationMessage">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ValidationImage">

<DiscreteObjectKeyFrame KeyTime="0" Value="/Telerik.Windows.Controls.Input;Component/TextBox/Images/invalid.png"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ValidationBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<ContentControl x:Name="HeaderPresenter" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Style="{TemplateBinding HeaderStyle}"/>

<TextBlock x:Name="ValidationMessage" Grid.Column="1" FontSize="{StaticResource PhoneFontSizeNormal}" Padding="0,0,0,8" Text="{TemplateBinding ValidationMessage}" Visibility=

"{Binding ValidationMessage, Converter={StaticResource TextToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"

VerticalAlignment="Center"/>

<Image x:Name="ValidationImage" Grid.Column="2" Margin="8,0,0,0"/>

</Grid>

<Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>

<TextBlock x:Name="PART_Watermark" Foreground="Gray" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" Text="{TemplateBinding Watermark}"/>

<PhoneTextBox:TextBoxSecondaryButton x:Name="PART_ClearButton" ButtonType="Clear" Grid.Column="1" Style="{TemplateBinding ClearButtonStyle}"/>

<PhoneTextBox:TextBoxActionButton x:Name="PART_ActionButton" Grid.Column="2" Style="{TemplateBinding ActionButtonStyle}" Visibility="{TemplateBinding ActionButtonVisibility}"/>

</Grid>

</Border>

<Border x:Name="ValidationBorder" BorderThickness="0 0 0 3" Grid.Row="1"/>

<telerikPrimitives:RadBusyIndicator x:Name="BusyIndicator" AnimationStyle="AnimationStyle9" Content="{x:Null}" Margin="0,0,0,-10" Grid.Row="1" VerticalAlignment="Bottom"/>

<Border x:Name="DisabledOrReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Grid.Row="1" Visibility="Collapsed">

<TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>

</Border>

<telerikInput:AutoCompleteBoxWindow x:Name="PART_Popup" CloseAnimation="{x:Null}" PlacementTarget="{Binding ElementName=EnabledBorder}" Grid.Row="1" WindowSizeMode="AutoSize">

<telerikInput:AutoCompleteBoxWindow.OpenAnimation>

<telerik:RadResizeHeightAnimation Duration="0:0:0.3" FillBehavior="Stop" StartHeight="0">

<telerik:RadResizeHeightAnimation.Easing>

<CircleEase EasingMode="EaseOut"/>

</telerik:RadResizeHeightAnimation.Easing>

</telerik:RadResizeHeightAnimation>

</telerikInput:AutoCompleteBoxWindow.OpenAnimation>

<Border x:Name="PART_SuggestionsHolder" MinHeight="46">

<AutoCompleteTextBox:AutoCompleteItemsControl x:Name="PART_SuggestionsControl" ItemTemplate="{TemplateBinding SuggestionItemTemplate}" Style="{TemplateBinding PopupStyle}">

<AutoCompleteTextBox:AutoCompleteItemsControl.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel/>

</ItemsPanelTemplate>

</AutoCompleteTextBox:AutoCompleteItemsControl.ItemsPanel>

</AutoCompleteTextBox:AutoCompleteItemsControl>

</Border>

</telerikInput:AutoCompleteBoxWindow>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

However it's not working because there is few errors:

Following resources can't be resolved: RedBrush, GreenBrush, TextToVisibilityConverter,PhoneDisabledTextBoxTemplate.

Can you explain me why I can't make own style based on copy of existing one (I do that for many controls, also open controls etc. and I never had problem with that)?

If problem is not fixable and I can't make own style based on existing one, how to do this:

- (A) delete red border and set it blue
- (B) delete white background and set it yellow

2 Answers, 1 is accepted

answered on 30 Mar 2015, 04:06 PM

Hi Jakub,

The missing resources are defined elsewhere and they are not included directly in the control template. You can add them (or modify them) as follows:

<SolidColorBrush Color="#BF0000" x:Key="RedBrush"/>

<SolidColorBrush Color="#00813D" x:Key="GreenBrush"/>

<ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">

<ContentControl x:Name="ContentElement" BorderThickness="0" Padding="{TemplateBinding Padding}" Margin="{StaticResource PhoneTextBoxInnerMargin}"

HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />

</ControlTemplate>

And this is the code for TextToVisibilityConverter, it basically hides the element if the text is null or empty:

public class TextToVisibilityConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

if (value == null)

{

return Visibility.Collapsed;

}

if (value.ToString() == string.Empty)

{

return Visibility.Collapsed;

}

return Visibility.Visible;

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

throw new NotImplementedException();

}

Best regards,
Ves
Telerik

See What's Next in App Development. Register for TelerikNEXT.