.net - ItemsControl/SelectorのようなWPFラベル

Question

WPFで、ItemsControl / Selectorのようなラベルを作成するにはどうすればよいですか？ラベルのように見えるコントロールが必要ですが、ItemsSourceプロパティからデータのコレクションをフィードし、DisplayMemberPathプロパティに従ってテキストを表示できます。ユーザーは値を変更できません。表示専用です。

Answer 1

必要なのは、次のような ItemsPanel として StackPanel を使用する 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; }
}

単一の選択されたテキスト項目を表示するための単純な (少しハックな) 解決策は、リスト ボックスのスタイルを設定することです。

<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>

より良い解決策は、セレクターに基づいてカスタム コントロールを作成し、コントロールをテンプレート化可能にすることです。