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

Andrew KeepCoding · Accepted Answer · 2023-07-22T13:04:11.653

2

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>

edited Jul 22 '23 at 13:04

answered Jul 16 '23 at 08:15

Andrew KeepCoding

7,040
2
14
21

1

As an additional tip, since `[ObservableProperty]` will make the CommunityToolkit.Mvvm's source generator create a `SelectedTokens` property for you, you should prefer using it. This is very unlikely in this case, but in case you update the `_selectedTokens` with a new collection, it won't notify the UI its change. – Andrew KeepCoding Jul 16 '23 at 08:21
doesn't work at all – Max Zaikin Jul 22 '23 at 08:08
The question was not about how initialize property the question was which property to bind text in xaml in order to be displayed with the icon. Note that the icon actually shown with now issues, butg text is missing... – Max Zaikin Jul 22 '23 at 08:09
1

I updated my answer. Hope it helps. – Andrew KeepCoding Jul 22 '23 at 13:04
Andrew, stupid me :) Gosh, my friend you are the best. Thank you so much! – Max Zaikin Jul 25 '23 at 11:22
Can you try an empty `TokenizingTextBox`? Then add features one by one to check what is causing the problem? – Andrew KeepCoding Jul 25 '23 at 11:55

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

1 Answers1