チェックボックス、アイコン付きのWPF TreeView

Wpf Treeview With Checkbox

WPFの実際のプロジェクト開発では、CheckBoxを使用したTreeViewがよく使用されます。 Microsoftはこの関数をWPFTreeViewで提供していませんが、Microsoftは強力なItemTemplateテンプレート関数とカスタムスタイルをWPFで提供しているので、自分で作成できます。そのようなコントロールの1つは、自分で使用するためのものです。

これは私が自分で書いた単純なものです。

まず、TreeViewのデータモデルを記述し、INotifyPropertyChangedインターフェイスを実装します。プロパティ値がクライアント（通常はバインディングを実行するクライアント）に変更されたという通知を発行するために使用されます。プロパティが変更されると、対応するUIのパフォーマンスも変更されます。メインフィールドId、Name、Icon、ToolTip、IsChecked、IsExpanded、Parent、Children

//*************************************************** // // File name (FileName) : TreeModel.cs // // Author (Author) : zsm // // CreateTime: 2013-03-18 14:23:58 // // Description: A data model for TreeView. // //*************************************************** using System using System.Collections.Generic using System.Linq using System.Text using System.ComponentModel namespace Com.FMS.Model { public class TreeModel : INotifyPropertyChanged { #region Private variable ///  /// Id value ///  private string _id ///  /// Displayed name ///  private string _name ///  /// Icon path ///  private string _icon ///  /// Selected state ///  private bool _isChecked ///  /// Folded state ///  private bool _isExpanded ///  /// Child ///  private IList _children ///  /// Parent ///  private TreeModel _parent #endregion ///  /// Construction ///  public TreeModel() { Children = new List() _isChecked = false IsExpanded = false _icon = '/Images/16_16/folder_go.png' } ///  /// Key value ///  public string Id { get { return _id } set { _id = value } } ///  /// Displayed characters ///  public string Name { get { return _name } set { _name = value } } ///  /// Icon ///  public string Icon { get { return _icon } set { _icon = value } } ///  /// Display instructions when the pointer is hovered ///  public string ToolTip { get { return String.Format('{0}-{1}', Id, Name) } } ///  /// Whether to select ///  public bool IsChecked { get { return _isChecked } set { if (value != _isChecked) { _isChecked = value NotifyPropertyChanged('IsChecked') if (_isChecked) { //If checked, the parent should also be selected if (Parent != null) { Parent.IsChecked = true } } else { //If you uncheck the subkey, you should also uncheck it. foreach (TreeModel child in Children) { child.IsChecked = false } } } } } ///  /// Whether to expand ///  public bool IsExpanded { get { return _isExpanded } set { if (value != _isExpanded) { //Folding state change _isExpanded = value NotifyPropertyChanged('IsExpanded') } } } ///  /// Parent ///  public TreeModel Parent { get { return _parent } set { _parent = value } } ///  /// Child ///  public IList Children { get { return _children } set { _children = value } } ///  /// Set the selected state of all children ///  ///  public void SetChildrenChecked(bool isChecked) { foreach (TreeModel child in Children) { child.IsChecked = IsChecked child.SetChildrenChecked(IsChecked) } } ///  /// Set all child expansion states ///  ///  public void SetChildrenExpanded(bool isExpanded) { foreach (TreeModel child in Children) { child.IsExpanded = isExpanded child.SetChildrenExpanded(isExpanded) } } ///  /// Attribute change event ///  public event PropertyChangedEventHandler PropertyChanged private void NotifyPropertyChanged(String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)) } } } }

主にTreeViewコントロール、ContextMenu右クリックメニュー項目を含むユーザーコントロールを作成します。UIコードは次のとおりです（パスは実際に応じて変更する必要があります）。

<UserControl x:Class='Com.FMS.View.UserControls.ZsmTreeView' xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' xmlns:d='http://schemas.microsoft.com/expression/blend/2008' xmlns:local='clr-namespace:Com.FMS.Model' mc:Ignorable='d' d:DesignHeight='300' d:DesignWidth='300'> <Grid> <DockPanel> <Border DockPanel.Dock='Bottom'> <StackPanel Orientation='Horizontal' ToolTip='Right has more features!'> <Image Height='16' Width='16' Source='Images/16_16/emoticon_smile.png'>Image> <Label Content='Right has more features!' Foreground='Gray'>Label> StackPanel> Border> <Border> <TreeView Name='tvZsmTree'> <TreeView.ContextMenu> <ContextMenu> <MenuItem Name='menuExpandAll' Header='All expansion' Click='menuExpandAll_Click'> <MenuItem.Icon> <Image Source='/Com.FMScomponent/Images/16_16/folder_open_arrow.png' /> MenuItem.Icon> MenuItem> <MenuItem Name='menuUnExpandAll' Header='all folded' Click='menuUnExpandAll_Click'> <MenuItem.Icon> <Image Source='/Com.FMScomponent/Images/16_16/folder_close_arrow.png' /> MenuItem.Icon> MenuItem> <MenuItem Name='menuSelectAll' Header='Select all' Click='menuSelectAll_Click'> <MenuItem.Icon> <Image Source='/Com.FMScomponent/Images/16_16/tick.png' /> MenuItem.Icon> MenuItem> <MenuItem Name='menuUnSelectAll' Header='all canceled' Click='menuUnSelectAll_Click'> <MenuItem.Icon> <Image Source='/Com.FMScomponent/Images/16_16/delete.png' /> MenuItem.Icon> MenuItem> ContextMenu> TreeView.ContextMenu> <TreeView.ItemContainerStyle> <Style TargetType='TreeViewItem'> <Setter Property='IsExpanded' Value='{Binding IsExpanded, Mode=TwoWay}'>Setter> <EventSetter Event='TreeViewItem.PreviewMouseRightButtonDown' Handler='TreeViewItem_PreviewMouseRightButtonDown'/> Style> TreeView.ItemContainerStyle> <TreeView.ItemTemplate> <HierarchicalDataTemplate DataType='{x:Type local:TreeModel}' ItemsSource='{Binding Children}'> <StackPanel Margin='-2,0,0,0' Orientation='Horizontal' x:Name='staTree'> <CheckBox ToolTip='{Binding ToolTip}' FontSize='14' FontFamily='Microsoft Yahei' Tag='{Binding Children}' IsChecked='{Binding IsChecked, Mode=TwoWay}'> <StackPanel Orientation='Horizontal'> <Image VerticalAlignment='Center' Source='{Binding Icon}' >Image> <TextBlock Text='{Binding Name}'>TextBlock> StackPanel> <CheckBox.ContextMenu> <ContextMenu> <MenuItem Name='menuSelectAllChild' Header='All selected items' Click='menuSelectAllChild_Click'> <MenuItem.Icon> <Image Source='/Com.FMScomponent/Images/16_16/tick.png' /> MenuItem.Icon> MenuItem> ContextMenu> CheckBox.ContextMenu> CheckBox> StackPanel> <HierarchicalDataTemplate.Triggers> <DataTrigger Binding='{Binding IsChecked}' Value='true'> <Setter TargetName='staTree' Property='Background' Value='White'/> DataTrigger> HierarchicalDataTemplate.Triggers> HierarchicalDataTemplate> TreeView.ItemTemplate> TreeView> Border> DockPanel> Grid> UserControl>

インタラクションロジックのコードには、主にコントロールデータItemsSourceDataプロパティがあり、対応するIdアイテムを選択された状態SetCheckedByIdに設定し、階層関係を無視し、選択されたアイテムCheckedItemsIgnoreRelationなどを取得し、選択されたすべてのアイテムメニューを右クリックします。すべて選択、すべてチェックを外す、折りたたむ、すべて展開するなど。インタラクティブなロジックコードは次のとおりです。

//*************************************************** // // File name (FileName): ZsmTreeView.xaml.cs // // Author (Author) : zsm // // CreateTime: 2013-03-15 16:52:40 // // Description: Interactive logic code for the TreeView control with CheckBox // //*************************************************** using System using System.Collections.Generic using System.Linq using System.Text 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 Com.FMS.View.UserControls { ///  /// Interaction logic of ZsmTreeView.xaml ///  public partial class ZsmTreeView : UserControl { #region Private variable attribute ///  /// Control data ///  private IList _itemsSourceData #endregion ///  /// Construction ///  public ZsmTreeView() { InitializeComponent() } ///  /// Control data ///  public IList ItemsSourceData { get { return _itemsSourceData } set { _itemsSourceData = value tvZsmTree.ItemsSource = _itemsSourceData } } ///  /// Set the item corresponding to Id to be selected. ///  ///  ///  public int SetCheckedById(string id, IList treeList) { foreach (var tree in treeList) { if (tree.Id.Equals(id)) { tree.IsChecked = true return 1 } if (SetCheckedById(id, tree.Children) == 1) { return 1 } } return 0 } ///  /// Set the item corresponding to Id to be selected. ///  ///  ///  public int SetCheckedById(string id) { foreach (var tree in ItemsSourceData) { if (tree.Id.Equals(id)) { tree.IsChecked = true return 1 } if (SetCheckedById(id, tree.Children) == 1) { return 1 } } return 0 } ///  /// Get selected items ///  ///  public IList CheckedItemsIgnoreRelation() { return GetCheckedItemsIgnoreRelation(_itemsSourceData) } ///  /// Private method, get the selected item if the hierarchical relationship is ignored ///  ///  ///  private IList GetCheckedItemsIgnoreRelation(IList list) { IList treeList = new List() foreach (var tree in list) { if (tree.IsChecked) { treeList.Add(tree) } foreach (var child in GetCheckedItemsIgnoreRelation(tree.Children)) { treeList.Add(child) } } return treeList } ///  /// Check all child menu events ///  ///  ///  private void menuSelectAllChild_Click(object sender, RoutedEventArgs e) { if (tvZsmTree.SelectedItem != null) { Model.TreeModel tree = (Model.TreeModel)tvZsmTree.SelectedItem tree.IsChecked = true tree.SetChildrenChecked(true) } } ///  /// Expand menu events all ///  ///  ///  private void menuExpandAll_Click(object sender, RoutedEventArgs e) { foreach (Model.TreeModel tree in tvZsmTree.ItemsSource) { tree.IsExpanded = true tree.SetChildrenExpanded(true) } } ///  /// Full collapse menu event ///  ///  ///  private void menuUnExpandAll_Click(object sender, RoutedEventArgs e) { foreach (Model.TreeModel tree in tvZsmTree.ItemsSource) { tree.IsExpanded = false tree.SetChildrenExpanded(false) } } ///  /// All selected events ///  ///  ///  private void menuSelectAll_Click(object sender, RoutedEventArgs e) { foreach (Model.TreeModel tree in tvZsmTree.ItemsSource) { tree.IsChecked = true tree.SetChildrenChecked(true) } } ///  /// Uncheck all ///  ///  ///  private void menuUnSelectAll_Click(object sender, RoutedEventArgs e) { foreach (Model.TreeModel tree in tvZsmTree.ItemsSource) { tree.IsChecked = false tree.SetChildrenChecked(false) } } ///  /// Right mouse button event ///  ///  ///  private void TreeViewItem_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e) { TreeViewItem item = VisualUpwardSearch(e.OriginalSource as DependencyObject) as TreeViewItem if (item != null) { item.Focus() e.Handled = true } } static DependencyObject VisualUpwardSearch(DependencyObject source) { while (source != null && source.GetType() != typeof(T)) source = VisualTreeHelper.GetParent(source) return source } } }

コントロールを使用する場合は、xamlで名前付きコントロールを導入する必要があります（実際の導入による）

xmlns:my='clr-namespace:Com.FMS.View.UserControls'

コントロールに値を割り当てます：

ztvModule.ItemsSourceData = treeList//treeList is of type IList

表示効果：

実際、書き込みの時間を待って、合計で多機能を完了することもできます。

http://www.cnblogs.com/zsmhhfy/archive/2013/03/18/2965755.html

転載：https：//www.cnblogs.com/ExMan/p/3784921.html