UWP Binding in Style Setter from ItemContainerStyle not working

Question

I create a BindingHelper to set a binding in a style setter like this example....

UWP Binding in Style Setter not working

But it dont works. Can anyon help me to complete the example or find my error?

<Page
x:Class="eve.TerminView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:eve"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <ResourceDictionary Source="Styles.xaml" />

</Page.Resources>

<Grid Background="{StaticResource ResourceKey=StyleBackground}">

    <ItemsControl ItemsSource="{Binding Path=termindata}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>

                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="50" BorderBrush="White" BorderThickness="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Background="Green">
                    <TextBlock Text="{Binding text}"></TextBlock>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="local:BindingHelper.GridColumnBindingPath" Value="column"/>
                <Setter Property="local:BindingHelper.GridRowBindingPath" Value="row"/>
            </Style>
        </ItemsControl.ItemContainerStyle>

    </ItemsControl>


</Grid>

And here the code behind with the public class BindingHelper

namespace test
{

public sealed partial class TerminView : Page
{

    public List<TerminDate> termindata;


    public TerminView()
    {
        this.InitializeComponent();

        termindata = new List<TerminDate>();

        termindata.Add(new TerminDate(1, 1, "Test 1"));
        termindata.Add(new TerminDate(1, 2, "Test 2"));
    }
}


public class TerminDate
{

    public TerminDate(int row, int column, string text)
    {
        this.row = row;
        this.column = column;
        this.text = text;
    }

    public int row { get; set; }
    public int column { get; set; }
    public string text { get; set; }
}

public class BindingHelper
{
    public static readonly DependencyProperty GridColumnBindingPathProperty =
        DependencyProperty.RegisterAttached(
            "GridColumnBindingPath", typeof(string), typeof(BindingHelper),
            new PropertyMetadata(null, GridBindingPathPropertyChanged));

    public static readonly DependencyProperty GridRowBindingPathProperty =
        DependencyProperty.RegisterAttached(
            "GridRowBindingPath", typeof(string), typeof(BindingHelper),
            new PropertyMetadata(null, GridBindingPathPropertyChanged));

    public static string GetGridColumnBindingPath(DependencyObject obj)
    {
        return (string)obj.GetValue(GridColumnBindingPathProperty);
    }

    public static void SetGridColumnBindingPath(DependencyObject obj, string value)
    {
        obj.SetValue(GridColumnBindingPathProperty, value);
    }

    public static string GetGridRowBindingPath(DependencyObject obj)
    {
        return (string)obj.GetValue(GridRowBindingPathProperty);
    }

    public static void SetGridRowBindingPath(DependencyObject obj, string value)
    {
        obj.SetValue(GridRowBindingPathProperty, value);
    }

    private static void GridBindingPathPropertyChanged(
        DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var propertyPath = e.NewValue as string;

        if (propertyPath != null)
        {
            var gridProperty =
                e.Property == GridColumnBindingPathProperty
                ? Grid.ColumnProperty
                : Grid.RowProperty;

            BindingOperations.SetBinding(
                obj,
                gridProperty,
                new Binding { Path = new PropertyPath(propertyPath) });
        }
    }
}

}

Answer 1

Try adding on the TerminView codebehind constructor

(this.Content as FrameworkElement).DataContext = this;

Then you need to implement INotifyPropertyChanged. This is if for notify from the ViewModel or CodeBehind to the view. Only call OnPropertyChanged(nameof(TerminData)) or OnPropertyChanged("TerminData")

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

After that convert your TerminView.cs properties (termindata) in a dependency property.

public static readonly DependencyProperty TerminDataProperty = DependencyProperty.Register(
        "TerminData", typeof (List<TerminDate>), typeof (TerminView), new PropertyMetadata(default(List<TerminDate>), TerminDataPropertyChanged));

    private static void TerminDataPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = d as TerminView;
        if (control != null)
            control.TerminData = // Do here the logic if you what when this propety changes.
    }

    public List<TerminDate> TerminData
    {
        get { return (List<TerminDate>) GetValue(TerminDataProperty); }
        set { SetValue(TerminDataProperty, value); }
    }

I suggest you to read this article from Jerry Nixon.

Answer 2

Thanks for the solution!!! It works.....

Here I have added the complete code behind

public sealed partial class TerminView : Page
{


    public TerminView()
    {
        this.InitializeComponent();

        (this.Content as FrameworkElement).DataContext = this;


        TerminData = new List<TerminDate>();

        TerminData.Add(new TerminDate(1, 1, "Test 1"));
        TerminData.Add(new TerminDate(1, 2, "Test 2"));
    }

    public List<TerminDate> TerminData
    {
        get { return (List<TerminDate>)GetValue(TerminDataProperty); }
        set { SetValue(TerminDataProperty, value); }
    }

    public static readonly DependencyProperty TerminDataProperty = DependencyProperty.Register(
    "TerminData", typeof(List<TerminDate>), typeof(TerminView), new PropertyMetadata(default(List<TerminDate>), TerminDataPropertyChanged));

    private static void TerminDataPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var control = d as TerminView;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}


public class TerminDate
{

    public TerminDate(int row, int column, string text)
    {
        this.row = row;
        this.column = column;
        this.text = text;
    }

    public int row { get; set; }
    public int column { get; set; }
    public string text { get; set; }
}

public class BindingHelper
{
    public static readonly DependencyProperty GridColumnBindingPathProperty =
        DependencyProperty.RegisterAttached(
            "GridColumnBindingPath", typeof(string), typeof(BindingHelper),
            new PropertyMetadata(null, GridBindingPathPropertyChanged));

    public static readonly DependencyProperty GridRowBindingPathProperty =
        DependencyProperty.RegisterAttached(
            "GridRowBindingPath", typeof(string), typeof(BindingHelper),
            new PropertyMetadata(null, GridBindingPathPropertyChanged));

    public static string GetGridColumnBindingPath(DependencyObject obj)
    {
        return (string)obj.GetValue(GridColumnBindingPathProperty);
    }

    public static void SetGridColumnBindingPath(DependencyObject obj, string value)
    {
        obj.SetValue(GridColumnBindingPathProperty, value);
    }

    public static string GetGridRowBindingPath(DependencyObject obj)
    {
        return (string)obj.GetValue(GridRowBindingPathProperty);
    }

    public static void SetGridRowBindingPath(DependencyObject obj, string value)
    {
        obj.SetValue(GridRowBindingPathProperty, value);
    }

    private static void GridBindingPathPropertyChanged(
        DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var propertyPath = e.NewValue as string;

        if (propertyPath != null)
        {
            var gridProperty =
                e.Property == GridColumnBindingPathProperty
                ? Grid.ColumnProperty
                : Grid.RowProperty;

            BindingOperations.SetBinding(
                obj,
                gridProperty,
                new Binding { Path = new PropertyPath(propertyPath) });
        }
    }
}

And here for completeness the XAML

<Page.Resources>
    <ResourceDictionary Source="Styles.xaml" />

</Page.Resources>

<Grid Background="{StaticResource ResourceKey=StyleBackground}">

    <ItemsControl ItemsSource="{Binding Path=TerminData}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>

                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="50" BorderBrush="White" BorderThickness="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Background="Green">
                    <TextBlock Text="{Binding text}"></TextBlock>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="local:BindingHelper.GridColumnBindingPath" Value="column"/>
                <Setter Property="local:BindingHelper.GridRowBindingPath" Value="row"/>
            </Style>
        </ItemsControl.ItemContainerStyle>

    </ItemsControl>


</Grid>