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

Styling AutocompleteBox

2 Answers 50 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
Top achievements
Rank 1
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"/>
                                    <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"/>
                                        <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

Sort by
0
jakub
Top achievements
Rank 1
answered on 26 Mar 2015, 07:21 AM
Image that didn't upload. 
0
Ves
Telerik team
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.

 
Tags
AutocompleteBox
Asked by
jakub
Top achievements
Rank 1
Answers by
jakub
Top achievements
Rank 1
Ves
Telerik team
Share this question
or