Treeview data and icons... RRS feed

  • Question

  • 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 ...

    Since it is a prototype I can also add each item individually but how do I add icons/images to a treeview item?
    Tuesday, February 23, 2010 10:17 AM

All replies

  • 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">
                        <LinearGradientBrush EndPoint="0.5,1.203" StartPoint="0.5,-0.203">
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                <GradientStop Color="#FF005FC4" Offset="0"/>
                <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">
                                <ColumnDefinition Width="0.478*"/>
                                <ColumnDefinition Width="0.23*"/>
                                <ColumnDefinition Width="0.058*"/>
                                <ColumnDefinition Width="0.109*"/>
                                <ColumnDefinition Width="0.106*"/>
                                <ColumnDefinition Width="0.019*"/>
                        <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"/>

    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;
                    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 ;
                    else if (this.tvMain.SelectedItem is TreeHeader )
                        TreeViewItem SelectedItem = (this.tvMain.SelectedItem as TreeHeader).Parent as TreeViewItem;
                    else if (this.tvMain.SelectedItem is TreeViewItem )
                        TreeViewItem SelectedItem = this.tvMain.SelectedItem as TreeViewItem;

    Mohamed Sabry
    • Proposed as answer by Mohamed Sabry Tuesday, February 23, 2010 11:19 AM
    Tuesday, February 23, 2010 11:19 AM
  • Mmmm, how about icons?  I wonder though why is seems so complicated - code required? - to add some data to a SketchFlow prototype.
    Tuesday, February 23, 2010 1:02 PM
  • GClaes
    I'm sorry but I don't understand what you mean with Icons?
    and the example seems that because contain other controls like ProgressBar, you can skip any part you don't concern

    Mohamed Sabry

    Tuesday, February 23, 2010 2:20 PM
  • My question was how to add tree-view icons, like folder icons, or ...
    Tuesday, February 23, 2010 2:53 PM
  • I tried but didn't reach to any result, I will try again soon.

    Mohamed Sabry
    Tuesday, February 23, 2010 3:12 PM
  • Why don't u try ItemTemplate
    No Risk No Fun
    Monday, July 26, 2010 12:54 PM
  • Hi GClaes,

    The quickest example of using treeview is from blend, on the Data panel, select "New sample data ..", from the generated sample data, slect "Collection" and click the drop down menu, select "Convert to Hierarchical Collection", then drag the coverted tree collection to the design pane. Blend would generate a treeview and bind the treeview to the tree collection. From there you can see how the XAML should be, and modify the itemTemplate to what you need.

    Thanks, Harry [MSFT]
    Tuesday, July 27, 2010 12:47 AM
  • Hi, Any ideas on how to create following structure with tree view

                          - Home Corporate


                          - Leave

                                       Apply Leave

    Thanks Rashmi

    • Edited by rush1956 Friday, December 7, 2012 7:44 AM
    Friday, December 7, 2012 7:44 AM