Silverlight TreeView动态绑定数据，将数据绑定到用户控件

先上实现后的图片：

 

　　其中每行中的数据都是绑定的用户控件，拿第一个顶级菜单举例，其中1，1，1，0，0，3代表的六个TextBlock 如下：

<TextBlock Text="{Binding Info_class_id, Mode=OneTime}" Height="23" Grid.Column="0" />

<TextBlock Text="{Binding Info_class_code, Mode=TwoWay}" Height="23" Grid.Column="1" />

<TextBlock Text="{Binding Name, Mode=TwoWay}" Height="23" Grid.Column="2" />

<TextBlock Text="{Binding Parent_class_id, Mode=TwoWay}" Height="23" Grid.Column="3" />

<TextBlock Text="{Binding Class_level, Mode=TwoWay}" Height="23" Grid.Column="4" />

<TextBlock Text="{Binding InfoCount, Mode=TwoWay}" Height="23" Grid.Column="5" />

　　首先在项目中添加system.windows.controls引用，然后在TreeView显示界面中添加下面的引用：xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

xmlns:System="clr-namespace:System;assembly=mscorlib"

xmlns:local="clr-namespace:SLTreeView" //本项目（需要用其他用户控件）

　　然后在TreeView样式中添加自定义控件，如图（阴影部分为自定义控件）：

　　xaml代码如下：

<UserControl x:Class="SLTreeView.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    xmlns:System="clr-namespace:System;assembly=mscorlib"

    xmlns:local="clr-namespace:SLTreeView"

    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">

            <Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">

                <Grid.RenderTransform>

                    <TranslateTransform x:Name="Translation" X="-25"/>

                </Grid.RenderTransform>

                <VisualStateManager.VisualStateGroups>

                    <VisualStateGroup x:Name="OpenStates">

                        <VisualStateGroup.Transitions>

                            <VisualTransition GeneratedDuration="0"/>

                            <VisualTransition GeneratedDuration="0:0:0.2" To="Open">

                                <Storyboard>

                                    <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="Translation">

                                        <DoubleAnimation.EasingFunction>

                                            <BackEase Amplitude=".3" EasingMode="EaseOut"/>

                                        </DoubleAnimation.EasingFunction>

                                    </DoubleAnimation>

                                    <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>

                                </Storyboard>

                            </VisualTransition>

                        </VisualStateGroup.Transitions>

                        <VisualState x:Name="Closed">

                            <Storyboard>

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

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="Open">

                            <Storyboard>

                                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="Translation"/>

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

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>

                <Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/>

                <Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/>

                <Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/>

                <Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/>

                <Border Background="#FFDC000C" CornerRadius="2">

                    <TextBlock Foreground="White" MaxWidth="250" Margin="8,4,8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" UseLayoutRounding="false"/>

                </Border>

            </Grid>

        </ControlTemplate>

        <Style x:Key="TreeViewItemStyle1" TargetType="sdk:TreeViewItem">

            <Setter Property="Padding" Value="3"/>

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

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

            <Setter Property="Background" Value="Transparent"/>

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

            <Setter Property="Cursor" Value="Arrow"/>

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

            <Setter Property="TabNavigation" Value="Once"/>

            <Setter Property="Margin" Value="0 1 0 0"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="sdk:TreeViewItem">

                        <Grid Background="{x:Null}">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="15"/>

                                <ColumnDefinition Width="Auto"/>

                                <ColumnDefinition Width="*"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto"/>

                                <RowDefinition Height="*"/>

                            </Grid.RowDefinitions>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver"/>

                                    <VisualState x:Name="Pressed"/>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

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

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <SolidColorBrush Color="#FF999999"/>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="SelectionStates">

                                    <VisualState x:Name="Unselected"/>

                                    <VisualState x:Name="Selected">

                                        <Storyboard>

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

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="SelectedInactive">

                                        <Storyboard>

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

                                            <ColorAnimation Duration="0" To="#FF999999" Storyboard.TargetProperty="Color" Storyboard.TargetName="SelectionFill"/>

                                            <ColorAnimation Duration="0" To="#FF333333" Storyboard.TargetProperty="Color" Storyboard.TargetName="SelectionStroke"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="HasItemsStates">

                                    <VisualState x:Name="HasItems"/>

                                    <VisualState x:Name="NoItems">

                                        <Storyboard>

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

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

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="ExpansionStates">

                                    <VisualState x:Name="Collapsed"/>

                                    <VisualState x:Name="Expanded">

                                        <Storyboard>

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

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

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="ValidationStates">

                                    <VisualState x:Name="Valid"/>

                                    <VisualState x:Name="InvalidUnfocused">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">

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

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="InvalidFocused">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">

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

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="ValidationToolTip">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <System:Boolean>True</System:Boolean>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Stretch" IsTabStop="False" TabNavigation="Once" VerticalAlignment="Stretch" Background="#FF286599">

                                <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="#FF175685" Offset="1"/>

                                    </LinearGradientBrush>

                                </ToggleButton.BorderBrush>

                                <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="#FF96CCF7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="UncheckedVisual" d:IsOptimized="True"/>

                                                        </Storyboard>

                                                    </VisualState>

                                                    <VisualState x:Name="Disabled"/>

                                                </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 Margin="1">

                                                <Path  x:Name="UncheckedVisual" Data="M9,4.5 C9,6.9852815 6.9852815,9 4.5,9 C2.0147185,9 0,6.9852815 0,4.5 C0,2.0147185 2.0147185,0 4.5,0 C6.9852815,0 9,2.0147185 9,4.5 z M7.5000157,4.3950109 L3.1660161,1.795011 L3.1660156,6.9950109 z" Fill="#FF5A9FF0" HorizontalAlignment="Center" Height="9" Margin="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" StrokeThickness="1" UseLayoutRounding="False" VerticalAlignment="Center" Width="9" />

                                                <Path  x:Name="CheckedVisual" Opacity="0"  Data="M9,4.5 C9,6.9852815 6.9852815,9 4.5,9 C2.0147185,9 0,6.9852815 0,4.5 C0,2.0147185 2.0147185,0 4.5,0 C6.9852815,0 9,2.0147185 9,4.5 z M7.5000157,4.3950109 L3.1660161,1.795011 L3.1660156,6.9950109 z" Fill="#FF5A9FF0" HorizontalAlignment="Center" Height="9" Margin="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" StrokeThickness="1" UseLayoutRounding="False" VerticalAlignment="Center" Width="9" >

                                                    <Path.RenderTransform>

                                                        <CompositeTransform Rotation="90"/>

                                                    </Path.RenderTransform>

                                                </Path>

                                            </Grid>

                                        </Grid>

                                    </ControlTemplate>

                                </ToggleButton.Template>

                            </ToggleButton>

                            <Rectangle x:Name="Selection" Grid.Column="1" IsHitTestVisible="False" Opacity="0" RadiusY="2" RadiusX="2" StrokeThickness="1">

                                <Rectangle.Fill>

                                    <SolidColorBrush x:Name="SelectionFill" Color="#FFBADDE9"/>

                                </Rectangle.Fill>

                                <Rectangle.Stroke>

                                    <SolidColorBrush x:Name="SelectionStroke" Color="#FF6DBDD1"/>

                                </Rectangle.Stroke>

                            </Rectangle>

                            <Button x:Name="Header" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Cursor="{TemplateBinding Cursor}" ClickMode="Hover" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" TabNavigation="Once" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                                <Button.Template>

                                    <ControlTemplate TargetType="Button">

                                        <Grid Background="{TemplateBinding Background}">

                                            <VisualStateManager.VisualStateGroups>

                                                <VisualStateGroup x:Name="CommonStates">

                                                    <VisualState x:Name="Normal"/>

                                                    <VisualState x:Name="Pressed">

                                                        <Storyboard>

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

                                                        </Storyboard>

                                                    </VisualState>

                                                    <VisualState x:Name="Disabled">

                                                        <Storyboard>

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

                                                        </Storyboard>

                                                    </VisualState>

                                                </VisualStateGroup>

                                            </VisualStateManager.VisualStateGroups>

                                            <Rectangle x:Name="Hover" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>

                                            <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}"/>

                                        </Grid>

                                    </ControlTemplate>

                                </Button.Template>

                                <local:ParentItem Width="260"></local:ParentItem>

                                <!--<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"/>-->

                            </Button>

                            <Border x:Name="Validation" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" CornerRadius="2" Visibility="Collapsed">

                                <ToolTipService.ToolTip>

                                    <ToolTip x:Name="ValidationToolTip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" Placement="Right" PlacementTarget="{Binding ElementName=Header}" Template="{StaticResource CommonValidationToolTipTemplate}"/>

                                </ToolTipService.ToolTip>

                                <Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">

                                    <Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" Fill="#FFDC000C" Margin="-1,3,0,0"/>

                                    <Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#FFFFFFFF" Margin="-1,3,0,0"/>

                                </Grid>

                            </Border>

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

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Margin="2">

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>

        <sdk:TreeView Grid.Row="0" x:Name="ArtistTree" />

    </Grid>

</UserControl>

　　大家可以看到粗体部分为我的自定义用户控件代码如下在（只加了六列）：

<UserControl x:Class="SLTreeView.ParentItem"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" Height="23" Width="180">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="30" />

            <ColumnDefinition Width="30" />

            <ColumnDefinition Width="30" />

            <ColumnDefinition Width="30" />

            <ColumnDefinition Width="30" />

            <ColumnDefinition Width="30" />

        </Grid.ColumnDefinitions>

        <TextBlock Text="{Binding Info_class_id, Mode=OneTime}" Height="23" Grid.Column="0" />

        <TextBlock Text="{Binding Info_class_code, Mode=TwoWay}" Height="23" Grid.Column="1" />

        <TextBlock Text="{Binding Name, Mode=TwoWay}" Height="23" Grid.Column="2" />

        <TextBlock Text="{Binding Parent_class_id, Mode=TwoWay}" Height="23" Grid.Column="3" />

        <TextBlock Text="{Binding Class_level, Mode=TwoWay}" Height="23" Grid.Column="4" />

        <TextBlock Text="{Binding InfoCount, Mode=TwoWay}" Height="23" Grid.Column="5" />

    </Grid>

</UserControl>

　　TreeView实现的后台xmal.cs代码如下（我用for循环造的假数据，然后用AddTreeNode递归方法将数据加载到TreeView中）：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Windows;

using System.Windows.Controls;

namespace SLTreeView

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            List<VMS_Info_Plate> _VMS_Info_PlateList = new List<VMS_Info_Plate>();

            for (int i = 1; i <= 5; i++)

            {

                _VMS_Info_PlateList.Add(new VMS_Info_Plate

                {

                    Info_class_id = i,

                    Info_class_code = i.ToString(),

                    Name = i.ToString(),

                    Parent_class_id = 0,

                    Class_level = 0,

                    InfoCount = 3

                });

                for (int j = 1; j <= 3; j++)

                {

                    _VMS_Info_PlateList.Add(new VMS_Info_Plate

                     {

                         Info_class_id = i * 10 + j,

                         Info_class_code = (i * 10 + j).ToString(),

                         Name = (i * 10 + j).ToString(),

                         Parent_class_id = i,

                         Class_level = 1,

                         InfoCount = 1

                     });

               }

            }

            AddTreeNode(0, null, _VMS_Info_PlateList);

        }

        #region 添加叶子节点信息

        /// <summary>

        /// 添加叶子节点信息

        /// </summary>

        /// <param name="parentID">父亲节点信息</param>

        /// <param name="treeViewItem"></param>

        private void AddTreeNode(Int32 parent_Code_Id, TreeViewItem treeViewItem, List<VMS_Info_Plate> _List)

        {

            // 检索查询的集合

            List<VMS_Info_Plate> result = _List.Where(A => A.Parent_class_id == parent_Code_Id).ToList();

            // 查询结果不为空

            if (result.Count > 0)

            {

                foreach (VMS_Info_Plate _InfoClassCount in result)

                {

                    TreeViewItem objTreeNode = new TreeViewItem();

                    //objTreeNode.Header = _InfoClassCount.Name + " ： " + _InfoClassCount.InfoCount + "条";

                    objTreeNode.DataContext = _InfoClassCount;

                    //objTreeNode.

                    ////此样式将会添加的所有叶子结点上

                    objTreeNode.Style = this.Resources["TreeViewItemStyle1"] as Style;

                    //添加根节点

                    if (treeViewItem == null)

                    {

                        ArtistTree.Items.Add(objTreeNode);

                    }

                    else

                    {

                        treeViewItem.Items.Add(objTreeNode);

                    }

                    AddTreeNode(_InfoClassCount.Info_class_id, objTreeNode, _List);

                }

                // 给父亲节点添加属性信息

                //objTreeNode.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;

            }

        }

        #endregion

        #region 信息类别

        /// <summary>

        /// 信息类别

        /// </summary>

        public class VMS_Info_Plate

        {

            /// <summary>

            /// 类别主键

            /// </summary>

            public Int32 Info_class_id { get; set; }

            /// <summary>

            /// 类别编号

            /// </summary>

            public String Info_class_code { get; set; }

            /// <summary>

            /// 类别名称

            /// </summary>

            public String Name { get; set; }

            /// <summary>

            /// 所属主类

            /// </summary>

            public Int32 Parent_class_id { get; set; }

            /// <summary>

            /// 类级别

            /// </summary>

            public Int32 Class_level { get; set; }

            /// <summary>

            /// 包含信息条数

            /// </summary>

            public Int32? InfoCount { get; set; }

        }

        #endregion

    }

}

　　到此TreeView动态绑定数据，将数据绑定到用户控件已经实现，至于美观方面不是我的特长，还需同学们自己处理一下，TreeView绑定数据只是借花献佛，在此特别谢谢博客园的大师们！

　　Rar下载：TreeView动态绑定数据，将数据绑定到用户控件(开发环境Vs2010Sp1+Slilverlight4) 

作者：彭海松

出处：http://www.cnblogs.com/haisongvip/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。