Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add C# sample code to TreeView examples & simplify the code #1707

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add C# sample code to TreeView examples & simplify the code #1707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a5e1bb
Add C# sample code to TreeView example and simplify the code
Zakariathr22 Dec 15, 2024
8e41d1c
remove unused namespace
Zakariathr22 Dec 15, 2024
dcc7b70
add comments to clarify TreeView initialization sample code
Zakariathr22 Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified WinUIGallery/Assets/folder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 17 additions & 11 deletions WinUIGallery/ControlPages/TreeViewPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,37 +39,41 @@
</Page.Resources>

<StackPanel>
<local:ControlExample HeaderText="A simple TreeView with drag and drop support">
<local:ControlExample HeaderText="A simple TreeView with drag and drop support"
CSharpSource="TreeView\TreeViewSample1_cs.txt">
<local:ControlExample.Example>
<Grid Height="400" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<Grid Height="280" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<TreeView x:Name="sampleTreeView" MinWidth="345" MaxHeight="400" Margin="0,12,0,0"
HorizontalAlignment="Center" VerticalAlignment="Top" ItemInvoked="sampleTreeView_ItemInvoked" CanDragItems="True" AllowDrop="True" />
HorizontalAlignment="Center" VerticalAlignment="Top" CanDragItems="True" AllowDrop="True" />
</Grid>
</local:ControlExample.Example>
<local:ControlExample.Xaml>
<x:String>
&lt;TreeView CanDragItems="True" AllowDrop="True"/&gt;
&lt;TreeView x:Name="sampleTreeView" CanDragItems="True" AllowDrop="True"/&gt;
</x:String>
</local:ControlExample.Xaml>
</local:ControlExample>

<local:ControlExample HeaderText="A TreeView with Multi-selection enabled">
<local:ControlExample HeaderText="A TreeView with Multi-selection enabled"
CSharpSource="TreeView\TreeViewSample1_cs.txt">
<local:ControlExample.Example>
<Grid Height="400" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<Grid Height="280" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<TreeView x:Name="sampleTreeView2" MinWidth="345" MaxHeight="400" Margin="0,12,0,0"
HorizontalAlignment="Center" VerticalAlignment="Top" SelectionMode="Multiple"/>
</Grid>
</local:ControlExample.Example>
<local:ControlExample.Xaml>
<x:String>
&lt;TreeView SelectionMode="Multiple" /&gt;
&lt;TreeView x:Name="sampleTreeView" SelectionMode="Multiple" /&gt;
</x:String>
</local:ControlExample.Xaml>
</local:ControlExample>

<local:ControlExample HeaderText="A TreeView with DataBinding Using ItemSource" XamlSource="TreeView\TreeViewDataBindingSample_xaml.txt">
<local:ControlExample HeaderText="A TreeView with DataBinding Using ItemSource"
XamlSource="TreeView\TreeViewDataBindingSample_xaml.txt"
CSharpSource="TreeView\TreeViewDataBindingSample_cs.txt">
<local:ControlExample.Example>
<Grid Height="400" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<Grid Height="200" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<TreeView x:Name="TreeView1"
MinWidth="345"
MaxHeight="400"
Expand All @@ -87,9 +91,11 @@
</local:ControlExample.Example>
</local:ControlExample>

<local:ControlExample HeaderText="A TreeView with ItemTemplateSelector" XamlSource="TreeView\TreeViewTemplateSelectorSample_xaml.txt">
<local:ControlExample HeaderText="A TreeView with ItemTemplateSelector"
XamlSource="TreeView\TreeViewTemplateSelectorSample_xaml.txt"
CSharpSource="TreeView\TreeViewTemplateSelectorSample_cs.txt">
<local:ControlExample.Example>
<Grid Height="400" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<Grid Height="200" BorderBrush="{ThemeResource TextControlBorderBrush}" BorderThickness="1">
<TreeView x:Name="FileTree" Grid.Column="2" MinWidth="345" MaxHeight="400" Margin="0,12,0,0"
HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{x:Bind DataSource}"
ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}" />
Expand Down
176 changes: 26 additions & 150 deletions WinUIGallery/ControlPages/TreeViewPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
using System;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace WinUIGallery.ControlPages
{
public sealed partial class TreeViewPage : Page
{
TreeViewNode personalFolder;
TreeViewNode personalFolder2;
private ObservableCollection<ExplorerItem> DataSource;

public TreeViewPage()
Expand All @@ -18,190 +14,70 @@ public TreeViewPage()
this.DataContext = this;
DataSource = GetData();

InitializeSampleTreeView();
InitializeSampleTreeView2();
InitializeSampleTreeView(sampleTreeView);
InitializeSampleTreeView(sampleTreeView2);
}

private void InitializeSampleTreeView()
private void InitializeSampleTreeView(TreeView sampleTreeView)
{
TreeViewNode workFolder = new TreeViewNode() { Content = "Work Documents" };
workFolder.IsExpanded = true;

workFolder.Children.Add(new TreeViewNode() { Content = "XYZ Functional Spec" });
workFolder.Children.Add(new TreeViewNode() { Content = "Feature Schedule" });
workFolder.Children.Add(new TreeViewNode() { Content = "Overall Project Plan" });
workFolder.Children.Add(new TreeViewNode() { Content = "Feature Resources Allocation" });

TreeViewNode remodelFolder = new TreeViewNode() { Content = "Home Remodel" };
remodelFolder.IsExpanded = true;

remodelFolder.Children.Add(new TreeViewNode() { Content = "Contractor Contact Info" });
remodelFolder.Children.Add(new TreeViewNode() { Content = "Paint Color Scheme" });
remodelFolder.Children.Add(new TreeViewNode() { Content = "Flooring woodgrain type" });
remodelFolder.Children.Add(new TreeViewNode() { Content = "Kitchen cabinet style" });

personalFolder = new TreeViewNode() { Content = "Personal Documents" };
TreeViewNode personalFolder = new TreeViewNode() { Content = "Personal Documents" };
personalFolder.IsExpanded = true;
personalFolder.Children.Add(remodelFolder);

sampleTreeView.RootNodes.Add(workFolder);
sampleTreeView.RootNodes.Add(personalFolder);
}
private void InitializeSampleTreeView2()
{
TreeViewNode workFolder = new TreeViewNode() { Content = "Work Documents" };
workFolder.IsExpanded = true;

workFolder.Children.Add(new TreeViewNode() { Content = "XYZ Functional Spec" });
workFolder.Children.Add(new TreeViewNode() { Content = "Feature Schedule" });
workFolder.Children.Add(new TreeViewNode() { Content = "Overall Project Plan" });
workFolder.Children.Add(new TreeViewNode() { Content = "Feature Resources Allocation" });

TreeViewNode remodelFolder = new TreeViewNode() { Content = "Home Remodel" };
remodelFolder.IsExpanded = true;

remodelFolder.Children.Add(new TreeViewNode() { Content = "Contractor Contact Info" });
remodelFolder.Children.Add(new TreeViewNode() { Content = "Paint Color Scheme" });
remodelFolder.Children.Add(new TreeViewNode() { Content = "Flooring woodgrain type" });
remodelFolder.Children.Add(new TreeViewNode() { Content = "Kitchen cabinet style" });

personalFolder2 = new TreeViewNode() { Content = "Personal Documents" };
personalFolder2.IsExpanded = true;
personalFolder2.Children.Add(remodelFolder);

sampleTreeView2.RootNodes.Add(workFolder);
sampleTreeView2.RootNodes.Add(personalFolder2);
}

private void sampleTreeView_ItemInvoked(TreeView sender, TreeViewItemInvokedEventArgs args)
{
return;
}

private ObservableCollection<ExplorerItem> GetData()
{
var list = new ObservableCollection<ExplorerItem>();
ExplorerItem folder1 = new ExplorerItem()
return new ObservableCollection<ExplorerItem>
{
Name = "Work Documents",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
new ExplorerItem
{
new ExplorerItem()
{
Name = "Functional Specifications",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
new ExplorerItem()
{
Name = "TreeView spec",
Type = ExplorerItem.ExplorerItemType.File,
}
}
},
new ExplorerItem()
{
Name = "Feature Schedule",
Type = ExplorerItem.ExplorerItemType.File,
},
new ExplorerItem()
Name = "Documents",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
Name = "Overall Project Plan",
Type = ExplorerItem.ExplorerItemType.File,
},
new ExplorerItem()
new ExplorerItem { Name = "ProjectProposal", Type = ExplorerItem.ExplorerItemType.File },
new ExplorerItem { Name = "BudgetReport", Type = ExplorerItem.ExplorerItemType.File }
}
},
new ExplorerItem
{
Name = "Projects",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
Name = "Feature Resources Allocation",
Type = ExplorerItem.ExplorerItemType.File,
new ExplorerItem { Name = "Project Plan", Type = ExplorerItem.ExplorerItemType.File }
}
}
};
ExplorerItem folder2 = new ExplorerItem()
{
Name = "Personal Folder",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
new ExplorerItem()
{
Name = "Home Remodel Folder",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
new ExplorerItem()
{
Name = "Contractor Contact Info",
Type = ExplorerItem.ExplorerItemType.File,
},
new ExplorerItem()
{
Name = "Paint Color Scheme",
Type = ExplorerItem.ExplorerItemType.File,
},
new ExplorerItem()
{
Name = "Flooring Woodgrain type",
Type = ExplorerItem.ExplorerItemType.File,
},
new ExplorerItem()
{
Name = "Kitchen Cabinet Style",
Type = ExplorerItem.ExplorerItemType.File,
}
}
}
}
};

list.Add(folder1);
list.Add(folder2);
return list;
}

}

public class ExplorerItem : INotifyPropertyChanged
public class ExplorerItem
{
public event PropertyChangedEventHandler PropertyChanged;
public enum ExplorerItemType { Folder, File };
public string Name { get; set; }
public ExplorerItemType Type { get; set; }
private ObservableCollection<ExplorerItem> m_children;
public ObservableCollection<ExplorerItem> Children
{
get
{
if (m_children == null)
{
m_children = new ObservableCollection<ExplorerItem>();
}
return m_children;
}
set
{
m_children = value;
}
}

private bool m_isExpanded;
public bool IsExpanded
public enum ExplorerItemType
{
get { return m_isExpanded; }
set
{
if (m_isExpanded != value)
{
m_isExpanded = value;
NotifyPropertyChanged("IsExpanded");
}
}
Folder,
File,
}

private void NotifyPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public string Name { get; set; }
public ExplorerItemType Type { get; set; }
public ObservableCollection<ExplorerItem> Children { get; set; } = new ObservableCollection<ExplorerItem>();
}

class ExplorerItemTemplateSelector : DataTemplateSelector
Expand Down
82 changes: 82 additions & 0 deletions WinUIGallery/ControlPagesSampleCode/TreeView/TreeViewDataBindingSample_cs.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
using System.Collections.ObjectModel;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace YourNamespace
{
public sealed partial class YourPage : Page
{
// DataSource is the data collection that will be bound to the TreeView's ItemsSource.
public ObservableCollection<ExplorerItem> DataSource { get; set; }

public YourPage()
{
this.InitializeComponent();

// Initialize the data source with sample data and set it as the context for data binding.
DataSource = GetData();
this.DataContext = this; // Bind the DataContext of the page to itself for XAML bindings.
}

// Method to provide sample data for the TreeView.
private ObservableCollection<ExplorerItem> GetData()
{
return new ObservableCollection<ExplorerItem>
{
// Root folder with child files.
new ExplorerItem
{
Name = "Documents",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
new ExplorerItem
{
Name = "ProjectProposal",
Type = ExplorerItem.ExplorerItemType.File,
},
new ExplorerItem
{
Name = "BudgetReport",
Type = ExplorerItem.ExplorerItemType.File,
},
},
},
// Another root folder with one child file.
new ExplorerItem
{
Name = "Projects",
Type = ExplorerItem.ExplorerItemType.Folder,
Children =
{
new ExplorerItem
{
Name = "Project Plan",
Type = ExplorerItem.ExplorerItemType.File,
},
},
},
};
}
}

// Class to represent items in the TreeView.
public class ExplorerItem
{
// Enum to define the type of the item: Folder or File.
public enum ExplorerItemType
{
Folder,
File,
}

// Name of the item (displayed in the TreeView).
public string Name { get; set; }

// Type of the item (Folder or File).
public ExplorerItemType Type { get; set; }

// Collection of child items. Used for nested nodes in the TreeView.
public ObservableCollection<ExplorerItem> Children { get; set; } = new ObservableCollection<ExplorerItem>();
}
}
Loading