Master detail DataGrid example with code behind

WPF > Controls > ItemControls > DataGrid > Master detail 2 grids

In this example we will use two DataGrid controls to display master detail data from code behind using SelectionChanged event.

XAML:

<Window x:Class="WpfApplication2.MainWindow"

        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"

        Title="MainWindow" Height="447.91" Width="514.871" Loaded="Window_Loaded">

    <Grid Margin="0,0,2,81">

        <DataGrid x:Name="dg" HorizontalAlignment="Left" VerticalAlignment="Top" Height="196" Width="507" SelectionChanged="dg_SelectionChanged"/>

        <DataGrid x:Name="dg1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="214" Width="505" Margin="0,201,0,-78"/>

    </Grid>

</Window>

C# Code:

namespace WpfApplication2

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    ///

    public class Skill

    {

        public int Years { get; set; }

        public string Name { get; set; }

    }

    public class Person

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Position { get; set; }

        public List<Skill> SkillList { get; set; } 

    }

    public class Persons : ObservableCollection<Person>

    {

        public Persons()

        {

            Add(new Person() { Id = 1, Name = "Person1", Position = "Manager", SkillList = new List<Skill>() });

            Add(new Person() { Id = 2, Name = "Person2", Position = "Programmer", SkillList = new List<Skill>() });

            Add(new Person() { Id = 3, Name = "Person3", Position = "Programmer", SkillList = new List<Skill>() });

            Add(new Person() { Id = 4, Name = "Person4", Position = "Admin", SkillList = new List<Skill>() });

            Add(new Person() { Id = 5, Name = "Person5", Position = "Tester", SkillList = new List<Skill>() });

        }

    }

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        private void Window_Loaded(object sender, RoutedEventArgs e)

         {

            Persons pList = new Persons();

            pList[1].SkillList.Add(new Skill() {Years = 5, Name="C++"});

            pList[1].SkillList.Add(new Skill() {Years = 15, Name = "Visual Basic" });

            dg.ItemsSource = pList;

        }

        private void dg_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            dg1.ItemsSource = ((Person)e.AddedItems[0]).SkillList;

        }

    }

}



DataGridRow WPF

WPF > DataGrid > DataGridRow

DataGridRow represents a single data item in a bound data source. Each row contains one cell per column and each cell displays a single value in the bound data item.

• Style

Programmatically fill TreeView items WPF

WPF > ItemsControl > TreeView > Add items to TreeView

Example of programmatically add items to TreeView control in WPF.

XAML:

        <TreeView x:Name="tvMain"  Grid.Column="0">

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

 

Code:

 

  // fill Tree

            TreeViewItem tviSet = new TreeViewItem() { Header = "Settings"  };

            TreeViewItem tviProd = new TreeViewItem() { Header = "Products" };
            tviProd.Tag = "Products";

            TreeViewItem tviComp = new TreeViewItem() { Header = "Companies" };

            tviComp.Tag = "Companies";

            tviSet.Items.Add(tviProd);

            tviSet.Items.Add(tviComp);
            tviSet.IsExpanded = true;

            tvMain.Items.Add(tviSet);