Skip to content

Commit

Permalink
feat: Neo-TreeListView
Browse files Browse the repository at this point in the history
  • Loading branch information
@emako
emako committed Sep 23, 2024
1 parent 770866e commit 66999fe
Show file tree
Hide file tree
Showing 6 changed files with 505 additions and 231 deletions.
201 changes: 198 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,13 +169,208 @@ Similar to WPF UI.
> TreeListView is a better way to display hierarchical data.
```xaml
<ui:TreeListView Model="{Binding TreeTestModel}">
<ui:TreeListView ItemsSource="{Binding StaffList}">
<ui:TreeListView.Columns>
<GridViewColumnCollection>
<ui:GridViewColumn Width="400" Header="Name">
<ui:GridViewColumn.CellTemplate>
<DataTemplate>
<ui:TreeRowExpander Content="{Binding Name}" />
</DataTemplate>
</ui:GridViewColumn.CellTemplate>
</ui:GridViewColumn>
<ui:GridViewColumn
Width="80"
DisplayMemberBinding="{Binding Age}"
Header="Age" />
<ui:GridViewColumn
Width="80"
DisplayMemberBinding="{Binding Sex}"
Header="Sex" />
<ui:GridViewColumn
Width="100"
DisplayMemberBinding="{Binding Duty}"
Header="Duty" />
<ui:GridViewColumn Width="250" Header="IsChecked">
<ui:GridViewColumn.CellTemplate>
<DataTemplate>
<ui:ToggleSwitch IsChecked="{Binding IsChecked}" />
</DataTemplate>
</ui:GridViewColumn.CellTemplate>
</ui:GridViewColumn>
</GridViewColumnCollection>
</ui:TreeListView.Columns>
<ui:TreeListView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding StaffList}" />
</ui:TreeListView.ItemTemplate>
</ui:TreeListView>
```

```c#
public partial class ViewModel : ObservableObject
{
[ObservableProperty]
private ObservableCollection<Staff> staffList = [];

public void InitNode1Value()
{
Staff staff = new Staff()
{
Name = "Alice",
Age = 30,
Sex = "Male",
Duty = "Manager",
IsExpanded = true
};
Staff staff2 = new Staff()
{
Name = "Alice1",
Age = 21,
Sex = "Male",
Duty = "Normal",
IsExpanded = true
};
Staff staff3 = new Staff()
{
Name = "Alice11",
Age = 21,
Sex = "Male",
Duty = "Normal"
};
staff2.StaffList.Add(staff3);
staff3 = new Staff()
{
Name = "Alice22",
Age = 21,
Sex = "Female",
Duty = "Normal"
};
staff2.StaffList.Add(staff3);
staff.StaffList.Add(staff2);
staff2 = new Staff()
{
Name = "Alice2",
Age = 22,
Sex = "Female",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
staff2 = new Staff()
{
Name = "Alice3",
Age = 23,
Sex = "Female",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
StaffList.Add(staff);

staff = new Staff()
{
Name = "Bob",
Age = 31,
Sex = "Male",
Duty = "CEO"
};
staff2 = new Staff()
{
Name = "Bob1",
Age = 24,
Sex = "Female",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
staff2 = new Staff()
{
Name = "Bob2",
Age = 25,
Sex = "Female",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
staff2 = new Staff()
{
Name = "Bob3",
Age = 26,
Sex = "Male",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
StaffList.Add(staff);

staff = new Staff()
{
Name = "Cyber",
Age = 32,
Sex = "Female",
Duty = "Leader"
};
staff2 = new Staff()
{
Name = "Cyber1",
Age = 27,
Sex = "Female",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
staff2 = new Staff()
{
Name = "Cyber2",
Age = 28,
Sex = "Female",
Duty = "Normal"
};
staff.StaffList.Add(staff2);
StaffList.Add(staff);
}
}

public partial class Staff : ObservableObject
{
[ObservableProperty]
private string name = null!;

[ObservableProperty]
private int age;

[ObservableProperty]
private string sex = null!;

[ObservableProperty]
private string duty = null!;

[ObservableProperty]
private bool isChecked = true;

[ObservableProperty]
private bool isSelected;

[ObservableProperty]
private bool isExpanded;

[ObservableProperty]
private ObservableCollection<Staff> staffList = [];

public Staff()
{
IsSelected = false;
IsExpanded = false;
}
}
```

- **TreeModelListView**

> TreeModelListView is a fast tree list view used `IEnumerable` and `ITreeModel` to display data but CURD is not fully supported.
```xaml
<ui:TreeModelListView Model="{Binding TreeTestModel}">
<ui:GridView>
<ui:GridView.Columns>
<ui:GridViewColumn Width="400" Header="Column1">
<ui:GridViewColumn.CellTemplate>
<DataTemplate>
<ui:TreeRowExpander Content="{Binding Column1}" />
<ui:TreeModelRowExpander Content="{Binding Column1}" />
</DataTemplate>
</ui:GridViewColumn.CellTemplate>
</ui:GridViewColumn>
Expand All @@ -196,7 +391,7 @@ Similar to WPF UI.
</ui:GridViewColumn>
</ui:GridView.Columns>
</ui:GridView>
</ui:TreeListView>
</ui:TreeModelListView>
```

```c#
Expand Down
79 changes: 72 additions & 7 deletions src/Wpf.Ui.Test/MainWindow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -630,7 +630,7 @@
Margin="0,8,0,0"
FontSize="14"
FontWeight="Black"
Text="TreeListView" />
Text="TreeModelListView" />
<StackPanel Margin="0,8,0,0">
<!--<ui:TreeModelListView
Height="300"
Expand Down Expand Up @@ -712,7 +712,10 @@
</ui:GridView.Columns>
</ui:GridView>
</ui:TreeModelListView>
<StackPanel Margin="0,8,0,0" Orientation="Horizontal">
<StackPanel
Margin="0,8,0,0"
Orientation="Horizontal"
Visibility="Collapsed">
<Button Command="{Binding AddTreeTestModelCommand}" Content="Add Row" />
<Button
Margin="8,0,0,0"
Expand All @@ -727,16 +730,25 @@
Command="{Binding ClearTreeTestModelCommand}"
Content="Clear Row" />
</StackPanel>
<TextBlock
MinWidth="120"
Margin="0,8,0,0"
FontSize="14"
FontWeight="Black"
Text="TreeListView" />
<ui:TreeListView
Height="200"
Height="220"
Margin="0,8,90,0"
ItemsSource="{Binding StaffList}">
<ui:TreeListView.Columns>
<GridViewColumnCollection>
<ui:GridViewColumn
Width="150"
CellTemplate="{StaticResource CellTemplate_Name}"
Header="Name" />
<ui:GridViewColumn Width="400" Header="Name">
<ui:GridViewColumn.CellTemplate>
<DataTemplate>
<ui:TreeRowExpander Content="{Binding Name}" />
</DataTemplate>
</ui:GridViewColumn.CellTemplate>
</ui:GridViewColumn>
<ui:GridViewColumn
Width="80"
DisplayMemberBinding="{Binding Age}"
Expand All @@ -762,6 +774,59 @@
<HierarchicalDataTemplate ItemsSource="{Binding StaffList}" />
</ui:TreeListView.ItemTemplate>
</ui:TreeListView>
<StackPanel Margin="0,8,0,0" Orientation="Horizontal">
<Button Command="{Binding AddNode1ValueCommand}" Content="Add Node" />
<Button
Margin="8,0,0,0"
Command="{Binding ChangeNode1ValueCommand}"
Content="Change Node1" />
<Button
Margin="8,0,0,0"
Command="{Binding ChangeNode2ValueCommand}"
Content="Change Node2" />
</StackPanel>
<TextBlock
MinWidth="120"
Margin="0,8,0,0"
FontSize="14"
FontWeight="Black"
Text="ListView" />
<ui:ListView Height="180" Margin="0,8,90,0">
<ui:ListView.View>
<ui:GridView>
<GridViewColumn Width="150" Header="Name" />
<GridViewColumn Width="50" Header="Age" />
<GridViewColumn Width="150" Header="Country" />
</ui:GridView>
</ui:ListView.View>
<ui:ListViewItem>
<ui:ListViewItem.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Width="150" Text="John Doe" />
<TextBlock Width="50" Text="30" />
<TextBlock Width="150" Text="USA" />
</StackPanel>
</ui:ListViewItem.Content>
</ui:ListViewItem>
<ui:ListViewItem>
<ui:ListViewItem.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Width="150" Text="Jane Smith" />
<TextBlock Width="50" Text="28" />
<TextBlock Width="150" Text="UK" />
</StackPanel>
</ui:ListViewItem.Content>
</ui:ListViewItem>
<ui:ListViewItem>
<ui:ListViewItem.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Width="150" Text="Wang Wei" />
<TextBlock Width="50" Text="35" />
<TextBlock Width="150" Text="China" />
</StackPanel>
</ui:ListViewItem.Content>
</ui:ListViewItem>
</ui:ListView>
</StackPanel>
</StackPanel>
<StackPanel>
Expand Down
Loading

0 comments on commit 66999fe

Please sign in to comment.