Problem with ItemsPresenter in code.

[bonfini7]

Hi,

Currently I'm working on a basic file manager sofware with Avalonia and at this point is really got stuck.
I would like to display the folders and files that can be found at the selected location. I have a DataTemplate and a ControlTemplate. The ControlTemplate's only task is to show those required column names that have been predetermined (so right now the Name, Extension, Size ans LastWriteDate columns)

  <ControlTemplate x:Key="FullControlTemplate">
            <DockPanel LastChildFill="True">       
               <Grid DockPanel.Dock="Top" Height="30">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition SharedSizeGroup="col1"/>
                      <ColumnDefinition SharedSizeGroup="col2"/>
                      <ColumnDefinition SharedSizeGroup="col3"/>
                      <ColumnDefinition SharedSizeGroup="col4"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0">Name</Label>
                    <Label Grid.Column="1">Extension</Label>
                    <Label Grid.Column="2">Size</Label>
                    <Label Grid.Column="3">Date</Label>
                </Grid>
              <ScrollViewer>
                <ItemsPresenter/>
              </ScrollViewer>
            </DockPanel>
     </ControlTemplate>

Here is the associated DataTemplate:

 <DataTemplate x:Key="FullTemplate" DataType="{x:Type models:DirectoryEntry}">
      <DockPanel LastChildFill="True">
        <Grid DockPanel.Dock="Top" Background="{Binding Path=IsDir, Converter={StaticResource TypeToBrushConverter}}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="col1"/>
            <ColumnDefinition SharedSizeGroup="col2"/>
            <ColumnDefinition SharedSizeGroup="col3"/>
            <ColumnDefinition SharedSizeGroup="col3"/>
          </Grid.ColumnDefinitions>

          <TextBlock Margin="0,0,10,0" Text="{Binding Name}"/>
          <TextBlock Grid.Column="1" Text="{Binding Extension}"/>
          <TextBlock Grid.Column="2" Text="{Binding Size}"/>
          <TextBlock Grid.Column="3" Text="{Binding LastWriteDate}"/>
        </Grid>      
      </DockPanel>
  </DataTemplate>

These xaml solutions are work like a charm. Now i want to do the same stuff but more like in a dynamic approach (so basically the same things just in C# code). I did manage to find 2 classes that can be helpful for me. The FuncDataTemplate and the FuncControlTemplate.
My problem is when I'm using my ControlTemplate that i have created in code the headers are perfect, but it doesn't display any data. In my opinion my ItemsPresenter implementation is faulty and I'm missing something. But i don't really understand the usage of the ItemsPresenter at this point. Here are my codes:

Method that returns with the custom (dynamic) data template:

  private IDataTemplate GetCustomDataTemplate(ViewProperties props)
        {
            Func<DirectoryEntry, INameScope, IControl> build = (x,y) =>
            {
                var mainDockpanel = new DockPanel()
                {                  
                    LastChildFill = true,
                };
              
                var secondaryGrid = new Grid()
                {
                    Background = x.IsDir ? Brushes.LightYellow : Brushes.White,
                };
                DockPanel.SetDock(secondaryGrid, Dock.Top);

                int columnCount = 0;
                foreach (var item in props.GetType().GetProperties())
                {
                    if (item.Name == "Name" || item.Name == "Extension" || (bool)item.GetValue(props) == true)
                    {
                        secondaryGrid.ColumnDefinitions.Add(new ColumnDefinition() { SharedSizeGroup = $"col{columnCount}" });
                        var currentChild = new TextBlock()
                        {
                            [!TextBlock.TextProperty] = new Binding(item.Name),
                        };
                        Grid.SetColumn(currentChild, columnCount++);

                        secondaryGrid.Children.Add(currentChild);
                    }
                }              
                mainDockpanel.Children.Add(secondaryGrid);

                return mainDockpanel;       
            
            };
            return new FuncDataTemplate<DirectoryEntry>(build);
        }

Method that returns the custom template with the ItemsPresenter:

 private IControlTemplate GetCustomControlTemplate(ViewProperties props)
        {          
            Func<ITemplatedControl, INameScope, IControl> build = (x, y) =>
            {
                var mainDockpanel = new DockPanel()
                {
                    LastChildFill = true,
                };

                var secondaryGrid = new Grid()
                {
                   Height = 30,
                };
                DockPanel.SetDock(secondaryGrid, Dock.Top);

                int columnCount = 0;
                foreach (var item in props.GetType().GetProperties())
                {
                    if ((bool)item.GetValue(props) == true)
                    {
                        secondaryGrid.ColumnDefinitions.Add(new ColumnDefinition() { SharedSizeGroup = $"col{columnCount}" });
                        var currentChild = new Label()
                        {
                            Content = item.Name,
                        };
                        Grid.SetColumn(currentChild, columnCount++);
                        secondaryGrid.Children.Add(currentChild);
                    }
                }
                mainDockpanel.Children.Add(secondaryGrid);

                mainDockpanel.Children.Add(
                    new ScrollViewer()
                    {          
                        Content = new ItemsPresenter()
                        {
                          
                        }                        
                    });

                return mainDockpanel;
            };

            return new FuncControlTemplate(build);               
        }

And the results i would like to get VS the wrong result:

Sorry for the long topic. This is the my first GitHub discussion that i have ever opened.
Thank you for the answers!

[grokys]

Hi @bonfini7 - congratulations on your first GitHub discussion ;)

Do you think you got put a minimal repro in a github repository so we can take a look? At first glance I don't see anything wrong, but it's hard to tell.

[bonfini7]

Hi @grokys

Of course here you are: https://github.com/bonfini7/Avalonia_FileExplorer
Thank you for the fast reply! :)

[maxkatz6]

@bonfini7 you forgot TemplateBindings in both your templates (xaml and code behind). In case of XAML template it might was done implicitly, but it didn't work with code behind.
Missed template bindings:
https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/ListBox.xaml#L29-L33

Code that worked for me:

mainDockpanel.Children.Add(
    new ScrollViewer()
    {          
        Content = new ItemsPresenter()
        {
            [~ItemsPresenter.ItemsProperty] = new TemplateBinding(ListBox.ItemsProperty),
            [~ItemsPresenter.ItemTemplateProperty] = new TemplateBinding(ListBox.ItemTemplateProperty),
            [~ItemsPresenter.ItemsPanelProperty] = new TemplateBinding(ListBox.ItemsPanelProperty),
            [~ItemsPresenter.MarginProperty] = new TemplateBinding(ListBox.MarginProperty),
            [~ItemsPresenter.VirtualizationModeProperty] = new TemplateBinding(ListBox.VirtualizationModeProperty),
        }                        
    });

[bonfini7]

@maxkatz6 Yes this solved my problem. Thank your very much!