MetadataControl

箇条書きの区切り記号は、Separator プロパティを使用してカスタマイズできます。 AccessibleSeparator は、アクセス可能な文字列を生成するために、Separator の代りとして使用されます。

このコントロールには MetadataItem のリストが必要です。 各項目は、テキストまたは (Command プロパティが設定されている場合には) ハイパーリンクとして表示されます。

TextBlock では、既定のコントロール テンプレートが使われています。 この TextBlock のスタイルは、プロパティ TextBlockStyle によりカスタマイズできます。

XAML

<!--  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="MetadataControlExperiment.Samples.MetadataControlSample"
      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:MetadataControlExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <controls:MetadataControl x:Name="metadataControl"
                                  AccessibleSeparator="{x:Bind AccessibleSeparator, Mode=OneWay}"
                                  Separator="{x:Bind Separator, Mode=OneWay}" />

        <TextBlock x:Name="OutputTxt"
                   Grid.Row="1"
                   Margin="0,0,0,24"
                   FontWeight="SemiBold" />
        <StackPanel Grid.Row="2"
                    Orientation="Horizontal"
                    Spacing="8">
            <Button Click="AddLabel_Click"
                    Content="Add label" />
            <Button Click="AddCommand_Click"
                    Content="Add command" />
            <Button Click="Clear_Click"
                    Content="Clear" />
        </StackPanel>
    </Grid>
</Page>

C#

// 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;
using System.Windows.Input;

namespace MetadataControlExperiment.Samples;

/// <summary>
/// An example sample page of a custom control inheriting from Panel.
/// </summary>
[ToolkitSampleTextOption("Separator", " • ", Title = "Separator")]
[ToolkitSampleTextOption("AccessibleSeparator", ", ", Title = "AccessibleSeparator")]

[ToolkitSample(id: nameof(MetadataControlSample), "MetadataControl", description: $"A sample for showing how to create and use a {nameof(MetadataControl)} control.")]
public sealed partial class MetadataControlSample : Page
{
    private static readonly string[] Labels = "Lorem ipsum dolor sit amet consectetur adipiscing elit".Split(' ');

    private readonly Random _random;
    private readonly ObservableCollection<MetadataItem> _units;
    private readonly DelegateCommand<object> _command;

    public MetadataControlSample()
    {
        this.InitializeComponent();
        _random = new Random();
        _units = new ObservableCollection<MetadataItem>
        {
            new MetadataItem { Label = GetRandomLabel() },
            new MetadataItem { Label = GetRandomLabel() }
        };
        _command = new DelegateCommand<object>(OnExecuteCommand);
        metadataControl.Items = _units;
    }

    private string GetRandomLabel() => Labels[_random!.Next(Labels.Length)];

    private void OnExecuteCommand(object obj)
    {
        OutputTxt.Text = $"Command invoked - parameter: {obj}";
    }

    private void AddLabel_Click(object sender, RoutedEventArgs e)
    {
        if (_units != null)
        {
            _units.Add(new MetadataItem { Label = GetRandomLabel() });
        }
    }

    private void AddCommand_Click(object sender, RoutedEventArgs e)
    {
        if (_units != null)
        {
            var label = GetRandomLabel();
            _units.Add(new MetadataItem
            {
                Label = label,
                Command = _command!,
                CommandParameter = label,
            });
        }
    }

    private void Clear_Click(object sender, RoutedEventArgs e)
    {
        if (_units != null)
        {
            OutputTxt.Text = "";
            _units.Clear();
        }
    }
}

例

ページにコントロールを追加します。

XAML

<controls:MetadataControl
    x:Name="metadataControl"
    Separator="   "
    AccessibleSeparator=", "/>

コントロールに項目を追加します。

cs

metadataControl.Items = new[]
{
    new MetadataItem { Label = "Hello" },
    new MetadataItem { Label = "World", Command = myCommand },
};

MetadataItem

MetadataItem には、MetadataControl に表示される 1 つのエントリに関する情報が含まれています