question

KenKrugh-6537 avatar image
0 Votes"
KenKrugh-6537 asked ·

Setup WPF Data Template With Class in Another Mudule

Trying to bind a TreeView to a class that's in a module. I was fortunate to get this fabulous example from Peter Fleischer. In it he uses:

 xmlns:local="clr-namespace:WpfApp1"

Then later:

 <HierarchicalDataTemplate DataType="{x:Type local:Window63FntSetData}" ItemsSource="{Binding Fnts}">

In place of Peter's "Window63FntSetData" I need to reference a class that's in a module.

How do I do so in the XAML?

Thank you,
Ken






windows-wpf
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered ·

Hi Ken,
set reference in project to another dll and include additional namespace (from another dll) in XAML:

  xmlns:local="clr-namespace:WpfApp1"
  xmlns:externdll="clr-namespace:ExternalNamespace;assembly=ExternalAssembly"
 ...
  <HierarchicalDataTemplate DataType="{x:Type externdll:FntSetData}" ItemsSource="{Binding Fnts}"> 
· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlexLi-MSFT avatar image
0 Votes"
AlexLi-MSFT answered ·

Welcome to our Microsoft Q&A platform!

You could refer to the below step to add the class in XAML.

  1. Create your model in MyVM.vb



         Public Class MyMoudle
         Public Property SetId As String
         Public Property SetName As String
     End Class
    


  2. Add the MyMoudle data for Collection


          Public Class MyVM
        
         Private col As New ObservableCollection(Of MyMoudle)
         Private cvs As New CollectionViewSource
        
         Public ReadOnly Property MyDataItems As ICollectionView
             Get
                 If cvs.Source Is Nothing Then GetData()
                 Return cvs.View
             End Get
         End Property
        
     Private Sub GetData()
     'add data for col
        End Sub
        
     End Class
    

  3. Bind the data in xaml using DataContext



      <Window.DataContext>
                 <local:MyVM/>
             </Window.DataContext>
    


  4.  You can bind the class in the Treeview Resource with set ItemsSource as your data collection [MyDataItems]
       
    
         <TreeView ItemsSource="{Binding MyDataItems}"….>
             <TreeView.Resources>
                 <HierarchicalDataTemplate DataType="{x:Type local:MyMoudle}" … >
                     ...
                </HierarchicalDataTemplate>
             </TreeView.Resources>
         </TreeView>
    


Thanks.




· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KenKrugh-6537 avatar image
0 Votes"
KenKrugh-6537 answered ·

Thank so much for answering guys, but I think I should have been more specific.

The "module" I'm referring to is a .vb file in the project. Can what Peter suggested work that way?

And I think what AlexLi suggested is the REAL "right" way to do this (is it MVVM? showing my lack of knowledge here) but I should have said that I already have an established List(of) FntSetData and FntData and am currently building the StackPalnel and adding the items to the TreeViews with .Items.Add. I'm hoping that binding the data will speed up the build of the larger list view with 10,000+ itmes when their bound.

Currently looks like this:
8016-capture.jpg

I think the example that Peter supplied (linked in my original post) will get me there with some tweaking including making the "base" class (and figuring out how to add the icons to that mix) but the classes in the .vb file aren't "visible" to the XAML in the main window - if I'm even using the right terminology.

Thanks again,
Ken



capture.jpg (52.1 KiB)
· 2 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Could you give a detailed description of this? How is the .vb file not visible?
To show the picture looks, you could add an Icon/Image field for your module class and bind it's data as the others fields in the XAML to show the icons. For the changing icons, you can refer to Trigger to set the property of icons.

0 Votes 0 · ·

Hi Ken, I cannot show code in this forum. The WAF (windows azure firewall: WAF v2 has determined your request exceeded the normal web request and has blocked your request.) blocks my posting with code. Please refer to my public OneDrive.

Try demo from link. Demo uses MVVM pattern and asynchronously loading collection. Classes and load method are located in separate file with separate namespace in the same project. For Icons I use Image folder in project and reference (BitmapImage) in data items. Instead of Image folder you can use resources. To switch open-close folder I use Style with trigger.


1 Vote 1 · ·
KenKrugh-6537 avatar image
0 Votes"
KenKrugh-6537 answered ·

Wow Peter! Can't thank you enough.

Will have a look this weekend.

All the best,
Ken

· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KenKrugh-6537 avatar image
0 Votes"
KenKrugh-6537 answered ·

Got it working! My very large tree now gets built almost instantaneously! Thank you again!

The problem was my namespaces, or more appropriately lack there of. When I said earlier that the class was in a module I was hearkening back to VB6 and meaning just another file with in the project, a .VB file. But the problem was that it WAS in a ACTUAL module with the keyword "Module" and so the XAML couldn't "see" it. I created a namespace for it and added that name space to the XMAL to fix things up.

I found a few other things I needed this weekend with the exception of one. Before binding the data I was building the tree "manually" using a class I created inheriting form the TreeViewItem and added a couple of properties, like so:
8451-capture.jpg

I couldn't find a way in the XMAL to have the TreeView populate with my class rather than the usual TreeViewItem. Hoping it MIGHT help minimize the rewriting I have to do now that the data is bound.

Thank you, yet again, for all your help.

All the Best,
Ken


capture.jpg (55.3 KiB)
· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.