如何在 TreeView 上添加复选框

Question

I'm new to C# and WPF and I'd like to build an app that can select folders and files and get the path. I was able to show the folder structure and add a checkbox by following the instruction from this link .

But I'm not sure how can I achieve this.

Here's my code below.

WPF

<TreeView Name="MyTreeView" Margin="249,31,20,24" Background="{x:Null}" BorderThickness="0,0,0,0" Cursor="Arrow">
                        <TreeView.Resources>
                            <Style TargetType="{x:Type TreeViewItem}">
                                <Setter Property="HeaderTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <CheckBox Name="MyCheckBox"/>
                                                    <Image Name="img"  Width="20" Height="20" Stretch="Fill"
                                                    Source="{Binding RelativeSource={RelativeSource 
                                                    Mode=FindAncestor,
                                                    AncestorType={x:Type TreeViewItem}},
                                                    Path=Tag,
                                                    Converter={x:Static local:TagToImageConverter.Instance}}"/>          
                                                <TextBlock Text="{Binding}"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </TreeView.Resources>
                    </TreeView>

C#

// Get users' folders
    private void GetUsersFolder_Loaded(object sender, RoutedEventArgs e)
    {
        foreach (string s in Directory.GetDirectories("C:\\Users") )
        {
            if (!s.Contains("All Users") && !s.Contains("Default") && !s.Contains("Default User") && !s.Contains("Public"))
            {
                TreeViewItem user_folders = new TreeViewItem();
                user_folders.Header = s.Substring(s.LastIndexOf("\\") + 1);
                user_folders.Tag = new object[] { PrjRootPath+"icons\\mainpage\\folder.png", s };
                user_folders.FontWeight = FontWeights.Normal;
                user_folders.FontSize = 14;
                user_folders.Items.Add(dummyNode);
                user_folders.Expanded += new RoutedEventHandler(Userfolders_Expanded);
                MyTreeView.Items.Add(user_folders);
            }
        }
    }

    // Get folders inside user's folder
    void Userfolders_Expanded(object sender, RoutedEventArgs e)
    {
        TreeViewItem item = (TreeViewItem)sender;
        if (item.Items.Count == 1 && item.Items[0] == dummyNode)
        {
            item.Items.Clear();
            try
            {
                foreach (string s in Directory.GetDirectories(((Object[])item.Tag)[1].ToString()))
                {
                    if (s.Contains("Desktop") ||
                        s.Contains("Documents") ||
                        s.Contains("Downloads") ||
                        s.Contains("Pictures") ||
                        s.Contains("Contacts") ||
                        s.Contains("Videos"))
                    {
                        TreeViewItem subitem = new TreeViewItem();
                        subitem.Header = s.Substring(s.LastIndexOf("\\") + 1);
                        subitem.Tag = new object[] { PrjRootPath + "icons\\mainpage\\folder.png", s };
                        subitem.FontWeight = FontWeights.Normal;
                        subitem.Items.Add(dummyNode);
                        subitem.Expanded += new RoutedEventHandler(InsideUserfoldersFiles_Expanded);
                        item.Items.Add(subitem);
                    }
                }
            }
            catch (Exception e1) { MessageBox.Show(e1.Message + " " + e1.InnerException);  }
        }
    }

    // Get folders and files inside the folders of user's folder
    void InsideUserfoldersFiles_Expanded(object sender, RoutedEventArgs e)
    {
        TreeViewItem item = (TreeViewItem)sender;
        if (item.Items.Count == 1 && item.Items[0] == dummyNode)
        {
            item.Items.Clear();
            try
            {
                foreach (string s in Directory.GetDirectories(((Object[])item.Tag)[1].ToString()))
                {
                        TreeViewItem subitem = new TreeViewItem();
                        subitem.Header = s.Substring(s.LastIndexOf("\\") + 1);
                        subitem.Tag = new object[] { PrjRootPath + "icons\\mainpage\\folder.png", s };
                        subitem.FontWeight = FontWeights.Normal;
                        subitem.Items.Add(dummyNode);
                        subitem.Expanded += new RoutedEventHandler(InsideUserfoldersFiles_Expanded);
                        item.Items.Add(subitem);
                }

                foreach (string s in Directory.GetFiles(((Object[])item.Tag)[1].ToString()))
                {
                    string f_extention = s.Substring(s.LastIndexOf(".") + 1);
                    
                    if (f_extention != "ini" && f_extention != "lnk")
                    {
                        String f_type = PrjRootPath + "icons\\mainpage\\file.png";
                        if (s.Contains(".csv") ||
                            s.Contains(".xlsx") ||
                            s.Contains(".xlsm") ||
                            s.Contains(".xls"))
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\excel.png";
                        }
                        else if (s.Contains(".docx") ||
                            s.Contains(".doc") ||
                            s.Contains(".docm") ||
                            s.Contains(".dotm"))
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\word.png";
                        }
                        else if (s.Contains(".pptx") ||
                            s.Contains(".pptm") ||
                            s.Contains(".ppt") ||
                            s.Contains(".potm"))
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\powerpoint.png";
                        }
                        else if (s.Contains(".msg"))
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\outlook.png";
                        }
                        else if (s.Contains(".pdf"))
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\pdf.png";
                        }
                        else if (s.Contains(".png"))
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\image.png";
                        }
                        else
                        {
                            f_type = PrjRootPath + "icons\\mainpage\\file.png";
                        }

                        TreeViewItem subitem = new TreeViewItem();
                        subitem.Header = s.Substring(s.LastIndexOf("\\") + 1);
                        subitem.Tag = new object[] { f_type, s };
                        subitem.FontWeight = FontWeights.Normal;
                        item.Items.Add(subitem);
                    } 
                }
            }
            catch (Exception e2) { MessageBox.Show(e2.Message + " " + e2.InnerException); }
        }
    }

Can you guys please send me some examples? Thank you so much!

Answer 1

First things first, you're not currently using WPF in the way in which it was designed to be used. Specifically, you're creating your tree elements manually instead of using data binding. This has come back to bite you now, and it will only get worse if you continue down the path you're on.

Either way, what you need to do here is template out the checkbox control so that you can change the tick graphic. If you add a CheckBox anywhere in your XAML code, place the cursor over it and then in the "Properties" panel on the right select Miscellaneous -> Template -> Convert to New Resource, you'll get a fully expanded CheckBox template (eg "CheckBoxTemplate1") which you can then assign to the CheckBox in your TreeView data template:

<StackPanel Orientation="Horizontal">
    <CheckBox Name="MyCheckBox" Template="{DynamicResource CheckBoxTemplate1}"/>

Looking at the template itself, you'll see all the bits responsible for its graphical appearence, including this:

<Grid x:Name="markGrid">
    <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
    <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>

The "optionMark" element is responsible for the tick, so you can turn it into rectangle by simply changing the path markup:

<Path x:Name="optionMark" Data="M 0,0L 10,0L 10,10L 0,10L 0,0 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>

Result:

Now it seems you only want this to be applied to folders, not files, and this is where it gets tricky. Your template code needs a way of distinguishing between the two types of data you're passing it (ie folders vs files). The only place to add this is as a third element in your subitem.Tag array...which is already getting pretty messy now...and use a DataTemplate to select which path to render ie something like this:

<Path x:Name="optionMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None">
    <Path.Style>
        <Style TargetType="Path">
            <Setter Property="Data" Value="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z" />
            <Style.Triggers>
                <DataTrigger Binding="{RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=Tag[2]}" Value="True">
                    <Setter Property="Data" Value="M 0,0L 10,0L 10,10L 0,10L 0,0 Z" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>

Don't take that DataTrigger binding as verbatim btw, I haven't tested it, but you get the idea...you have to use an element in your tag to tell the Path which data to use.

There are other ways to do this, eg when you create your TreeViewItem you can assign it the new ControlTemplate there, which you'll have to load from your resources block. Honestly, though, this is only going to get worse. Your best option, IMO, is to get that DataTrigger out of the template and use TreeView in the way it was meant to be used ie create data structures for each type of object you're trying to draw:

public FolderViewModel[] Items { get; } = {
    new FolderViewModel(), new FolderViewModel(), new FolderViewModel(),
};

public class FolderViewModel : FileViewModel
{
    public FileViewModel[] Children{ get; } = {
        new FileViewModel(),
        new FileViewModel(),
        new FileViewModel()
    };

    public FolderViewModel() : base("Folder") { }
}

public class FileViewModel
{
    public string Text { get; set; }

    public FileViewModel(string text = "File") => this.Text = text;
}

Then assign (or bind) Items to your top-level node, and set DataTemplate and HierarchicalDataTemplate, depending on the type of object:

<TreeView Name="MyTreeView" Margin="249,31,20,24" Background="{x:Null}" BorderThickness="0,0,0,0" Cursor="Arrow" ItemsSource="{Binding Items}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:FolderViewModel}" ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <CheckBox Name="MyCheckBox" Template="{DynamicResource CheckBoxTemplate1}"></CheckBox>
                <TextBlock Text="{Binding Text}"/>
            </StackPanel>
        </HierarchicalDataTemplate>
        <DataTemplate DataType="{x:Type local:FileViewModel}">
            <StackPanel Orientation="Horizontal">
                <CheckBox Name="MyCheckBox"></CheckBox>
                <TextBlock Text="{Binding Text}"/>
            </StackPanel>
        </DataTemplate>
    </TreeView.Resources>
</TreeView>

And that's it. Files will use the default CheckBox template with the tick while Folders will be assigned the new one and get a box.

Result:

Answer 2

The following code in xaml can help

<Window.Resources>
    <ResourceDictionary>
        <HierarchicalDataTemplate x:Key="CheckBoxItemTemplate" ItemsSource="{Binding Children, Mode=OneTime}">
            <StackPanel Orientation="Horizontal">
                <CheckBox Focusable="False" IsChecked="{Binding IsChecked}" VerticalAlignment="Center" />
                <ContentPresenter Content="{Binding Name, Mode=OneTime}" Margin="2,0" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </ResourceDictionary>
</Window.Resources>