We Keep Coding

WPF Override control background property

I'm kind of new to WPF and I'm not really sure how the whole thing works. I have three buttons below, which I would like to be individually coloured. I also want them to be transparent and have grey text when they are disabled.
I want them to retain the Background colour property assigned in MainWindow.xaml when they are enabled and be transparent when disabled.
I'm not sure how I would go about this. Does it involve templates, styles, binding converters? Any help would be greatly appreciated.
MainWindow.xaml
<Button Grid.Column="0" Content="Suspend" Style="{StaticResource BubbleButton}" IsEnabled="True" Background="Blue"/>
<Button Grid.Column="1" Content="Training Mode" Style="{StaticResource BubbleButton}" IsEnabled="True" Background="Orange"/>
<Button Grid.Column="2" Content="Exit Program" Style="{StaticResource BubbleButton}" Background="Red"/>
App.xaml
<Style x:Key="BubbleButton" TargetType="{x:Type Button}">
<!-- Triggers -->
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Trigger.Setters>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Gray"/>
</Trigger.Setters>
</Trigger>
</Style.Triggers>
<!-- Style -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="10" Background="{TemplateBinding Background}" Name="Button" Margin="10,5,10,5">
<Grid>
<Border BorderThickness="1,0,1,1" BorderBrush="Black" CornerRadius="{Binding ElementName=Button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="2" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<Border BorderThickness="0,1,0,0" BorderBrush="White" Margin="2" Opacity="0.7" CornerRadius="{Binding ElementName=Button, Path=CornerRadius}">
<Border.Effect>
<BlurEffect Radius="2" KernelType="Gaussian"/>
</Border.Effect>
</Border>
<TextBlock TextWrapping="WrapWithOverflow" Text="{TemplateBinding Content}" FontWeight="Medium" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="20" />
</Style>
Enabled:
Disabled:

using ControlTemplate.Triggers and adding TargetName should make it work. do the same for TextBlock and Foreground (from what I see, the Setter in Style, not in Trigger should be White).
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Button" Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>

Make multi line design of tag control

I have applied the evernote tag control which is working but the design is not in multi line as I add tag it is added next to the previous tag and adding in the single line, but it has to move down when there is no more space on the page. Here is the screenshot of what I want:
I have followed this link : http://stackoverflow.com/questions/15167809/how-can-i-create-a-tagging-control-similar-to-evernote-in-wpf but still unable to get the tags in multi line. Please let me know where I am going wrong. Following is my xaml:
<!-- EvernoteTagControl default style -->
<Style TargetType="{x:Type local:EvernoteTagControl}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
<LinearGradientBrush x:Key="IconBrush" EndPoint="0,1">
<GradientStop Color="#5890f0" Offset="0" />
<GradientStop Color="#0351d7" Offset="1" />
</LinearGradientBrush>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="15 25 15 15" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagControl}">
<Grid>
<Grid.ColumnDefinitions>
<!--<ColumnDefinition Width="Auto" />-->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--<Path Grid.Column="0" Margin="2" Fill="{StaticResource IconBrush}" Height="19" Stretch="Uniform" Data="M 50.535714,0.44196425 0.00446427,34.754464 l 0,106.906246 100.71874573,0 0,-107.124996 L 50.535714,0.44196425 z m 0.1875,21.21874975 c 6.311826,0 11.40625,5.094424 11.40625,11.40625 0,6.311826 -5.094424,11.4375 -11.40625,11.4375 -6.311826,0 -11.4375,-5.125674 -11.4375,-11.4375 0,-6.311826 5.125674,-11.40625 11.4375,-11.40625 z" />-->
<ItemsPresenter Grid.Column="0" Margin="2" />
<Button Margin="5,0,0,0" Grid.Column="1" Content="Click to add..." x:Name="PART_CreateTagButton">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter TextElement.Foreground="#FF555555" VerticalAlignment="Center" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditing" Value="True">
<Setter TargetName="PART_CreateTagButton" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel" >
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- EvernoteTagItem default style -->
<Style TargetType="{x:Type local:EvernoteTagItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="50" />
<Setter Property="Margin" Value="0,0,2,0" />
<Setter Property="Padding" Value="5,2,0,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
<Button x:Name="PART_TagButton" Content="{TemplateBinding Text}" Foreground="#ffffff" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" BorderBrush="#00698C" BorderThickness="1" CornerRadius="2" Background="#00698C" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,2" />
<Button x:Name="PART_DeleteTagButton" Grid.Column="1" Margin="3,0" VerticalAlignment="Center" HorizontalAlignment="Right" >
<Button.Template>
<ControlTemplate>
<Grid Height="10" Width="10" Background="#00698C" >
<Path Stretch="Uniform" ClipToBounds="True" Stroke="{StaticResource HighlightBrush}" StrokeThickness="1" Data="M 85.364473,6.9977109 6.0640998,86.29808 6.5333398,85.76586 M 6.9926698,7.4977169 86.293043,86.79809 85.760823,86.32885" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Border>
<!--<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#ffffff" />
<Setter TargetName="PART_DeleteTagButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
</Button.Template>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditing" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
<tkInput:AutoCompleteBox x:Name="PART_InputBox"
Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
ItemsSource="{Binding AllTags, RelativeSource={RelativeSource AncestorType={x:Type local:EvernoteTagControl}}}"
IsTextCompletionEnabled="True"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I am getting these tags as:

Currently, you use a StackPanel as ItemsPanel, but a stack panel will never wrap its items in multiple dimensions. So instead, you should try panels like WrapPanel or UniformGrid
For the WrapPanel, you also need to set a Width in the ItemContainerStyle in order to assure same size for all tag items (according to your "what I want" picture).
Then you have to decide on the positioning of your PART_CreateTagButton button. With multi lines of tags, the grid layout of ItemsPresenter and PART_CreateTagButton might no longer be appropriate.
You can probably create a compound items source of the original tag items source and the button as last item. This way, the button will always be properly aligned with the tags. See Add extra items when using ItemsSource and How do you bind a CollectionContainer to a collection in a view model? for more details.

how to fill gradient in background or image as backgrond for slider control in wpf?

I am working on slider control of wpf, i want background design of slider control filled according to my attached image, please help me how i can fill the background with same gradient in wpf ?

<UserControl.Resources>
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Height="10">
<Border.Background>
<ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="Green" Height="10"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="20" Width="20">
<Ellipse.Fill>
<ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" Value="500" Width="300" Margin="50,0,50,0"></Slider>

You have to include RelativeTransform to get striped background in lineargradient brush.Please try below code for Background brush
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" SpreadMethod="Repeat">
<GradientStop Color="#FF00AEEF" Offset="0"/>
<GradientStop Color="#FF00AEEF" Offset="0.5"/>
<GradientStop Color="#FF8BD6F0" Offset="0.5"/>
<GradientStop Color="#FF8BD6F0" Offset="1"/>
<LinearGradientBrush.RelativeTransform>
<ScaleTransform ScaleX="0.075" ScaleY="0.010"/>
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>

WPF Chart Toolkit - Change area series color's opacity

I need the area series charting to look like:
I succeeded in hiding the two axis and changing the colors to gradient brush.
I still need help on changing the opacity so the green one will be "behind" the orange one.
Also - How do I change the little points on the graph?
How do I change the background to be transparent?
How to hide the chart title?
Right now it looks like this:
Any help will be very appreciated!
Here is my xaml code:
<LinearGradientBrush x:Key="GreenGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#77b31a" Offset="0.75"></GradientStop>
<GradientStop Color="#85d805" Offset="0.45"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="OrangeGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#fff92900" Offset="0.75"></GradientStop>
<GradientStop Color="#ffff6115" Offset="0.45"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="GreenAreaSeriesStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource GreenGradientBrush}" />
<Setter Property="Opacity" Value="1"></Setter>
</Style>
<Style x:Key="OrangeAreaSeriesStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource OrangeGradientBrush}" />
<Setter Property="Opacity" Value="1"></Setter>
</Style>
<datavis:ResourceDictionaryCollection x:Key="MyPalette">
<ResourceDictionary>
<Style x:Key="DataPointStyle" BasedOn="{StaticResource GreenAreaSeriesStyle}" TargetType="Control" >
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" BasedOn="{StaticResource OrangeAreaSeriesStyle}" TargetType="Control" >
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
<Style x:Key ="PerformanceChartMajorTickMarkStyle" TargetType="Line">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</Window.Resources>
<charting:Chart Palette="{StaticResource MyPalette}" HorizontalAlignment="Left" Margin="39,38,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Width="815" Height="598" OverridesDefaultStyle="False">
<charting:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="Width" Value="0" />
</Style>
</charting:Chart.LegendStyle>
<charting:AreaSeries Name="Green" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" >
<charting:AreaSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
</charting:AreaSeries.IndependentAxis>
<charting:AreaSeries.DependentRangeAxis>
<charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
</charting:AreaSeries.DependentRangeAxis>
</charting:AreaSeries>
<charting:AreaSeries Name="Orange" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<charting:AreaSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
</charting:AreaSeries.IndependentAxis>
<charting:AreaSeries.DependentRangeAxis>
<charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
</charting:AreaSeries.DependentRangeAxis>
</charting:AreaSeries>
</charting:Chart>

I posted a similar question and got the following answer, which really helped me.
<ch:Chart Margin="56,21,50,72" Title="MyChart" DataContext="{Binding ElementName=Window, Mode=OneWay}" Style="{StaticResource controlStyle}" >
<ch:AreaSeries Name="DefaultArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" Title="111111" >
<ch:AreaSeries.Style>
<Style TargetType="ch:AreaSeries">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ch:AreaSeries">
<Canvas x:Name="PlotArea">
<Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Pink" Style="{TemplateBinding PathStyle}" Opacity="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ch:AreaSeries.Style>
</ch:AreaSeries>
<ch:AreaSeries Name="PersonnelArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" >
<ch:AreaSeries.Style>
<Style TargetType="ch:AreaSeries">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ch:AreaSeries">
<Canvas x:Name="PlotArea">
<Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Yellow" Style="{TemplateBinding PathStyle}" Opacity="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ch:AreaSeries.Style>
</ch:AreaSeries>
</ch:Chart>
You can also set the style as Ressource in XAML and then assign it dynamically in the code behind.
Here my original question with the Answer:
WPF AreaSeries: How to change background opacity?

Dragging and dropping TreeViewItems in non-clickable area of TreeView [WPF]

A question about dragging and dropping tree view items in WPF.
My original question is a little complex. So I simplified it, and here is the code:
XAML
<Window x:Class="WpfApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TreeView>
<TreeView.ItemContainerStyle>
<Style>
<Setter Property="TreeViewItem.IsExpanded" Value="True"/>
<Setter Property="TreeViewItem.Background" Value="LightBlue"/>
<Setter Property="TreeViewItem.AllowDrop" Value="True"/>
<EventSetter Event="TreeViewItem.MouseMove" Handler="TreeNode_MouseMove"/>
<EventSetter Event="TreeViewItem.Drop" Handler="TreeNode_Drop"/>
</Style>
</TreeView.ItemContainerStyle>
<TreeViewItem Header="first node in the tree"/>
<TreeViewItem Header="second node in the tree"></TreeViewItem>
<TreeViewItem Header="third node in the tree"></TreeViewItem>
</TreeView>
</Grid>
And code-behind:
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void TreeNode_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
DragDrop.DoDragDrop(this, DateTime.Now.ToString(), DragDropEffects.Move);
}
}
private void TreeNode_Drop(object sender, DragEventArgs e)
{
string str = (string)e.Data.GetData(typeof(string));
MessageBox.Show(str);
}
}
So what I want to do is very simple, just pop up a message box when one tree view item is dragged and dropped on another tree view item.
When I drop it right on another item, it works fine, like this:
But if I drag it slightly off the boundary of the item, it does not work, like this:
The mouse cursor is displayed as a “forbidden sign”, sorry I can’t get it in the screen shot.
So now my question is: how to make the second condition work? How to make the Drop event still fire up when the dropping location is slightly off the boundary of the item?
Thanks in advance.

Take the default ControlTemplate of TreeViewItem and make the Border (the border which contains the ContentPresenter) to have a colspan of 2, e.g.:
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="Bd"
SnapsToDevicePixels="True"
Grid.Column="1" Grid.ColumnSpan="2">
Note that the whole area in TreeViewItem next to the TextBlock would become clickable. You may want to play around with the template to fit it to your needs.
Below is the ControlTemplate of TreeViewItem extracted using Dump Control Template Utility.
<?xml version="1.0" encoding="utf-16"?>
<ControlTemplate
TargetType="TreeViewItem" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto"
MinWidth="19" />
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton
IsChecked="False"
ClickMode="Press"
Name="Expander">
<ToggleButton.Style>
<Style
TargetType="ToggleButton">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter
Property="UIElement.Focusable">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter
Property="FrameworkElement.Width">
<Setter.Value>
<s:Double>19</s:Double>
</Setter.Value>
</Setter>
<Setter
Property="FrameworkElement.Height">
<Setter.Value>
<s:Double>13</s:Double>
</Setter.Value>
</Setter>
<Setter
Property="Control.Template">
<Setter.Value>
<ControlTemplate
TargetType="ToggleButton">
<Border
Background="#00FFFFFF"
Width="19"
Height="13">
<Border
BorderThickness="1,1,1,1"
CornerRadius="1,1,1,1"
BorderBrush="#FF7898B5"
Width="9"
Height="9"
SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStop
Color="#FFFFFFFF"
Offset="0.2" />
<GradientStop
Color="#FFC0B7A6"
Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Path
Data="M0,2L0,3 2,3 2,5 3,5 3,3 5,3 5,2 3,2 3,0 2,0 2,2z"
Fill="#FF000000"
Name="ExpandPath"
Margin="1,1,1,1" />
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="ToggleButton.IsChecked">
<Setter
Property="Path.Data"
TargetName="ExpandPath">
<Setter.Value>
<StreamGeometry>M0,2L0,3 5,3 5,2z</StreamGeometry>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="Bd"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentSource="Header"
Name="PART_Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter
Name="ItemsHost"
Grid.Column="1"
Grid.Row="1"
Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="TreeViewItem.IsExpanded">
<Setter
Property="UIElement.Visibility"
TargetName="ItemsHost">
<Setter.Value>
<x:Static
Member="Visibility.Collapsed" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger
Property="ItemsControl.HasItems">
<Setter
Property="UIElement.Visibility"
TargetName="Expander">
<Setter.Value>
<x:Static
Member="Visibility.Hidden" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger
Property="TreeViewItem.IsSelected">
<Setter
Property="Panel.Background"
TargetName="Bd">
<Setter.Value>
<DynamicResource
ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
<Setter
Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource
ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="TreeViewItem.IsSelected">
<Condition.Value>
<s:Boolean>True</s:Boolean>
</Condition.Value>
</Condition>
<Condition
Property="Selector.IsSelectionActive">
<Condition.Value>
<s:Boolean>False</s:Boolean>
</Condition.Value>
</Condition>
</MultiTrigger.Conditions>
<Setter
Property="Panel.Background"
TargetName="Bd">
<Setter.Value>
<DynamicResource
ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter
Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource
ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger
Property="UIElement.IsEnabled">
<Setter
Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource
ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

use AllowDrop property and Drop event for TreeView itself.
this is from msdn: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/4b8bafe5-ae3e-439d-953a-f534a60dbb2d/