How to use x:bind in the ItemTemplate WinUI

[sudharsan-narayanan]

In WinUI comboBox ItemTemplate, we can't be able to use x:bind to bind the data from view model please help me,

Find the below code,

`<ComboBox

x:Name="CountryComboBox"

ItemsSource="{x:Bind model.Countries}" >

        <ComboBox.ItemTemplate>

            <DataTemplate x:DataType="local:Country">

                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto" />

                        <ColumnDefinition Width="*" />

                    </Grid.ColumnDefinitions>

                    <ImageIcon

                Grid.Column="0"

                Width="24"

                Height="24"

                Source="{x:Bind CountryFlagPath}" />

                    <TextBlock

                Grid.Column="1" 

                VerticalAlignment="Center"

                Text="{x:Bind CountryName}" />

                </Grid>

            </DataTemplate>

        </ComboBox.ItemTemplate>

    </ComboBox>`
    
    **View Model**
    
    public class MainViewModel
{
    public List<Country> Countries = new()
    {
        new Country { CountryName = "India", CountryID = "1", CountryFlagPath = new BitmapImage(new Uri("ms-appx:///Assets/India.jpg")) },
        new Country { CountryName = "Philippines", CountryID = "2", CountryFlagPath = new BitmapImage(new Uri("ms-appx:///Assets/Philippines.png")) },
        new Country { CountryName = "United States of America", CountryID = "3", CountryFlagPath = new BitmapImage(new Uri("ms-appx:///Assets/USA.png")) },
    };
}

public class Country
{
    public string CountryID { get; set; }
    public BitmapImage CountryFlagPath { get; set; }
    public string CountryName { get; set; }
}

[TRadigk]

This is not possible (at the moment). With this article https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/x-bind-markup-extension#property-path-resolution one can find out a way to at least bind to static members of a class, a page in this example.
Only the {Binding} syntax allows to bind from inside a data template to any member outside.

Following sample code:

<Page
    x:Class="BindInDataTemplate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BindInDataTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    x:Name="TestPage">

    <Grid>
        <ListView ItemsSource="{x:Bind Songs}" SelectedIndex="{x:Bind SelectedComboboxIndex, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:SongItem">
                    <TextBlock
                        Margin="12"
                        FontSize="40"
                        ToolTipService.ToolTip="{Binding ElementName=TestPage, Path=SelectedToolTip, Mode=OneWay}"
                        Text="{x:Bind local:MainPage.GenerateSongTitle((local:SongItem))}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public List<string> EnumValues = Enum.GetNames<ElementSoundKind>().ToList();

    public static PageViewModel ViewModel { get; private set; }
    public List<SongItem> Songs { get; }

    private string _selectedToolTip;
    private int _selectedIndex;

    public int SelectedComboboxIndex
    {
        get => _selectedIndex;
        set => SetField(ref _selectedIndex, value);
    }

    public string SelectedToolTip
    {
        get => _selectedToolTip;
        set => SetField(ref _selectedToolTip, value);
    }

    public MainPage(PageViewModel viewModel)
    {
        ViewModel = viewModel;
        Songs = new List<SongItem>()
                {
                    new SongItem("Track 1", "Artist 1"),
                    new SongItem("Track 2", "Artist 2"),
                    new SongItem("Track 3", "Artist 3")
                };

        this.InitializeComponent();
        PropertyChanged += MainPage_PropertyChanged;
    }

    private void MainPage_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName.Equals(nameof(SelectedComboboxIndex)))
        {
            SelectedToolTip = Guid.NewGuid().ToString();
        }
    }

    public static string GenerateSongTitle(SongItem song)
    {
        return $"{song.TrackName} - {song.ArtistName}";
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

    private bool SetField<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}