|
1 | | -# How to work with check boxes in bound mode in wpf treeview? |
2 | | -This repository describes how to work with check boxes in bound mode in wpf treeview |
| 1 | +# How to work with check boxes in bound mode in WPF TreeView |
| 2 | + |
| 3 | +This repository describes how to work with check boxes in bound mode in [WPF TreeView](https://www.syncfusion.com/wpf-controls/treeview) (SfTreeView). |
| 4 | + |
| 5 | +When you are populating treeview nodes from [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_ItemsSource), then you can get or set the checked items by using [CheckedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_CheckedItems) property. |
| 6 | + |
| 7 | +SfTreeView supports to check multiple items through binding the `CheckedItems` property from view model with `ObservableCollection<object>` type. |
| 8 | + |
| 9 | +#### XAML |
| 10 | + |
| 11 | +``` xml |
| 12 | +<syncfusion:SfTreeView |
| 13 | + x:Name="sfTreeView" |
| 14 | + Margin="10" |
| 15 | + BorderThickness="1" |
| 16 | + AutoExpandMode="AllNodes" |
| 17 | + BorderBrush="LightGray" |
| 18 | + AllowDragging="True" |
| 19 | + SelectionMode="Multiple" |
| 20 | + CheckBoxMode ="Recursive" |
| 21 | + CheckedItems="{Binding CheckedStates}" |
| 22 | + ChildPropertyName="Models" |
| 23 | + ExpandActionTrigger="Node" |
| 24 | + ItemTemplateDataContextType="Node" |
| 25 | + FocusVisualStyle="{x:Null}" |
| 26 | + IsAnimationEnabled="True" |
| 27 | + ItemsSource="{Binding Items}"> |
| 28 | +<syncfusion:SfTreeView.ItemTemplate> |
| 29 | + <DataTemplate> |
| 30 | + <Grid> |
| 31 | + <CheckBox x:Name="CheckBox" FocusVisualStyle="{x:Null}" |
| 32 | + IsChecked="{Binding IsChecked, Mode=TwoWay}"/> |
| 33 | + <TextBlock FontSize="12" VerticalAlignment="Center" Text="{Binding Content.State}" Margin="25,0,0,0"/> |
| 34 | + </Grid> |
| 35 | + </DataTemplate> |
| 36 | + </syncfusion:SfTreeView.ItemTemplate> |
| 37 | +</syncfusion:SfTreeView> |
| 38 | +``` |
| 39 | + |
| 40 | +#### C# |
| 41 | + |
| 42 | +``` csharp |
| 43 | +public class ViewModel : NotificationObject |
| 44 | +{ |
| 45 | + public ObservableCollection<Model> Items { get; set; } |
| 46 | + |
| 47 | + private ObservableCollection<object> checkedStates; |
| 48 | + |
| 49 | + public ObservableCollection<object> CheckedStates |
| 50 | + { |
| 51 | + get { return checkedStates; } |
| 52 | + set { checkedStates = value; } |
| 53 | + } |
| 54 | + |
| 55 | + public ViewModel() |
| 56 | + { |
| 57 | + Items = new ObservableCollection<Model>(); |
| 58 | + checkedStates = new ObservableCollection<object>(); |
| 59 | + |
| 60 | + var country1 = new Model { State = "Australia" }; |
| 61 | + var country2 = new Model { State = "Brazil" }; |
| 62 | + var country3 = new Model { State = "China" }; |
| 63 | + var country4 = new Model { State = "France" }; |
| 64 | + |
| 65 | + var aus_state1 = new Model { State = "New South Wales" }; |
| 66 | + var aus_state2 = new Model { State = "Victoria" }; |
| 67 | + var aus_state3 = new Model { State = "South Autralia" }; |
| 68 | + var aus_state4 = new Model { State = "Western Australia" }; |
| 69 | + |
| 70 | + var brazil_state1 = new Model { State = "Parana" }; |
| 71 | + var brazil_state2 = new Model { State = "Ceara" }; |
| 72 | + var brazil_state3 = new Model { State = "Acre" }; |
| 73 | + |
| 74 | + var china_state1 = new Model { State = "Guangzhou" }; |
| 75 | + var china_state2 = new Model { State = "Shanghai" }; |
| 76 | + var china_state3 = new Model { State = "Beijing" }; |
| 77 | + var china_state4 = new Model { State = "Shantou" }; |
| 78 | + |
| 79 | + var france_state1 = new Model { State = "Pays de la Loire" }; |
| 80 | + var france_state2 = new Model { State = "Aquitaine" }; |
| 81 | + var france_state3 = new Model { State = "Brittany" }; |
| 82 | + var france_state4 = new Model { State = "Lorraine" }; |
| 83 | + |
| 84 | + country1.Models.Add(aus_state1); |
| 85 | + country1.Models.Add(aus_state2); |
| 86 | + country1.Models.Add(aus_state3); |
| 87 | + country1.Models.Add(aus_state4); |
| 88 | + |
| 89 | + country2.Models.Add(brazil_state1); |
| 90 | + country2.Models.Add(brazil_state2); |
| 91 | + country2.Models.Add(brazil_state3); |
| 92 | + |
| 93 | + country3.Models.Add(china_state1); |
| 94 | + country3.Models.Add(china_state2); |
| 95 | + country3.Models.Add(china_state3); |
| 96 | + country3.Models.Add(china_state4); |
| 97 | + |
| 98 | + country4.Models.Add(france_state1); |
| 99 | + country4.Models.Add(france_state2); |
| 100 | + country4.Models.Add(france_state3); |
| 101 | + country4.Models.Add(france_state4); |
| 102 | + |
| 103 | + Items.Add(country1); |
| 104 | + Items.Add(country2); |
| 105 | + Items.Add(country3); |
| 106 | + Items.Add(country4); |
| 107 | + |
| 108 | + checkedStates.Add(aus_state1); |
| 109 | + checkedStates.Add(aus_state2); |
| 110 | + checkedStates.Add(country2); |
| 111 | + checkedStates.Add(country3); |
| 112 | + } |
| 113 | +} |
| 114 | +``` |
0 commit comments