Drag and Drop Background color change in the RadTreeView Style

[Debranjan]

How do I change the Drag and Drop orange background color and also sepration orange color in the RadTreeView Style.

My RadTreeView Style code is given below.

 

 

 

<!--<SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B"/>-->

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#ecf5ff"/>

 

 

 

 

<Thickness x:Key="ControlSubItem_OuterBorderThickness">1</Thickness>

 

 

 

 

<!--<SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>-->

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#ecf5ff"/>

 

 

 

 

<Thickness x:Key="ControlSubItem_InnerBorderThickness">1</Thickness>

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_Background_MouseOver" Color="#ecf5ff"/>

 

 

 

 

<!--<LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

 

 

<GradientStop Color="#FFFFFBA3" Offset="1"/>

 

<GradientStop Color="#FFFFFBDA" Offset="0"/>

 

</LinearGradientBrush>-->

 

 

 

<CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>

 

 

 

 

<CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius>

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_UnFocus" Color="#FFdbdbdb"/>

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_UnFocus" Color="Transparent"/>

 

 

 

 

<LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus" EndPoint="0,1">

 

 

 

 

<GradientStop Color="#FFf8f6f9" Offset="0"/>

 

 

 

 

<GradientStop Color="#FFf0f0f0" Offset="1"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="Transparent"/>

 

 

 

 

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="Transparent"/>

 

 

 

 

<LinearGradientBrush x:Key="ControlSubItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

<GradientStop Color="Transparent" Offset="1"/>

 

 

 

 

<GradientStop Color="Transparent"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<SolidColorBrush x:Key="TreeView_LineColor" Color="#FFCCCCCC"/>

 

 

 

 

<SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000"/>

 

 

 

 

<ControlTemplate x:Key="TreeViewItemDefaultTemplate" TargetType="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" Value="Visible"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimation Duration="0:0:0.0" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>

 

 

 

 

<DoubleAnimation Duration="0:0:0.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" Value="Visible"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="SelectedUnfocused">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectionUnfocusedVisual">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

 

 

 

 

</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" Value="Visible"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Expander">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

 

 

 

 

</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" Value="Visible"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="ExpandStates">

 

 

 

 

<VisualState x:Name="Expanded"/>

 

 

 

 

<VisualState x:Name="Collapsed"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}">

 

 

 

 

<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="{StaticResource ControlSubItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">

 

 

 

 

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>

 

 

 

 

</Border>

 

 

 

 

<Border x:Name="SelectionUnfocusedVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_UnFocus}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Visibility="Collapsed">

 

 

 

 

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_UnFocus}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_UnFocus}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>

 

 

 

 

</Border>

 

 

 

 

<Border x:Name="SelectionVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Visibility="Collapsed">

 

 

 

 

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>

 

 

 

 

</Border>

 

 

 

 

<StackPanel x:Name="IndentContainer" Orientation="Horizontal">

 

 

 

 

<Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource TreeView_LineColor}" Visibility="Collapsed" VerticalAlignment="Top" Width="1">

 

 

 

 

<Rectangle.Clip>

 

 

 

 

<RectangleGeometry Rect="0,0,1,10000"/>

 

 

 

 

</Rectangle.Clip>

 

 

 

 

</Rectangle>

 

 

 

 

</StackPanel>

 

 

 

 

<Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">

 

 

 

 

<Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Center">

 

 

 

 

<Rectangle.Clip>

 

 

 

 

<RectangleGeometry Rect="0,0,10000,1"/>

 

 

 

 

</Rectangle.Clip>

 

 

 

 

</Rectangle>

 

 

 

 

<Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="{StaticResource TreeView_LineColor}" VerticalAlignment="Top" Width="1">

 

 

 

 

<Rectangle.Clip>

 

 

 

 

<RectangleGeometry Rect="0,0,1,10000"/>

 

 

 

 

</Rectangle.Clip>

 

 

 

 

</Rectangle>

 

 

 

 

<!--<ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>-->

 

 

 

 

<ToggleButton x:Name="Expander" IsTabStop="False">

 

 

 

 

<ToggleButton.BorderBrush>

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

<GradientStop Color="#FFA3AEB9" Offset="0"/>

 

 

 

 

<GradientStop Color="#FF8399A9" Offset="0.375"/>

 

 

 

 

<GradientStop Color="#FF718597" Offset="0.375"/>

 

 

 

 

<GradientStop Color="#FFE3E2E2" Offset="1"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</ToggleButton.BorderBrush>

 

 

 

 

<ToggleButton.Background>

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

<GradientStop Color="White" Offset="0"/>

 

 

 

 

<GradientStop Color="#FFE3E2E2" Offset="1"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</ToggleButton.Background>

 

 

 

 

<ToggleButton.Template>

 

 

 

 

<ControlTemplate TargetType="ToggleButton">

 

 

 

 

<Grid x:Name="Root" Background="Transparent">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

<ColorAnimation Duration="0" To="#FF1BBBFA" Storyboard.TargetProperty="(Path.Stroke).Color" Storyboard.TargetName="UncheckedVisual"/>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimation Duration="0" To=".7" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="CheckStates">

 

 

 

 

<VisualState x:Name="Unchecked"/>

 

 

 

 

<VisualState x:Name="Checked">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="UncheckedVisual"/>

 

 

 

 

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckedVisual"/>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Grid HorizontalAlignment="Right" Margin="2 2 5 2">

 

 

 

 

<Path x:Name="UncheckedVisual" Data="M 0,1.5 L 0,7.5 L 3.5,4.5 Z" Fill="#0066cc" HorizontalAlignment="Right" Height="9" Stroke="#0066cc" StrokeThickness="1" StrokeLineJoin="Miter" VerticalAlignment="Center" Width="6"/>

 

 

 

 

<Path x:Name="CheckedVisual" Data="M 6,0 L 6,6 L 0,6 Z" Fill="#0066cc" HorizontalAlignment="Center" Height="6" Opacity="0" StrokeLineJoin="Miter" VerticalAlignment="Center" Width="6"/>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</ToggleButton.Template>

 

 

 

 

</ToggleButton>

 

 

 

 

<Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">

 

 

 

 

<Grid.RenderTransform>

 

 

 

 

<TransformGroup>

 

 

 

 

<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0" CenterY="0.5" CenterX="0.5"/>

 

 

 

 

</TransformGroup>

 

 

 

 

</Grid.RenderTransform>

 

 

 

 

<Path Data="M1,0 A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>

 

 

 

 

<Path Data="M0,-1.1 L0.1,-1 L0,-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="{StaticResource Theme}"-->

 

 

 

 

<RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>

 

 

 

 

<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="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>-->

 

 

 

 

<!--<Image x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" Visibility="Collapsed" Source="../Assets/Images/FocusBg.png" HorizontalAlignment="Left" Height="23" Width="175"/>-->

 

 

 

 

<!--<Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="0" RadiusX="03" Visibility="Collapsed">

 

 

<Rectangle.Fill>

 

<SolidColorBrush Color="#F5F5F5F5"/>

 

</Rectangle.Fill>

 

</Rectangle>-->

 

 

 

<Border x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" Visibility="Collapsed" Height="23" Width="175">

 

 

 

 

<Image Source="../Assets/Images/FocusBg.png" HorizontalAlignment="Left" Height="23" Width="175"/>

 

 

 

 

</Border>

 

 

 

 

<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" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

<Style x:Key="RadTreeViewItemStyle" TargetType="telerik:RadTreeViewItem">

 

 

 

 

<Setter Property="HorizontalContentAlignment" Value="Left"/>

 

 

 

 

<Setter Property="VerticalContentAlignment" Value="Center"/>

 

 

 

 

<Setter Property="CheckState" Value="Off"/>

 

 

 

 

<Setter Property="BorderThickness" Value="1"/>

 

 

 

 

<Setter Property="Padding" Value="1 0 5 0"/>

 

 

 

 

<Setter Property="IsDropAllowed" Value="True"/>

 

 

 

 

<Setter Property="ItemsOptionListType" Value="Default"/>

 

 

 

 

<Setter Property="IsEnabled" Value="True"/>

 

 

 

 

<Setter Property="MinHeight" Value="24"/>

 

 

 

 

<Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}"/>

 

 

 

 

<Setter Property="ItemsPanel">

 

 

 

 

<Setter.Value>

 

 

 

 

<ItemsPanelTemplate>

 

 

 

 

<telerik:TreeViewPanel VerticalAlignment="Bottom"/>

 

 

 

 

</ItemsPanelTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

[Pavel Pavlov]

Hello Debranjan,

I am a bit confused , the thread is posted under the RadTreeListView section .

Are you asking about RadTreeView or about RadTreeListView ?

Kind regards,
Pavel Pavlov
the Telerik team