Search code examples
c#data-bindinguwp-xamlxbind

How do I pass the current list item to an x:Bind function?


I have a simple ListView bound to a list of objects. In the ListView.ItemTemplate I'd like to format each object and bind it to a TextBlock using x:Bind function binding like so: <TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(???)}" />. However, I'm not sure not how to pass a reference to the current item to the function.

This works fine if I need to pass a property of the item to the function, or even multiple properties, such as <TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(Name, Model)}" />, but I can't figure out how to pass the entire object.

I've tried all of these to no avail:

<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(this)}" />
<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(self)}" />
<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget({x:Bind})}" />
<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget({Binding})}" />
<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(Item)}" />
<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(DataContext)}" />
<TextBlock Name="Root" Text="{x:Bind local:MainViewModel.FormatWidget(Root.DataContext)}" />

As a workaround, I can create and bind to a property on the data item that returns itself, like so:

        public Widget MeMyselfAndI { get => this; }
<TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(MeMyselfAndI)}" />

However, this is a hack, and in my real project I cannot modify the source of the data item class to add a property.

How do I pass a reference to the current item to the function?

Here's a repro:

MainPage.xaml

<Page
    x:Class="ListItemFunctionBinding.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:ListItemFunctionBinding"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">
    <Grid>
        <ListView ItemsSource="{x:Bind ViewModel.Widgets}" SelectedItem="{x:Bind ViewModel.SelectedItem}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Widget">
                    <TextBlock Text="{x:Bind local:MainViewModel.FormatWidget(MeMyselfAndI)}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;

namespace ListItemFunctionBinding
{
    public sealed partial class MainPage : Page
    {
        public MainViewModel ViewModel { get; } = new MainViewModel();

        public MainPage()
        {
            InitializeComponent();
        }
    }
}

MainViewModel.cs

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace ListItemFunctionBinding
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private Widget _selectedItem;

        public Widget SelectedItem
        {
            get => _selectedItem;
            set
            {
                if (_selectedItem != value)
                {
                    _selectedItem = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedItem)));
                }
            }
        }

        public ObservableCollection<Widget> Widgets { get; } = new ObservableCollection<Widget>()
        {
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Regular Widget",
                Model = "WX2020-01",
                Description = "Your typical everyday widget."
            },
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Super Widget",
                Model = "WX2020-02",
                Description = "An extra special upgraded widget."
            },
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Broken Widget",
                Model = "WX2020-03",
                Description = "A widget that has been used and abused."
            },
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Fake Widget",
                Model = "WX2020-04",
                Description = "It's not really a widget at all!"
            },
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Surprise Widget",
                Model = "WX2020-05",
                Description = "What kind of widget will it be?"
            },
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Invisible Widget",
                Model = "WX2020-06",
                Description = "Our most inexpensive widget."
            },
            new Widget
            {
                Id = Guid.NewGuid(),
                Name = "Backwards Widget",
                Model = "WX2020-07",
                Description = "Really more of a tegdiw, come to think of it."
            }
        };

        public static string FormatWidget(Widget widget)
        {
            if (widget == null)
                return "No widget selected";
            else
                return $"{widget.Name} [{widget.Model}] {widget.Description}";
        }
    }
}

Widget.cs

using System;
using System.ComponentModel;

namespace ListItemFunctionBinding
{
    public class Widget : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private Guid _id;
        private string _name;
        private string _model;
        private string _description;

        public Widget MeMyselfAndI { get => this; }

        public Guid Id
        {
            get => _id;
            set
            {
                if (_id != value)
                {
                    _id = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Id)));
                }
            }
        }

        public string Name
        {
            get => _name;
            set
            {
                if (_name != value)
                {
                    _name = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name)));
                }
            }
        }

        public string Model
        {
            get => _model;
            set
            {
                if (_model != value)
                {
                    _model = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Model)));
                }
            }
        }

        public string Description
        {
            get => _description;
            set
            {
                if (_description != value)
                {
                    _description = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Description)));
                }
            }
        }
    }
}

Solution

  • I found the solution here:

    Pathless casting

    The native bind parser doesn't provide a keyword to represent this as a function parameter, but it does support pathless casting (for example, {x:Bind (x:String)}), which can be used as a function parameter. Therefore, {x:Bind MethodName((namespace:TypeOfThis))} is a valid way to perform what is conceptually equivalent to {x:Bind MethodName(this)}.

    So in my original example, I can use <TextBlock Text="{x:Bind local:MainViewModel.FormatWidget((local:Widget))}" /> to bind the current list item.

    This works perfectly! Yay!