.net - WPF 标签，如 ItemsControl/Selector

Question

在 WPF 中，如何构建像 ItemsControl/Selector 这样的标签？我需要一个看起来像标签的控件，但可以从 ItemsSource 属性提供数据集合并根据 DisplayMemberPath 属性显示文本。用户无法更改该值。它仅用于显示。

Answer 1

您只需要一个使用 StackPanel 作为其 ItemsPanel 的 ItemsControl，如下所示：

Xaml

<Grid>
    <Grid.DataContext>
        <local:TestViewModel/>
    </Grid.DataContext>
    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding ItemText}" Margin=5/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

或者，如果您想使用 DisplayMemberPath，您可以拥有

<Grid>
    <Grid.DataContext>
        <local:TestViewModel/>
    </Grid.DataContext>
    <ItemsControl ItemsSource="{Binding Items}" DisplayMemberPath="ItemText">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

查看模型

public class TestViewModel
{
    public TestViewModel()
    {
        Items = new List<TestItem>
                    {
                        new TestItem{ItemText = "One"},
                        new TestItem{ItemText = "Two"},
                        new TestItem{ItemText = "Three"},
                    };
    }
    public IEnumerable<TestItem> Items { get; set; }
}

public class TestItem
{
    public string ItemText { get; set; }
}

显示单个选定文本项的一个简单（有点 hacky）的解决方案是设置列表框的样式

<Grid>
    <Grid.DataContext>
        <local:TestViewModel/>
    </Grid.DataContext>
    <Grid.Resources>
        <Style TargetType="ListBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <TextBlock Text=
                                   "{Binding RelativeSource=
                                     {RelativeSource Mode=TemplatedParent}, 
                                     Path=SelectedItem.ItemText}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <ListBox Grid.Row="2" ItemsSource="{Binding Items}" SelectedIndex="2" />
</Grid>

更好的解决方案是创建基于 Selector 的自定义控件，并使控件可模板化。