I'm new to WPF and Telerik UI for WPF. I'm using telerik's RadTreeview
Somehow, i have added style custom style but i'm unable to added Hovering effect and also selected effect in RadTreeview.
There are many examples, but its main for basic treeview. Tried adding content template.. it fails to load parent or child node..
Can anyone help me out in this.
Thanks in advance...!!!
Below is my custom style for RadtreeviewItem
<Style x:Key="myItemContainerStyle" TargetType="telerik:RadTreeViewItem">
<Setter Property="Background" Value="#2199e8"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="20 5"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="IsExpanded" Value="False"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#adc6e5"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="LightBlue" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Red" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
Because of the definition of the default ControlTemplate, I am afraid you can't solve this with style triggers. You need to create a complete custom ControlTemplate and modify the MouseOverVisual, SelectionUnfocusedVisual and SelectionVisual Border elements according to your requirements:
<Style x:Key="myItemContainerStyle" TargetType="telerik:RadTreeViewItem">
<Setter Property="Background" Value="#2199e8"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Padding" Value="20 5"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="IsExpanded" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTreeViewItem">
<Grid x:Name="RootElement" UseLayoutRounding="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Display"/>
<VisualState x:Name="Edit">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="EditHeaderElement" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility" Duration="0">
<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 Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header" To="0.35" Duration="0"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Image" To="0.35" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual" To="1" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionUnfocusedVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<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 Storyboard.TargetName="LoadingVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Expander" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="LoadingVisualAngleTransform" Storyboard.TargetProperty="Angle" From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever"/>
</Storyboard>
</VisualState>
<VisualState x:Name="LoadingOnDemandReverse"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<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 Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<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 CornerRadius="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Grid.Column="2"
Grid.ColumnSpan="6"/>
<Border x:Name="MouseOverVisual"
Opacity="0"
Grid.ColumnSpan="6"
Grid.Column="2"
Background="Red"
CornerRadius="1"
BorderBrush="LightBlue"
BorderThickness="1">
</Border>
<Border x:Name="SelectionUnfocusedVisual"
Visibility="Collapsed"
Grid.ColumnSpan="6"
Grid.Column="2"
Background="Red"
CornerRadius="1"
BorderBrush="#adc6e5"
BorderThickness="1">
</Border>
<Border x:Name="SelectionVisual"
Visibility="Collapsed"
Grid.ColumnSpan="6"
Grid.Column="2"
Background="Red"
CornerRadius="1"
BorderBrush="#adc6e5"
BorderThickness="1">
</Border>
<StackPanel x:Name="IndentContainer" Orientation="Horizontal">
<Rectangle x:Name="IndentFirstVerticalLine" Width="1" Visibility="Collapsed" Stroke="#FFCCCCCC" VerticalAlignment="Top"/>
</StackPanel>
<Grid Grid.Column="1" x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="21">
<Rectangle x:Name="HorizontalLine" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center" HorizontalAlignment="Right"/>
<Rectangle x:Name="VerticalLine" Width="1" Stroke="#FFCCCCCC" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<ToggleButton x:Name="Expander" IsTabStop="False" Background="{TemplateBinding Background}"/>
<Grid x:Name="LoadingVisual" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterX="0.5" CenterY="0.5"/>
</TransformGroup>
</Grid.RenderTransform>
<Path Width="10" Height="10" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" StrokeStartLineCap="Round" Data="M1,0 A1,1,90,1,1,0,-1"/>
<Path
Margin="5,-1.5,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="4"
Height="4"
Stretch="Fill"
Fill="{TemplateBinding Foreground}"
Data="M0,-1.1 L0.1,-1 L0,-0.9"
StrokeThickness="1"/>
</Grid>
</Grid>
<Image Grid.Column="3" x:Name="Image" MaxWidth="16" MaxHeight="16" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Rectangle x:Name="FocusVisual"
Visibility="Collapsed"
Grid.Column="2"
Grid.ColumnSpan="6"
StrokeThickness="1"
IsHitTestVisible="False"
Stroke="#FF000000"
StrokeDashArray="1 2"
RadiusX="3"
RadiusY="3"/>
<Grid x:Name="HeaderContentPanel" Grid.Column="4" Grid.ColumnSpan="2" Background="Transparent">
<ContentControl x:Name="Header"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Margin="{TemplateBinding Padding}"
IsTabStop="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground, Mode=OneWay}"/>
<ContentPresenter x:Name="EditHeaderElement"
Visibility="Collapsed"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
ContentTemplateSelector="{TemplateBinding HeaderEditTemplateSelector}"
ContentTemplate="{TemplateBinding HeaderEditTemplate}"/>
</Grid>
<CheckBox IsTabStop="False" Grid.Column="2" VerticalAlignment="Center" Margin="5,0,0,0" x:Name="CheckBoxElement" Visibility="Collapsed"/>
<RadioButton IsTabStop="False" Grid.Column="2" Margin="5,0,0,0" VerticalAlignment="Center" x:Name="RadioButtonElement" Visibility="Collapsed"/>
</Grid>
<ItemsPresenter Grid.Row="1" x:Name="ItemsHost" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>