WPF ComboBoxのドロップダウンの表記と選択部の表記を変更したい

Question

前提・実現したいこと

WPFのComboBoxで行き詰まっております。

ドロップダウンで表記されるアイテムは複数行で、選択状態された状態では一行で表記したいと思っています。
こういった事は可能なのでしょうか？

ドロップダウン時には上図のように複数行表示。これは実現できています。

選択された状態は一行で表示させたい。
上図では出来ていないですが、「0 山田太郎」の一行で表示したいです。

Personクラス内に下記プロパティをつくり、DisplayMemberPathプロパティにバインドした時は、

public string DispStr
{
    get { return string.Format("{0}{1}", ID, Name); }
}

System.Windows.Markup.XamlParseException
InvalidOperationException: DisplayMemberPath と ItemTemplate を両方とも設定できません。

というエラーでした。

ComboBox.SelectionBoxItemTemplateというそれらしいプロパティがあるのですが、使い方がいまいち分からないです。

お手数をお掛けしますが、お知恵をお貸しいただければさいわいです。
よろしくお願いいたします。

該当のソースコード

ミニマムコードですので、レイアウトは最小限で書いてしまっています。

<Window x:Name="my" x:Class="WpfApp2.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		xmlns:local="clr-namespace:WpfApp2"
		mc:Ignorable="d"
		Title="MainWindow" Height="450" Width="800">

	<StackPanel>
		<ComboBox ItemsSource="{Binding PersonList, ElementName=my}" 
				  SelectedItem="{Binding SelectedPerson, ElementName=my}">
			<ComboBox.ItemTemplate>
				<DataTemplate>
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition Width="Auto" />
						</Grid.ColumnDefinitions>

						<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding ID}"/>
						<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
						<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding LeftData.Data1}" />
						<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding RightData.Data1}" />

					</Grid>
				</DataTemplate>
			</ComboBox.ItemTemplate>
		</ComboBox>

		<TextBlock Text="{Binding SelectedPerson.RightData.Data1, ElementName=my}" />
		<TextBlock Text="{Binding SelectedPerson.LeftData.Data1, ElementName=my}" />

	</StackPanel>
</Window>

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace WpfApp2
{
	public partial class MainWindow : Window, INotifyPropertyChanged
	{

		public event PropertyChangedEventHandler PropertyChanged;
		protected virtual void RaisePropertyChanged([CallerMemberName]string propertyName = null)
		{
			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
		}

		public class RLData
		{
			public string Data1 { get; set; }
		}

		public class Person
		{
			public int ID { get; set; }
			public string Name { get; set; }
			public RLData LeftData { get; set; }
			public RLData RightData { get; set; }
		}

		public IList<Person> PersonList { get; set; } = new ObservableCollection<Person>();

		private Person _selectedPerson = new Person();
		public Person SelectedPerson
		{
			get { return _selectedPerson; }
			set
			{
				_selectedPerson = value;
				RaisePropertyChanged();
			}
		}

		public MainWindow()
		{
			InitializeComponent();

			PersonList.Add(new Person()
				{
					ID = 0,
					Name = "山田太郎",
					LeftData = new RLData() { Data1 = "aaa" },
					RightData = new RLData() { Data1 = "bbb" }
				}
			);

			PersonList.Add(new Person()
				{
					ID = 1,
					Name = "田中花子",
					LeftData = new RLData() { Data1 = "ccc" },
					RightData = new RLData() { Data1 = "ddd" }
				}
			);
		}
	}
}

補足情報（FW/ツールのバージョンなど）

Windows 10
Visual Studio 2019
.NET Framework 4.8

解決いたしました(以下、解決コード)

public class PersonTemplateSelector : DataTemplateSelector
{
	public override DataTemplate SelectTemplate(object item, DependencyObject container)
	{
		ContentPresenter presenter = (ContentPresenter)container;
		if (presenter.TemplatedParent is ComboBox)
			return (DataTemplate)presenter.FindResource("SingleLine");
		else
			return (DataTemplate)presenter.FindResource("MultiLine");
	}
}

上記クラスを追加しまして、

<Window.Resources>
	<DataTemplate x:Key="SingleLine">
		<StackPanel Orientation="Horizontal">
			<TextBlock Text="{Binding ID}"/>
			<TextBlock Text="{Binding Name}" />
		</StackPanel>
	</DataTemplate>

	<DataTemplate x:Key="MultiLine">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>

			<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding ID}"/>
			<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
			<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding LeftData.Data1}" />
			<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding RightData.Data1}" />
		</Grid>
	</DataTemplate>
</Window.Resources>

リソースにDataTemplateを２つ用意し、

<ComboBox ItemsSource="{Binding PersonList, ElementName=my}" 
  　　　　SelectedItem="{Binding SelectedPerson, ElementName=my}">
　　　　<ComboBox.ItemTemplateSelector>
　　　　　　　　<local:PersonTemplateSelector />
　　　　</ComboBox.ItemTemplateSelector>
</ComboBox>

Answer 1

DataTemplateSelectorが正解だとは思いますが、xamlだけでやりたい場合の例です。
templates - WPF: How to customize SelectionBoxItem in ComboBox - Stack Overflow

ContentPresenterが2重になるので、解決コードと等価ではありません。

<Window
  x:Class="Q246077.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450"
  ThemeMode="System">
  <Window.Resources>
    <DataTemplate x:Key="SingleLine">
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding ID}" />
        <TextBlock Text="{Binding Name}" />
      </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="MultiLine">
      <Grid ColumnDefinitions="Auto,*" RowDefinitions="*,*">
        <TextBlock Text="{Binding ID}" />
        <TextBlock Grid.Column="1" Text="{Binding Name}" />
        <TextBlock Grid.Row="1" Text="{Binding LeftData.Data1}" />
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding RightData.Data1}" />
      </Grid>
    </DataTemplate>
  </Window.Resources>
  <StackPanel>

    <ComboBox ItemsSource="{Binding PersonList}" SelectedItem="{Binding SelectedPerson}">
      <ComboBox.ItemTemplate>
        <DataTemplate>
          <ContentPresenter x:Name="presenter" Content="{Binding}" ContentTemplate="{StaticResource MultiLine}" />
          <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBoxItem}}" Value="{x:Null}">
              <Setter TargetName="presenter" Property="ContentTemplate" Value="{StaticResource SingleLine}" />
            </DataTrigger>
          </DataTemplate.Triggers>
        </DataTemplate>
      </ComboBox.ItemTemplate>
    </ComboBox>

    <TextBlock Text="{Binding SelectedPerson.RightData.Data1}" />
    <TextBlock Text="{Binding SelectedPerson.LeftData.Data1}" />
  </StackPanel>
</Window>

using System.Windows;
using CommunityToolkit.Mvvm.ComponentModel;

namespace Q246077;

public partial class ViewModel : ObservableObject
{
    public class RLData
    {
        public string? Data1 { get; set; }
    }

    public class Person
    {
        public int ID { get; set; }
        public string? Name { get; set; }
        public RLData? LeftData { get; set; }
        public RLData? RightData { get; set; }
    }

    public IList<Person> PersonList { get; }
    [ObservableProperty] public partial Person? SelectedPerson { get; set; }

    public ViewModel()
    {
        PersonList = [
            new()
            {
                ID = 0,
                Name = "山田太郎",
                LeftData = new() { Data1 = "aaa", },
                RightData = new() { Data1 = "bbb", },
            },
            new()
            {
                ID = 1,
                Name = "田中花子",
                LeftData = new() { Data1 = "ccc", },
                RightData = new() { Data1 = "ddd", },
            },
        ];
    }
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
}

NuGet Gallery | CommunityToolkit.Mvvm

Answer 2

以下の記事が参考になりますかね？
https://www.codeproject.com/Articles/47923/Using-a-different-DataTemple-when-a-WPF-ComboBox-i

Comments

[lain]

遅くなりましたが、ご提示して頂いた記事で無事解決出来ました。
ありがとうございました！