TokenizingTextBox

TokenizingTextBox è un controllo AutoSuggestBox avanzato che visualizzerà gli elementi selezionati come token all'interno della casella di testo. Un utente può visualizzare facilmente gli elementi selezionati o rimuoverli facilmente.

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="TokenizingTextBoxExperiment.Samples.TokenizingTextBoxSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:TokenizingTextBoxExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:CommunityToolkit.WinUI"
      mc:Ignorable="d">

    <StackPanel Orientation="Vertical"
                Spacing="4">
        <controls:TokenizingTextBox x:Name="TokenBox"
                                    MaxWidth="620"
                                    HorizontalAlignment="Left"
                                    ItemClick="TokenBox_ItemClick"
                                    ItemsSource="{x:Bind SelectedTokens, Mode=TwoWay}"
                                    Loaded="TokenBox_Loaded"
                                    MaximumTokens="5"
                                    PlaceholderText="Add actions"
                                    QueryIcon="{ui:FontIconSource Glyph=,
                                                                  FontSize=12}"
                                    SuggestedItemsSource="{x:Bind _samples, Mode=OneWay}"
                                    TextChanged="TextChanged"
                                    TextMemberPath="Text"
                                    TokenDelimiter=","
                                    TokenItemAdding="TokenItemCreating">
            <controls:TokenizingTextBox.Header>
                <TextBlock>
                    <Run Text="Start typing and select up to" />
                    <Run FontWeight="SemiBold"
                         Text="{Binding MaximumTokens, ElementName=TokenBox, Mode=OneWay}" />
                    <Run Text="actions" />
                </TextBlock>
            </controls:TokenizingTextBox.Header>
            <controls:TokenizingTextBox.SuggestedItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Viewbox Width="16">
                            <SymbolIcon Symbol="{Binding Icon}" />
                        </Viewbox>
                        <TextBlock Padding="8,0,0,0"
                                   Text="{Binding Text}" />
                    </StackPanel>
                </DataTemplate>
            </controls:TokenizingTextBox.SuggestedItemTemplate>
            <controls:TokenizingTextBox.TokenItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Viewbox Width="16">
                            <SymbolIcon Symbol="{Binding Icon}" />
                        </Viewbox>

                        <TextBlock Padding="8,0,0,0"
                                   Text="{Binding Text}" />
                    </StackPanel>
                </DataTemplate>
            </controls:TokenizingTextBox.TokenItemTemplate>
        </controls:TokenizingTextBox>


        <TextBlock Margin="0,24,0,0"
                   FontWeight="SemiBold"
                   Text="Text:" />
        <TextBlock x:Name="currentEdit" />

        <TextBlock Margin="0,24,0,0"
                   FontWeight="SemiBold"
                   Text="SelectedTokenText:" />
        <TextBlock x:Name="selectedItemsString" />

        <TextBlock Margin="0,24,0,0"
                   FontWeight="SemiBold"
                   Text="Items:" />
        <ItemsControl ItemsSource="{x:Bind SelectedTokens, Mode=OneWay}" />

        <TextBlock Margin="0,24,0,0"
                   FontWeight="SemiBold"
                   Text="Clicked item:" />
        <TextBlock x:Name="clickedItem" />
    </StackPanel>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Controls;

namespace TokenizingTextBoxExperiment.Samples;

[ToolkitSample(id: nameof(TokenizingTextBoxSample), "Basic sample", description: $"A sample for showing how to create and use a {nameof(TokenizingTextBox)}.")]
public sealed partial class TokenizingTextBoxSample : Page
{
    public readonly List<SampleDataType> _samples = new List<SampleDataType>()
        {
            new SampleDataType() { Text = "Account", Icon = Symbol.Account },
            new SampleDataType() { Text = "Add friend", Icon = Symbol.AddFriend },
            new SampleDataType() { Text = "Attach", Icon = Symbol.Attach },
            new SampleDataType() { Text = "Attach camera", Icon = Symbol.AttachCamera },
            new SampleDataType() { Text = "Audio", Icon = Symbol.Audio },
            new SampleDataType() { Text = "Block contact", Icon = Symbol.BlockContact },
            new SampleDataType() { Text = "Calculator", Icon = Symbol.Calculator },
            new SampleDataType() { Text = "Calendar", Icon = Symbol.Calendar },
            new SampleDataType() { Text = "Camera", Icon = Symbol.Camera },
            new SampleDataType() { Text = "Contact", Icon = Symbol.Contact },
            new SampleDataType() { Text = "Favorite", Icon = Symbol.Favorite },
            new SampleDataType() { Text = "Link", Icon = Symbol.Link },
            new SampleDataType() { Text = "Mail", Icon = Symbol.Mail },
            new SampleDataType() { Text = "Map", Icon = Symbol.Map },
            new SampleDataType() { Text = "Phone", Icon = Symbol.Phone },
            new SampleDataType() { Text = "Pin", Icon = Symbol.Pin },
            new SampleDataType() { Text = "Rotate", Icon = Symbol.Rotate },
            new SampleDataType() { Text = "Rotate camera", Icon = Symbol.RotateCamera },
            new SampleDataType() { Text = "Send", Icon = Symbol.Send },
            new SampleDataType() { Text = "Tags", Icon = Symbol.Tag },
            new SampleDataType() { Text = "UnFavorite", Icon = Symbol.UnFavorite },
            new SampleDataType() { Text = "UnPin", Icon = Symbol.UnPin },
            new SampleDataType() { Text = "Zoom", Icon = Symbol.Zoom },
            new SampleDataType() { Text = "ZoomIn", Icon = Symbol.ZoomIn },
            new SampleDataType() { Text = "ZoomOut", Icon = Symbol.ZoomOut },
        };

    public ObservableCollection<SampleDataType> SelectedTokens { get; set; }

    public TokenizingTextBoxSample()
    {
        this.InitializeComponent();
        SelectedTokens = new()
        {
            _samples[0],
            _samples[1]
        };
    
    }

    private void TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
    {
        currentEdit.Text = TokenBox.Text;
        SetSelectedTokenText();
    }

    private void SetSelectedTokenText()
    {
        selectedItemsString.Text = TokenBox.SelectedTokenText;
    }

    private void TokenItemCreating(object sender, TokenItemAddingEventArgs e)
    {
        // Take the user's text and convert it to our data type (if we have a matching one).
#if !HAS_UNO
        e.Item = _samples.FirstOrDefault((item) => item.Text!.Contains(e.TokenText, StringComparison.CurrentCultureIgnoreCase));
#else
        e.Item = _samples.FirstOrDefault((item) => item.Text!.Contains(e.TokenText));
#endif
        // Otherwise, create a new version of our data type
        if (e.Item == null)
        {
            e.Item = new SampleDataType()
            {
                Text = e.TokenText,
                Icon = Symbol.OutlineStar
            };
        }
    }

    private void TokenBox_ItemClick(object sender, ItemClickEventArgs e)
    {
        if (e.ClickedItem is SampleDataType selectedItem)
        {
            clickedItem.Text = selectedItem.Text!;
        }
    }

    private void TokenBox_Loaded(object sender, RoutedEventArgs e)
    {
        SetSelectedTokenText();
    }
}