Styling AutocompleteBox

3 posts, 0 answers
  1. jakub
    jakub avatar
    4 posts
    Member since:
    May 2014

    Posted 26 Mar 2015 Link to this post

    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. jakub
    jakub avatar
    4 posts
    Member since:
    May 2014

    Posted 26 Mar 2015 Link to this post

    Image that didn't upload. 
  3. DevCraft banner
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 30 Mar 2015 Link to this post

    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.

     
Back to Top