AvaloniaUI - DataGrid, Changing DataContext for binding to Custom Column To Item from ItemsSource

[LeahR-jpw]

I posted this issue on StackOverflow last week here: https://stackoverflow.com/questions/79882936/avaloniaui-datagrid-changing-datacontext-for-binding-to-custom-column

Please let me know if I should submit or tag this issue differently or any more information is needed. I've been working with .net8.0 'net8.0' in visual studio 2022 and have the Avalonia Visual Studio Extension. Avalonia Version is 11.3.9

I'm new to using AvaloniaUI and trying to get my basic needs checked off. I'm having some issues making custom columns for the DataGrid control

By default the DataGridTemplatedControl type as well as any other columns in a grid behave by shifting their DataContext relative to the ItemsSource of the DataGrid when binding things like their 'Binding' property.

For Example, if I set my ItemsSource to be a list of Task objects (List<Task>) then my columns will bind smoothly to singular Task objects like so. Where Name and Priority are properties on the Task type.

<DataGrid x:Name="gridTasks" ItemsSource="{Binding Tasks, Mode=TwoWay}">
    <DataGrid.Columns>

        <DataGridTextColumn Header="Name" Binding="{Binding DataContext.Name}" />

        <DataGridTextColumn Header="Priority" Binding="{Binding Priority}"/> 
    </DataGrid.Columns>
</DataGrid>

This also works with a DataGridTemplatedColumn when it is defined in place like so:

<DataGrid x:Name="gridTasks" ItemsSource="{Binding Tasks, Mode=TwoWay}">
    <DataGrid.Columns>

        <DataGridTextColumn Header="Name" Binding="{Binding DataContext.Name}" />

        <DataGridTemplateColumn Header="Priority" >
            <DataGridTemplateColumn.CellTemplate>
              <DataTemplate >
                <TextBlock Text="{Binding Priority}" />
          
              </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        <DataGridTemplateColumn.CellEditingTemplate>
          <DataTemplate >
            <ComboBox ItemsSource="{Binding Path=DataContext.PRIORITY_STATUSES, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"                               
               HorizontalAlignment="Stretch" 
                SelectedValue="{Binding Priority}"/>
              </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn> 
    </DataGrid.Columns>
</DataGrid>

The problem comes when I try to abstract this into a custom class that I want to be able to reuse quickly. In my instance the custom class is a DataGridComboBoxColumn. I've gotten everything working except one final step. I can't bind nicely to the members of the ItemsSource of the DataGrid.

Here is my custom class:

<DataGridTemplateColumn xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="PMSheetAvalonia.DataGridComboBoxColumn">
  <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Padding="10,0"
                VerticalAlignment="Center" HorizontalAlignment="Stretch" />                      
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate >
            <ComboBox HorizontalAlignment="Stretch"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

using System.Collections;

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Utils;
using Avalonia.Data;
using Avalonia.Markup.Xaml;

namespace PMSheetAvalonia;

public partial class DataGridComboBoxColumn : DataGridTemplateColumn
{


    public static readonly StyledProperty<IBinding> SelectedValueProperty = AvaloniaProperty.Register<DataGridComboBoxColumn, IBinding>(
            "SelectedValue");

    public IBinding SelectedValue
    {
        get { return GetValue(SelectedValueProperty); }
        set { SetValue(SelectedValueProperty, value); }
    }

    public static readonly StyledProperty<object?> SelectedValue2Property = AvaloniaProperty.Register<DataGridComboBoxColumn, object?>(
            "SelectedValue2");

    public object? SelectedValue2
    {
        get { return GetValue(SelectedValue2Property); }
        set { SetValue(SelectedValue2Property, value); }
    }

    public static readonly StyledProperty<IEnumerable?> ItemsSourceProperty = AvaloniaProperty.Register<DataGridComboBoxColumn, IEnumerable?>(
            "ItemsSource");

    public IEnumerable? ItemsSource
    {
        get { return GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public DataGridComboBoxColumn() : base()
    {
        AvaloniaXamlLoader.Load(this);
    }

    protected override Control GenerateElement(DataGridCell cell, object dataItem)
    {
        TextBlock v = (base.GenerateElement(cell, dataItem) as TextBlock)!;

        v.Bind(TextBlock.TextProperty, this.GetObservable(DataGridComboBoxColumn.SelectedValue2Property));


        return v;
    }

    protected override Control GenerateEditingElement(DataGridCell cell, object dataItem, out ICellEditBinding binding)
    {
        ComboBox v = (base.GenerateEditingElement(cell, dataItem, out binding) as ComboBox)!;

        v.Bind(ComboBox.SelectedValueProperty, this.GetObservable(DataGridComboBoxColumn.SelectedValue2Property));
        v.Bind(ComboBox.ItemsSourceProperty, this.GetObservable(DataGridComboBoxColumn.ItemsSourceProperty));

        return v;
    }
}

There's some other stuff in there where I wasn't able to bind to my new properties in the 'xaml' or actually 'axaml' for this avalonia stuff, but I sorted that out generating the Element and EditingElement.

Clearly, something is going on behind the scenes so that regular columns bind to members of the grid's ItemsSource, but I'm losing that when I try adding one of my custom columns to a grid like so:

<DataGrid x:Name="gridTasks" ItemsSource="{Binding Tasks, Mode=TwoWay}">
    <DataGrid.Columns>

        <DataGridTextColumn Header="Name" Binding="{Binding DataContext.Name}" />

        <local:DataGridComboBoxColumn Header="Priority"
                      SelectedValue2="{Binding Priority}"
                        ItemsSource="{Binding Path=DataContext.PRIORITY_STATUSES, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"/>
    </DataGrid.Columns>
</DataGrid>

The ItemsSource binding for the Priority column here works, but not the one for SelectedValue2. When I hover over it, I can clearly see that it considers the type being binded to the ViewModel_JobOverview type that is the DataContext for the UserControl this is all taking place on.

I'm wondering if it's my added properties that are the problem. Do I need to somehow specify this changed context for the properties? I'm also aware that this might not be the only or ideal way to make custom controls in Avalonia but have had my issues with TemplatedControl as well. I'm just looking for any way to make writing the XAML smooth so I can make this and other reusable column types as I have in WPF projects previously, sans Avalonia.

[CADTraveller]

I'm not entirely sure I follow your issue here, I've not tried inheriting from DataGridTemplateColumn but I do see where you're coming from.

One thing I do notice that is related to some issues I've had. You have SelectedValue and SelectedValue2 as Styled properties. These can fail in bindings such as this, they're more intended for Styled properties like Foreground or BorderColor.

Try redefining those as DirectProperties and see if it helps your binding issue.

Brief description in the docs