Is there a way to select items within this custom TreeView in WPF?

Question

I am working from the answer of this question: Display treeviewitem as grid rows in wpf and I'm struggling to get the items in the tree to be selected. How do you do that with this type of code? Thanks

I've tried making the TextBlocks, TextBoxes instead and had no luck.

<TreeView x:Name="treeviewList"  ItemsSource="{Binding ManufacturerList}">
            <TreeView.ItemTemplate>
                <DataTemplate>
                    <TreeViewItem  ItemsSource="{Binding Models}">
                        <TreeViewItem.Header>
                            <Grid Width="350">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
                                    <ColumnDefinition ></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding Task}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                                <TextBlock Text="{Binding durationTotal}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="1"/>
                                <TextBlock Text="{Binding HeadNote}" HorizontalAlignment="Left"  VerticalAlignment="Center"  Grid.Column="2"/>
                            </Grid>
                        </TreeViewItem.Header>
                        <TreeViewItem.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="-20,0,0,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100"></ColumnDefinition>
                                        <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Text="{Binding SubTask}" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                                    <TextBlock Text="{Binding Duration}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="1"/>
                                    <TextBlock Text="{Binding Notes}" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="2"/>
                                </Grid>
                            </DataTemplate>
                        </TreeViewItem.ItemTemplate>
                    </TreeViewItem>
                </DataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

C# Code

public class Company
{
    public string Task { get; set; }
    public string durationTotal { get; set; }
    public string HeadNote { get; set; }
    public List<Model> Models { get; set; }
}
public class Model
{
    public string SubTask { get; set; }
    public string Duration { get; set; }
    public string Notes { get; set; }      
}

List<Company> ManufacturerList = new List<Company>();

        ManufacturerList.Add(new Company()
        {
            Task = "Coding",
            durationTotal = "4",
            HeadNote = "Coding Task",
            Models = new List<Model>()
            {new Model(){SubTask = "Write", Duration = "2", Notes ="It pays the bills" },
            new Model(){SubTask = "Compile", Duration = "1", Notes ="c# or go home" },
            new Model(){SubTask = "Test", Duration = "1", Notes ="works on my m/c" },}
        });


        ManufacturerList.Add(new Company()
        {
            Task = "Communicate",
            durationTotal = "2",
            HeadNote = "Communicate Task",
            Models = new List<Model>()
            {new Model(){SubTask = "Email", Duration = "0.5", Notes ="so much junk mail"  },
            new Model(){SubTask = "Blogs", Duration = "0.25", Notes ="blogs.msdn.com/delay" },
            new Model(){SubTask = "Twitter", Duration = "0.25", Notes ="RT:nothing to report" },}
        });

        treeviewList.ItemsSource = ManufacturerList;

Your treeviewitems seem very selectable to me [as shown in my screenshot](https://ibb.co/sKgrWDj) when i paste your code. Maybe you want to be able to select individual textblocks inside your items? In which case it'll demand rework of your xaml. Please clarify! — Corentin Pane, Nov 05 '19 at 13:31
What is it that you are trying to select? The objects themselves? The textblock control? Each of those requires a different approach. — Groger, Nov 05 '19 at 13:35
@CorentinPane I'm trying to select each row separately, for example, Write 2 It Pays the bills, but I don't need to select the headers, example, Communicate 2 Communicate Task. Thanks — JakeLRL, Nov 05 '19 at 13:59

Corentin Pane · Accepted Answer · 2019-11-05T16:01:02.253

Your elements are not selectable because they are simple TextBlocks within a DataTemplate and as such don't have any selectable behavior. For them to be selectable they would need to be of type TreeViewItem, because WPF handles selection for these.

You should not template TreeView manually like you're doing, you should instead use HierarchicalDataTemplate to let the TreeView build its collection of TreeViewItems like this:

<TreeView ItemsSource="{Binding ManufacturerList}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type wpfapp1:Company}" ItemsSource="{Binding Models}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Task}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                <TextBlock Text="{Binding durationTotal}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="1"/>
                <TextBlock Text="{Binding HeadNote}" HorizontalAlignment="Left"  VerticalAlignment="Center"  Grid.Column="2"/>
            </Grid>
        </HierarchicalDataTemplate>
        <DataTemplate DataType="{x:Type wpfapp1:Model}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"></ColumnDefinition>
                    <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding SubTask}" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                <TextBlock Text="{Binding Duration}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="1"/>
                <TextBlock Text="{Binding Notes}" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="2"/>
            </Grid>
        </DataTemplate>
    </TreeView.Resources>
</TreeView>

As for your alignment need, I hardcoded a Width="80" and a Width="100" because you already had hardcoded values, but I think it's not the way to go (cleaner solutions exist).

Thanks, that's working for me now, I would upvote the comment, but I don't have enough rep to do that unfortunately. — JakeLRL, Nov 05 '19 at 16:10

Is there a way to select items within this custom TreeView in WPF?

1 Answers1