This question is locked. New answers and comments are not allowed.
enno0815de
Top achievements
Rank 1
enno0815de
asked on 19 Jun 2012, 08:36 AM
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
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
3 Answers, 1 is accepted
0
Accepted
Lancelot
Top achievements
Rank 1
answered on 19 Jun 2012, 09:25 PM
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
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
>
0
enno0815de
Top achievements
Rank 1
answered on 20 Jun 2012, 11:14 AM
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
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
0
Hello Enrico,
Deyan
the Telerik team
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.
Deyan
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>