TreeView WPF Example

WPF > Controls > ItemsControl > TreeView

TreeView displays hierarchical data in a tree structure and items can expand and collapse.
It can contain a collection of objects of any type (string, image,  panel).

Example:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="#FFF3EEEE">
    <TreeView HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517">
        <TreeViewItem Header="Teachers">
            <TreeViewItem Header="Dan"/>
            <TreeViewItem Header="John"/>
        </TreeViewItem>
        <TreeViewItem Header="Students">
            <TreeViewItem Header="Eric" IsExpanded="True">
                <StackPanel Height="102" VerticalAlignment="Top" Width="177">
                    <TabControl Height="100">
                        <TabItem Header="School">
                            <Grid Background="#FFE5E5E5">
                                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Eric Elementary School" VerticalAlignment="Top"/>
                            </Grid>
                        </TabItem>
                        <TabItem Header="Notes">
                            <Grid Background="#FFE5E5E5"/>
                        </TabItem>
                    </TabControl>
                </StackPanel>
            </TreeViewItem>
        </TreeViewItem>
    </TreeView>
</Window>



---

Other examples:

• HierarchicalDataTemplate

ListBox WPF Example

WPF > Controls > ItemsControl > ListBox

ListBox contains a list of selectable items.
It can contain a collection of objects of any type (string, image,  panel).

1. ListBox ItemsSource example:

XAML:

<Window x:Class="LIstBoxExample.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:LIstBoxExample"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <src:Cars x:Key="carsData"/>
        </Grid.Resources>
        <ListBox ItemsSource="{StaticResource carsData}"  DisplayMemberPath="Model" Margin="114,0,207,0"/>
    </Grid>
</Window>

 

Code:

using System;

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LIstBoxExample

{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public class Car

    {
        public String Model { get; set; }
        public Car(String model)
        {
            this.Model = model;  
        }
    }

    public class Cars : ObservableCollection<Car>

    {
        public Cars()
        {
            Add(new Car("Audi"));
            Add(new Car("Mercedes"));
        }
    }
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}


2. ListBox Items example:

XAML:

<ListBox x:Name="lstItems" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="171" Margin="324,10,0,0"/>

Code:

    // Add string to ListBox

            lstItems.Items.Add("String Item");

            // Add date to ListBox

            DateTime dateTime1 = DateTime.Now;
            lstItems.Items.Add(dateTime1);

            // Add a Rectangle to the ListBox.

            Rectangle rect1 = new Rectangle();
            rect1.Width = 20;
            rect1.Height = 20;
            rect1.Fill = Brushes.Red ;
            lstItems.Items.Add(rect1);

 

 

WPF DataGrid

WPF > Controls > ItemsControl > DataGrid

DataGrid control displays a collection of data in rows and columns in a customizable way.

The DataGrid is a control that can display and edit data from many different sources (SQL Server, Oracle, LINQ query, etc)

Columns can display text, controls (comboxes, images, buttons, or any content contained in a template).

DataGridTemplateColumn is used to display data defined in a template.

Events:

• LoadingRow

Examples:

• bind to ObservableCollection
• SQL Server view, edit, delete, add data
• print
• Master detail data code behind
• Filter

ItemsControl WPF

WPF > Controls > ItemsControl

ItemsControl in WPF is a type of Control that can contain multiple items like strings, objects, etc.

To specify the collection used to generate the content of your ItemsControl use  Items or the ItemsSource property.

ItemsSource:

• used to display a data collection or to bind an ItemsControl to a collection
• any type that implements IEnumerable
• when set the Items collection is set to read only 

Items:

• can have different types (ListBox can contain strings, images)
• can add items to the collection directly

Controls

• DataGrid
• ListBox
• TreeView
• ComboBox

Handle Mouse Click Event on TreeViewItem TreeView WPF

WPF > ItemsControl > TreeView > Events > MoseLeft

How to capture Left Mouse Click on TreeView item control in WPF?

Use ItemContainerStyle and EventSetter



Example:

XAML

<TreeView x:Name="tvMain>

           <TreeView.ItemContainerStyle>
             <Style TargetType="{x:Type TreeViewItem}">
                       <EventSetter Event="MouseLeftButtonUp" Handler="treeViewItem_MouseLeftButtonUp"/>
              </Style>
       </TreeView.ItemContainerStyle>
</TreeView>

c# Code:

private void treeViewItem_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
      TreeViewItem tvi = (TreeViewItem)sender;
      e.Handled = true;
}