Bind TokenizingTextBox.TokenItem to a ViewModel Observable Property (TemplateStudio for WinUI)

Question

I have a ViewModel with an observable property in it

[ObservableProperty]
private IList<string> _selectedTokens;

this property has been initialized as follows:

_selectedTokens = new List<string>();
_selectedTokens.Add(@"Z:\Exchange");

This property is binded to the TokenizedTextBox as follows

<controls:TokenizingTextBox
    x:Name="TokenBox"
    MaxHeight="104"
    HorizontalAlignment="Stretch"
    ItemsSource="{x:Bind ViewModel.SelectedTokens}"
    MaximumTokens="3"
    PlaceholderText="Add Locations"
    TextMemberPath="Text"
    TokenDelimiter=",">
    <controls:TokenizingTextBox.SuggestedItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="Accept" />
                <TextBlock
                    Padding="4,0,0,0"
                    Text="ttt" />
            </StackPanel>
        </DataTemplate>
    </controls:TokenizingTextBox.SuggestedItemTemplate>
    <controls:TokenizingTextBox.TokenItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="Admin" />
                <TextBlock
                    Padding="4,0,0,0"
                    Text="{Binding ???}" />
            </StackPanel>
        </DataTemplate>
    </controls:TokenizingTextBox.TokenItemTemplate>
    <controls:TokenizingTextBox.QueryIcon>
        <SymbolIconSource Symbol="Add" />
    </controls:TokenizingTextBox.QueryIcon>
</controls:TokenizingTextBox>

This code is work except that I don't see a text in tokenbox added via ViewModel initialization, all I can see is icon only. As you can see I have typed ??? in the xaml code where I should bind my collection to the data template but I just can't understand how to bind Collection correctly and make it work thus I can see text as well as icon...

Thank you in advance, Best regards, Maks.

P.S.

the xaml code above has been borrowed and adobpted from "WinUI Gallery 2.0" App

Answer 1

Adding items to a List won't notify the UI for updates. In this case, at least, you need to use ObservableCollection instead of List.

_selectedTokens = new ObservableCollection<string>();

UPDATE

The DataTemplate should be like this:

<controls:TokenizingTextBox.TokenItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <SymbolIcon Symbol="Admin" />
            <TextBlock
                Padding="4,0,0,0"
                Text="{Binding}" />
        </StackPanel>
    </DataTemplate>
</controls:TokenizingTextBox.TokenItemTemplate>

or even better:

<controls:TokenizingTextBox.TokenItemTemplate>
    <DataTemplate x:DataType="x:String">
        <StackPanel Orientation="Horizontal">
            <SymbolIcon Symbol="Admin" />
            <TextBlock
                Padding="4,0,0,0"
                Text="{x:Bind Mode=OneWay}" />
        </StackPanel>
    </DataTemplate>
</controls:TokenizingTextBox.TokenItemTemplate>