ET9_WebGL_Base/CSharp/App/Modules/Tree/TreeView.xaml

<UserControl x:Class="Modules.Tree.TreeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:tree="clr-namespace:Modules.Tree"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300"
			 d:DataContext="{d:DesignInstance tree:TreeViewModel}">
	<UserControl.Resources>
		<LinearGradientBrush x:Key="treeNodeSelectorFillBrush" StartPoint="0,0" EndPoint="0,1">
			<GradientStop Color="White" Offset="0" />
			<GradientStop Color="#FFF37FFF" Offset="0.6" />
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="treeNodeOtherFillBrush" StartPoint="0,0" EndPoint="0,1">
			<GradientStop Color="White" Offset="0" />
			<GradientStop Color="#FFF59202" Offset="0.6" />
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="treeNodeActionFillBrush" StartPoint="0,0" EndPoint="0,1">
			<GradientStop Color="White" Offset="0" />
			<GradientStop Color="#FF06F31C" Offset="0.6" />
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="treeNodeSequenceFillBrush" StartPoint="0,0" EndPoint="0,1">
			<GradientStop Color="White" Offset="0" />
			<GradientStop Color="#FFF3EF91" Offset="0.6" />
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="treeNodeConditionFillBrush" StartPoint="0,0" EndPoint="0,1">
			<GradientStop Color="White" Offset="0" />
			<GradientStop Color="#FF06CBF7" Offset="0.6" />
		</LinearGradientBrush>
		<SolidColorBrush x:Key="treeNodeBorderBrush" Color="Black" />
		
		<tree:NodeTypeColorConverter x:Key="NodeTypeColorConverter"/>
		<tree:NodeTypeToStringConverter x:Key="NodeTypeToStringConverter"/>
		<tree:FolderVisiableConverter x:Key="FolderVisiableConverter"/>
	</UserControl.Resources>
	
	<Grid>
		<ListBox Name="listBox" SelectionMode="Single" ItemsSource="{Binding TreeNodes}" VerticalAlignment="Stretch">
			<ListBox.ContextMenu>
				<ContextMenu>
					<MenuItem Header="新建" Click="MenuItem_New" />
					<MenuItem Header="删除" Click="MenuItem_Remove" />
					<MenuItem Header="左移" Click="MenuItem_MoveLeft" />
					<MenuItem Header="右移" Click="MenuItem_MoveRight" />
					<MenuItem Header="折叠/展开" Click="MenuItem_Fold" />
				</ContextMenu>
			</ListBox.ContextMenu>
			<ListBox.Resources>
				<Style TargetType="{x:Type ListBoxItem}">
					<Setter Property="Canvas.Left" Value="{Binding X}" />
					<Setter Property="Canvas.Top" Value="{Binding Y}" />
				</Style>
			</ListBox.Resources>
			<ListBox.ItemsPanel>
				<ItemsPanelTemplate>
					<Canvas AllowDrop="True" />
				</ItemsPanelTemplate>
			</ListBox.ItemsPanel>
			<ListBox.ItemTemplate>
				<DataTemplate DataType="tree:TreeNodeViewModel">
					<Canvas MouseDown="ListBoxItem_MouseDown" MouseUp="ListBoxItem_MouseUp" MouseMove="ListBoxItem_MouseMove"
							PreviewMouseLeftButtonDown="ListBoxItem_PreviewMouseLeftButtonDown"
							PreviewMouseLeftButtonUp="ListBoxItem_PreviewMouseLeftButtonUp">
						<Rectangle Name="rectNode" Width="{Binding Width}" Height="{Binding Height}" Cursor="Hand" StrokeThickness="2"
								RadiusX="10" RadiusY="10" Stroke="{StaticResource treeNodeBorderBrush}" Fill="{StaticResource treeNodeSelectorFillBrush}"/>
						<Label Content="+" Visibility="{Binding IsFold, Converter={StaticResource FolderVisiableConverter}}" Canvas.Left="60" Canvas.Top="10"/>
						<StackPanel>
							<Label Content="{Binding Type, Converter={StaticResource NodeTypeToStringConverter}}"/>
							<Label Content="{Binding Comment}"/>
						</StackPanel>
						<Line X1="{Binding ConnectorX1}" Y1="{Binding ConnectorY1}" X2="{Binding ConnectorX2}" Y2="{Binding ConnectorY2}"
								Stroke="Black" StrokeThickness="2"  />
					</Canvas>
					<DataTemplate.Triggers>
						<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
							<Setter TargetName="rectNode" Property="Stroke" Value="Green" />
						</DataTrigger>
						<DataTrigger Binding="{Binding Type, Converter={StaticResource NodeTypeColorConverter}}" Value="selector">
							<Setter TargetName="rectNode" Property="Fill" Value="{StaticResource treeNodeSelectorFillBrush}" />
						</DataTrigger>
						<DataTrigger Binding="{Binding Type, Converter={StaticResource NodeTypeColorConverter}}" Value="sequence">
							<Setter TargetName="rectNode" Property="Fill" Value="{StaticResource treeNodeSequenceFillBrush}" />
						</DataTrigger>
						<DataTrigger Binding="{Binding Type, Converter={StaticResource NodeTypeColorConverter}}" Value="condition">
							<Setter TargetName="rectNode" Property="Fill" Value="{StaticResource treeNodeConditionFillBrush}" />
						</DataTrigger>
						<DataTrigger Binding="{Binding Type, Converter={StaticResource NodeTypeColorConverter}}" Value="action">
							<Setter TargetName="rectNode" Property="Fill" Value="{StaticResource treeNodeActionFillBrush}" />
						</DataTrigger>
						<DataTrigger Binding="{Binding Type, Converter={StaticResource NodeTypeColorConverter}}" Value="other">
							<Setter TargetName="rectNode" Property="Fill" Value="{StaticResource treeNodeOtherFillBrush}" />
						</DataTrigger>
					</DataTemplate.Triggers>
				</DataTemplate>
			</ListBox.ItemTemplate>
		</ListBox>
	</Grid>
</UserControl>