Treeview数据和图标...... [英] Treeview data and icons...

问题描述

在哪里可以找到关于如何在Blend / SketchFlow中使用树视图和一些测试数据的示例/教程？  如何根据类型等显示项目图标...

Where can I find an example/tutorial on how to use a treeview with some test data for our prototype in Blend/SketchFlow?  How to display an items icon depending on its type etc ...

推荐答案

您好GClaes，
本例来自Brennon Williams的Expression Blend 2 Book，通过这个例子，您可以在运行时添加treeview和treeviewItem，欢迎任何查询。

>
在XAML代码中添加：


    < Grid x：Name =" LayoutRoot">
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Grid.Background>
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < LinearGradientBrush EndPoint =" 0.5,1.203" StartPoint =" 0.5，-0.203">
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < GradientStop Color =" #FFFFFFF" Offset =" 1" />    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < GradientStop Color ="＃FF005FC4" Offset =" 0" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < / LinearGradientBrush>
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < /Grid.Background>
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < TreeView Horizo​​ntalAlignment =" Center" VerticalAlignment = QUOT;陀螺"宽度= QUOT; 600"高度= QUOT; 375"背景= QUOT;＃2DA4EFFF" BorderBrush = QUOT; {X：空}"余量= QUOT; 0,10,0,0" x：姓名=" tvMain" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Grid Horizo​​ntalAlignment =" Stretch" VerticalAlignment = QUOT;底座"宽度= QUOT;自动"高度="52">
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Grid.ColumnDefinitions>
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < ColumnDefinition Width =" 0.478 *" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < ColumnDefinition Width =" 0.23 *" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < ColumnDefinition Width =" 0.058 *" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < ColumnDefinition Width =" 0.109 *" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < ColumnDefinition Width =" 0.106 *" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < ColumnDefinition Width =" 0.019 *" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < /Grid.ColumnDefinitions>
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Button Horizo​​ntalAlignment =" Stretch"余量= QUOT; 3,0,3,0" X：名称= QUOT; btnAdd_Child" VerticalAlignment = QUOT;中心" Content =" Add TreeViewItems" Grid.Column = QUOT; 3英寸Grid.ColumnSpan = QUOT; 2英寸点击=" btnAddChild_Click" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < TextBox Horizo​​ntalAlignment =" Center" X：名称= QUOT; txtItemCount" VerticalAlignment = QUOT;中心" Grid.Column = QUOT; 2英寸文本= QUOT; 0" TextWrapping =" Wrap" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < Label Horizo​​ntalAlignment =" Right" VerticalAlignment = QUOT;中心"含量="儿童用品数量" Grid.Column =" 1" />
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; < / Grid>
< / Grid>

在逻辑代码中添加：

private void btnAddChild_Click（object sender，System.Windows.RoutedEventArgs e）
    &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; // TODO：在这里添加事件处理程序实现。
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; int LoopCount = Convert.ToInt32（this.txtItemCount.Text）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //确保我们至少有1个添加    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; if（LoopCount == 0）
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.txtItemCount.Text =" 1";
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; LoopCount = 1;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //创建一个新的TreeItem以添加到控件中    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TreeViewItem TempItem = new TreeViewItem（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //创建一个单独的标题，显示创建的时间
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TreeHeader MyHeader = new TreeHeader（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; MyHeader.SetLabelContent（" Item added：" + DateTime.Now.ToLongDateString（）+"" + DateTime.Now.ToLongTimeString（））;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; MyHeader.MinWidth = 300;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //在我们开始添加子项之前将标题添加到控件中    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TempItem.Header = MyHeader;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //添加子元素
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; for（int LoopValue = 0; LoopValue< LoopCount; LoopValue ++）
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //创建项目并将其添加到TreeViewItem中    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TreeItem TempTreeItem = new TreeItem（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TempTreeItem.SetLabelValue（Convert.ToString（LoopValue + 1）+"" + LoopCount.ToString（）+" children"）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TempTreeItem.MinWidth = 500;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TempItem.Items.Add（TempTreeItem）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TempTreeItem = null;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //将我们的项添加到TreeView控件。如果选择了某个项目或标题，则    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; //将我们的项目添加为其子项
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; if（this.tvMain.SelectedItem！= null）
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; if（this.tvMain.SelectedItem是TreeItem）
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TreeViewItem SelectedItem =（this.tvMain.SelectedItem as TreeItem）.Parent as TreeViewItem;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.BeginInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; SelectedItem.Items.Add（TempItem）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.EndInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;否则if（this.tvMain.SelectedItem是TreeHeader）
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TreeViewItem SelectedItem =（this.tvMain.SelectedItem as TreeHeader）.Parent as TreeViewItem;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.BeginInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; SelectedItem.Items.Add（TempItem）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.EndInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; else if（this.tvMain.SelectedItem是TreeViewItem）
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; TreeViewItem SelectedItem = this.tvMain.SelectedItem as TreeViewItem;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.BeginInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; SelectedItem.Items.Add（TempItem）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.EndInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;否则    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; {
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.BeginInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.Items.Add（TempItem）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; this.tvMain.EndInit（）;
    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP; }    &NBSP;&NBSP;&NBSP; &NBSP;&NBSP;&NBSP;
    &NBSP;&NBSP;&NBSP; }
-------
穆罕默德·萨布里

Hi GClaes,

This Example from Expression Blend 2 Book by Brennon Williams,
by this example you can add treeview and treeviewItem in run time, for any query you are welcome



Add this in XAML code:


    <Grid x:Name="LayoutRoot">
            <Grid.Background>
                    <LinearGradientBrush EndPoint="0.5,1.203" StartPoint="0.5,-0.203">
                            <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            <GradientStop Color="#FF005FC4" Offset="0"/>
                    </LinearGradientBrush>
            </Grid.Background>
            <TreeView HorizontalAlignment="Center" VerticalAlignment="Top" Width="600" Height="375" Background="#2DA4EFFF" BorderBrush="{x:Null}" Margin="0,10,0,0" x:Name="tvMain"/>
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Width="Auto" Height="52">
                    <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.478*"/>
                            <ColumnDefinition Width="0.23*"/>
                            <ColumnDefinition Width="0.058*"/>
                            <ColumnDefinition Width="0.109*"/>
                            <ColumnDefinition Width="0.106*"/>
                            <ColumnDefinition Width="0.019*"/>
                    </Grid.ColumnDefinitions>
                    <Button HorizontalAlignment="Stretch" Margin="3,0,3,0" x:Name="btnAdd_Child" VerticalAlignment="Center" Content="Add TreeViewItems" Grid.Column="3" Grid.ColumnSpan="2" Click="btnAddChild_Click"/>
                    <TextBox HorizontalAlignment="Center" x:Name="txtItemCount" VerticalAlignment=" Center" Grid.Column="2" Text="0" TextWrapping="Wrap"/>
                <Label HorizontalAlignment="Right" VerticalAlignment="Center" Content=" Number of Child Items" Grid.Column="1"/>
            </Grid>
</Grid>



Add this in logic code:

private void btnAddChild_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            int LoopCount = Convert.ToInt32(this.txtItemCount.Text);
            //Make sure we have at least 1 to add
            if(LoopCount == 0)
            {
                this.txtItemCount.Text = "1";
                LoopCount = 1;
            }
            //Create a new TreeItem to add to the control
            TreeViewItem TempItem = new TreeViewItem();
            //Create a single Header that will show the time it was created
            TreeHeader MyHeader = new TreeHeader();
            MyHeader.SetLabelContent("Item added: " + DateTime.Now.ToLongDateString() + " " + DateTime.Now.ToLongTimeString());
            MyHeader.MinWidth = 300;
            //Add the header to the control before we start to add child items
            TempItem.Header = MyHeader;
            //Add child elements
            for (int LoopValue = 0; LoopValue < LoopCount ; LoopValue++)
            {
                //Create and add an item to our TreeViewItem
                TreeItem TempTreeItem = new TreeItem();
                TempTreeItem.SetLabelValue(Convert.ToString(LoopValue + 1) + " of "+ LoopCount.ToString() + " children");
                TempTreeItem.MinWidth = 500;
                TempItem.Items.Add(TempTreeItem);
                TempTreeItem = null;
            }
            //Add our item to the TreeView control. If an item or header is selected,
            //add our item as a child of it
            if (this.tvMain.SelectedItem != null)
            {
                if (this.tvMain.SelectedItem is TreeItem)
                {
                    TreeViewItem SelectedItem = (this.tvMain.SelectedItem as TreeItem).Parent as TreeViewItem ;
                    this.tvMain.BeginInit();
                    SelectedItem.Items.Add(TempItem);
                    this.tvMain.EndInit();
                }
                else if (this.tvMain.SelectedItem is TreeHeader )
                {
                    TreeViewItem SelectedItem = (this.tvMain.SelectedItem as TreeHeader).Parent as TreeViewItem;
                    this.tvMain.BeginInit();
                    SelectedItem.Items.Add(TempItem);
                    this.tvMain.EndInit();
                }
                else if (this.tvMain.SelectedItem is TreeViewItem )
                {
                    TreeViewItem SelectedItem = this.tvMain.SelectedItem as TreeViewItem;
                    this.tvMain.BeginInit();
                    SelectedItem.Items.Add(TempItem);
                    this.tvMain.EndInit();
                }
            }
            else
            {
                this.tvMain.BeginInit();
                this.tvMain.Items.Add(TempItem);
                this.tvMain.EndInit();
            }
           
        }



-------
Mohamed Sabry

这篇关于Treeview数据和图标......的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！