Janene Pappas-McCrillis
Wireless Seismic
9 Answers, 1 is accepted
In order to change the default behavior of a mouseover, you need to access the following property:
ControlSubItem_Background_MouseOver - a brush that represents the background of the RadTreeViewItem, when the mouse is over it.
You can quickly and easily do this by editing a copy of the style and just changing the color assigned to that property. If you go to this documentation, you'll find a tutorial that takes you step by step through the process. Look under the title "Modifying the Default Style"
It should only take a couple minutes make the changes. However, if you find yourself getting hung up on something, let me know and we'll go through it together (I would need the XAML from the file you want the changes to take place in).
Good Luck,
Lancelot
I do not have Expression Blend, just VS 2010. How do I get the default style?
Janene
Can you provide me with your xaml of the control you are using? Use the little Code block button above, next to the spell checker to paste in the xaml.
Sorry, here's the XAML for the tree:
<!-- resources -->
<
Style
x:Key
=
"LayerItemStyle"
TargetType
=
"telerik:RadTreeViewItem"
>
<
Setter
Property
=
"Margin"
Value
=
"0"
/>
<!-- <Setter Property="Height" Value="18" /> -->
<
Setter
Property
=
"FontWeight"
Value
=
"Normal"
/>
<
Setter
Property
=
"Header"
Value
=
"{Binding DisplayName}"
/>
<
Setter
Property
=
"CheckState"
Value
=
"{Binding Path=IsChecked, Mode=TwoWay, Converter={StaticResource CheckStateConverter}}"
/>
</
Style
>
<
Style
x:Key
=
"GroupItemStyle"
TargetType
=
"telerik:RadTreeViewItem"
>
<
Setter
Property
=
"Margin"
Value
=
"0"
/>
<
Setter
Property
=
"FontWeight"
Value
=
"Bold"
/>
<
Setter
Property
=
"Header"
Value
=
"{Binding DisplayName}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"#000000"
/>
<
Setter
Property
=
"IsExpanded"
Value
=
"{Binding Path=IsExpanded, Mode=TwoWay}"
/>
<
Setter
Property
=
"CheckState"
Value
=
"{Binding Path=IsChecked, Mode=TwoWay, Converter={StaticResource CheckStateConverter}}"
/>
</
Style
>
<
LayerManager:LayerNodeStyleSelector
x:Key
=
"StyleSelector"
GroupItemStyle
=
"{StaticResource GroupItemStyle}"
LayerItemStyle
=
"{StaticResource LayerItemStyle}"
/>
<
DataTemplate
x:Key
=
"MapLayerTemplate"
>
<
TextBlock
Text
=
"{Binding DisplayName}"
/>
</
DataTemplate
>
<
HierarchicalDataTemplate
x:Key
=
"MapLayerGroupTemplate"
ItemsSource
=
"{Binding Children}"
>
<
TextBlock
VerticalAlignment
=
"Center"
FontWeight
=
"Bold"
Text
=
"{Binding DisplayName}"
/>
</
HierarchicalDataTemplate
>
<
LayerManager:LayerNodeTemplateSelector
x:Key
=
"layerDataTemplateSelector"
LayerGroupTemplate
=
"{StaticResource MapLayerGroupTemplate}"
LayerTemplate
=
"{StaticResource MapLayerTemplate}"
/>
<!-- tree -->
<
telerik:RadTreeView
x:Name
=
"RadTree"
Grid.Row
=
"1"
BorderThickness
=
"0"
IsOptionElementsEnabled
=
"True"
IsTriStateMode
=
"True"
ItemContainerStyleSelector
=
"{StaticResource StyleSelector}"
ItemsOptionListType
=
"CheckList"
ItemsSource
=
"{Binding LayerManagerMapLayers}"
ItemTemplateSelector
=
"{StaticResource layerDataTemplateSelector}"
PreviewSelectionChanged
=
"radTreeView_PreviewSelectionChanged"
SelectedItem="{Binding SelectedItem,
Mode
=
TwoWay
,
UpdateSourceTrigger
=
PropertyChanged
}" >
Thank you!
Janene
Janene
Thank you for your code, I'll get started on it right now. I highly recommend you get Expression Blend. It is an extremely powerful tool when coupled with telerik's controls. Thats why you see the styling examples done with Blend. Here is the link to get the trial, you have full access in the trial.
I'll let you know when I am done with your styling.
Lancelot
Okay I'm back,
I had a little trouble using your XAML due to the other dependencies, so I started from scratch where you could get a better look at the template. The code block below contains a full resource of all the parts of a RadTreeViewItem. You'll find the part where I altered simply by doing a quicker search for AliceBlue. The principle is the same for all the other parts. With this template you have complete control over it's appearance. You could go in there and shorten the margins of the parts you'd like. Instead of reading through the whole style to see what is what, use this documentation to know where to look.
I added a small RadTreeView in the root grid to demonstrate how you can apply a template to a TreeViewItem. I hope this helps you achieve what you're looking for!
Good luck Janene,
Lancelot
<
Window.Resources
>
<
ControlTemplate
x:Key
=
"RadTreeViewItemControlTemplate1"
TargetType
=
"{x:Type telerik:RadTreeViewItem}"
>
<
Grid
x:Name
=
"RootElement"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"EditStates"
>
<
VisualState
x:Name
=
"Display"
/>
<
VisualState
x:Name
=
"Edit"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"EditHeaderElement"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"Header"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Collapsed</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Disabled"
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0"
To
=
"0.35"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"Header"
/>
<
DoubleAnimation
Duration
=
"0"
To
=
"0.35"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"Image"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"MouseOver"
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0:0:0.1"
To
=
"1"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
/>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"SelectionStates"
>
<
VisualState
x:Name
=
"Unselected"
/>
<
VisualState
x:Name
=
"Selected"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"SelectionVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"SelectedUnfocused"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"SelectionUnfocusedVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"LoadingOnDemandStates"
>
<
VisualState
x:Name
=
"LoadingOnDemand"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"LoadingVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"Expander"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Collapsed</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Duration
=
"0:0:1"
From
=
"0"
RepeatBehavior
=
"Forever"
To
=
"359"
Storyboard.TargetProperty
=
"Angle"
Storyboard.TargetName
=
"LoadingVisualAngleTransform"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"LoadingOnDemandReverse"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"FocusStates"
>
<
VisualState
x:Name
=
"Focused"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"FocusVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Unfocused"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"ExpandStates"
>
<
VisualState
x:Name
=
"Expanded"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"ItemsHost"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Collapsed"
/>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Grid
x:Name
=
"HeaderRow"
Background
=
"Transparent"
MinHeight
=
"{TemplateBinding MinHeight}"
SnapsToDevicePixels
=
"True"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
Border
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
Grid.ColumnSpan
=
"6"
Grid.Column
=
"2"
CornerRadius
=
"2"
/>
<
Border
x:Name
=
"MouseOverVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"1"
Grid.ColumnSpan
=
"6"
Grid.Column
=
"2"
CornerRadius
=
"1"
Opacity
=
"0"
>
<
Border
BorderBrush
=
"White"
BorderThickness
=
"1"
CornerRadius
=
"0"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"PowderBlue"
Offset
=
"1"
/>
<
GradientStop
Color
=
"AliceBlue"
Offset
=
"0"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>
<
Border
x:Name
=
"SelectionUnfocusedVisual"
BorderBrush
=
"#FFDBDBDB"
BorderThickness
=
"1"
Grid.ColumnSpan
=
"6"
Grid.Column
=
"2"
CornerRadius
=
"1"
Visibility
=
"Collapsed"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"1"
CornerRadius
=
"0"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0,1"
>
<
GradientStop
Color
=
"#FFF8F6F9"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFF0F0F0"
Offset
=
"1"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>
<
Border
x:Name
=
"SelectionVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"1"
Grid.ColumnSpan
=
"6"
Grid.Column
=
"2"
CornerRadius
=
"1"
Visibility
=
"Collapsed"
>
<
Border
BorderBrush
=
"White"
BorderThickness
=
"1"
CornerRadius
=
"0"
>
<
Border.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFFCE79F"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFFDD3A8"
/>
</
LinearGradientBrush
>
</
Border.Background
>
</
Border
>
</
Border
>
<
StackPanel
x:Name
=
"IndentContainer"
Orientation
=
"Horizontal"
>
<
Rectangle
x:Name
=
"IndentFirstVerticalLine"
Stroke
=
"#FFCCCCCC"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Top"
Width
=
"1"
/>
</
StackPanel
>
<
Grid
x:Name
=
"ListRootContainer"
Grid.Column
=
"1"
HorizontalAlignment
=
"Center"
MinWidth
=
"20"
>
<
Rectangle
x:Name
=
"HorizontalLine"
HorizontalAlignment
=
"Right"
Height
=
"1"
Stroke
=
"#FFCCCCCC"
VerticalAlignment
=
"Center"
/>
<
Rectangle
x:Name
=
"VerticalLine"
HorizontalAlignment
=
"Center"
Stroke
=
"#FFCCCCCC"
VerticalAlignment
=
"Top"
Width
=
"1"
/>
<
ToggleButton
x:Name
=
"Expander"
Background
=
"{TemplateBinding Background}"
IsTabStop
=
"False"
/>
<
Grid
x:Name
=
"LoadingVisual"
HorizontalAlignment
=
"Center"
RenderTransformOrigin
=
"0.5,0.5"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Center"
>
<
Grid.RenderTransform
>
<
TransformGroup
>
<
RotateTransform
Angle
=
"0"
CenterY
=
"0.5"
CenterX
=
"0.5"
/>
</
TransformGroup
>
</
Grid.RenderTransform
>
<
Path
Data
=
"M1,0A1,1,90,1,1,0,-1"
Height
=
"10"
StrokeStartLineCap
=
"Round"
Stretch
=
"Fill"
Stroke
=
"{TemplateBinding Foreground}"
StrokeThickness
=
"1"
Width
=
"10"
/>
<
Path
Data
=
"M0,-1.1L0.1,-1 0,-0.9"
Fill
=
"{TemplateBinding Foreground}"
HorizontalAlignment
=
"Left"
Height
=
"4"
Margin
=
"5,-1.5,0,0"
Stretch
=
"Fill"
StrokeThickness
=
"1"
VerticalAlignment
=
"Top"
Width
=
"4"
/>
</
Grid
>
</
Grid
>
<
CheckBox
x:Name
=
"CheckBoxElement"
Grid.Column
=
"2"
IsTabStop
=
"False"
Margin
=
"5,0,0,0"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Center"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
CheckBox
>
<
RadioButton
x:Name
=
"RadioButtonElement"
Grid.Column
=
"2"
IsTabStop
=
"False"
Margin
=
"5,0,0,0"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Center"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
RadioButton
>
<
Image
x:Name
=
"Image"
Grid.Column
=
"3"
HorizontalAlignment
=
"Center"
MaxWidth
=
"16"
MaxHeight
=
"16"
Margin
=
"2"
VerticalAlignment
=
"Center"
/>
<
Rectangle
x:Name
=
"FocusVisual"
Grid.ColumnSpan
=
"6"
Grid.Column
=
"2"
IsHitTestVisible
=
"False"
RadiusY
=
"3"
RadiusX
=
"3"
Stroke
=
"Black"
StrokeThickness
=
"1"
StrokeDashArray
=
"1 2"
Visibility
=
"Collapsed"
/>
<
Grid
Grid.ColumnSpan
=
"2"
Grid.Column
=
"4"
>
<
ContentPresenter
x:Name
=
"Header"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Content
=
"{TemplateBinding Header}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
ContentPresenter
x:Name
=
"EditHeaderElement"
ContentTemplate
=
"{TemplateBinding HeaderEditTemplate}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
Visibility
=
"Collapsed"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
</
Grid
>
</
Grid
>
<
ItemsPresenter
x:Name
=
"ItemsHost"
Grid.Row
=
"1"
Visibility
=
"Collapsed"
/>
</
Grid
>
</
ControlTemplate
>
</
Window.Resources
>
<
Grid
>
<
telerik:RadTreeView
Margin
=
"8"
IsDragDropEnabled
=
"True"
SelectionMode
=
"Multiple"
IsSingleExpandPath
=
"True"
>
<
telerik:RadTreeViewItem
Header
=
"Sport Categories"
Template
=
"{DynamicResource RadTreeViewItemControlTemplate1}"
>
<
telerik:RadTreeViewItem
Header
=
"Football"
>
<
telerik:RadTreeViewItem
Header
=
"Futsal"
/>
<
telerik:RadTreeViewItem
Header
=
"Soccer"
/>
</
telerik:RadTreeViewItem
>
<
telerik:RadTreeViewItem
Header
=
"Tennis"
/>
<
telerik:RadTreeViewItem
Header
=
"Cycling"
/>
</
telerik:RadTreeViewItem
>
<
telerik:RadTreeViewItem
Header
=
"SecondDown"
/>
<
telerik:RadTreeViewItem
Header
=
"ThirdDown"
/>
</
telerik:RadTreeView
>
</
Grid
>
Janene
When we edit the template, we are overriding the style built in by telerik. This is an exact copy of the the control's style (excpet a swap out of the gradient you wanted) that comes with the controls, except now it is in your pages resources section.
Have no worries, you'll see the same performance you see when using the control right out of the box. However, now you can see what telerik puts into the visuals of their controls. Thats why they are smooth and responsive =)
If it makes it easier, just use this Visual Studio shortcut ctrl-M followed by ctrl-L. This will collapse/expand all nodes. Its how I personally find my way through a large visual tree ;)
Lancelot