WPFで排他的に選択させる

###前提・実現したいこと
１．ボタンをデータにより動的に生成する
２．そのボタンをラジオボタンのように排他的に選択させたい(タッチ操作のためラジオボタンは避けたい)
３．選択中のボタンだけ色を変えたい(□□■□→□■□□のような感じ)
４．選択中のボタンに設定した値をViewModelに反映

上記のようなことを実現したのですがアドバイスをいただけないでしょうか
よろしくお願いします

###試したこと
XAMLの入れ子構造がいまいちわかっていないのですが、１～３に関してはこういう方向でしょうか？

XAML
1<ListBox Name="listBox">
2    <ListBox.ItemTemplate>
3        <DataTemplate>
4            <Button Content="{ Binding ColumnName }" />
5        </DataTemplate>
6    </ListBox.ItemTemplate>
7    <ListBox.ItemContainerStyle>
8        <Style TargetType="ListBoxItem">
9            <Style.Triggers>
10                <Trigger Property="IsSelected" Value="True">
11                    <Setter Property="Background" Value="BlueViolet" />
12                </Trigger>
13            </Style.Triggers>
14        </Style>
15    </ListBox.ItemContainerStyle>
16</ListBox>

４に関しては
1.ボタンのクリックイベントで値を拾う

XAML
1<Button Tag="{ Binding }" Click="Button_Click" />
2private void Button_Click(object sender, RoutedEventArgs e)
3{
4    var btn = sender as Button;
5    var val = btn.Tag.XXX;
6}

2.DataTemplateの中身をラジオボタンにしてみる＋IValueConverterを使う？
@IT ラジオボタンを双方向バインディングするには？

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2015
Visual C# 2015

行動規範の内容に同意します

回答3件

こんにちは。

XML
1<ItemsControl ItemsSource="{Binding Items}">
2    <ItemsControl.ItemTemplate>
3        <DataTemplate>
4            <RadioButton Content="{Binding Display}"
5                         IsChecked="{Binding Checked}"
6                         GroupName="radio">
7                <RadioButton.Template>
8                    <ControlTemplate TargetType="RadioButton">
9                        <ToggleButton Content="{TemplateBinding Content}"
10                                      IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
11                            <ToggleButton.Style>
12                                <Style TargetType="ToggleButton">
13                                    <Style.Triggers>
14                                        <Trigger Property="IsChecked" Value="True">
15                                            <Setter Property="Foreground" Value="Red" />
16                                        </Trigger>
17                                    </Style.Triggers>
18                                </Style>
19                            </ToggleButton.Style>
20                        </ToggleButton>
21                    </ControlTemplate>
22                </RadioButton.Template>
23            </RadioButton>
24        </DataTemplate>
25    </ItemsControl.ItemTemplate>
26</ItemsControl>

csharp
1public partial class MainWindow : Window
2{
3    public MainWindow()
4    {
5        InitializeComponent();
6        DataContext = new MainWindowViewModel();
7    }
8}
9
10public class MainWindowViewModel
11{
12    public ObservableCollection<Item> Items { get; set; } = new ObservableCollection<Item>
13    {
14        new Item { Display = "AAA", Checked = true },
15        new Item { Display = "BBB", Checked = false },
16        new Item { Display = "CCC", Checked = false },
17    };
18}
19
20public class Item
21{
22    public string Display { get; set; }
23    public bool Checked { get; set; }
24}

[３．選択中のボタンだけ色を変えたい] が要件にあるのでToggleButtonではなくIsCheckedをトリガーにBackgroundColorを変更する任意のコントロールのほうが良いかもです。

投稿2017/02/03 17:00

Tak1wa

総合スコア4791

XAMLの入れ子構造がいまいちわかっていないのですが、１～３に関してはこういう方向でしょうか？

はい。
「動的に生成」・「排他的に選択」であれば、SelectionMode.SingleのListBoxを使用するのは至極真っ当だと思います。

ただButtonを使うのはいまいちです。
意味的にはRadioButtonを使うべきで、↓のようにすれば簡単にボタンの見た目になります。
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" />

選択項目を何か（近くに）表示するのであれば、TabControlのほうが適切かもしれません。

４に関しては

SelectedItemにバインドするだけです。

xml
1<Window
2  x:Class="Q64524.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450"
7  ThemeMode="System">
8  <Window.Resources>
9    <Style x:Key="RadioStyle" TargetType="ListBoxItem">
10      <Setter Property="Template">
11        <Setter.Value>
12          <ControlTemplate TargetType="ListBoxItem">
13            <!--
14              RadioButtonが実はグループ化されていないことに注意！
15              ListBoxItemがコンテナ扱いになるのか、別々のグループになってしまう。
16              ListBoxひとつならGroupNameを入れるだけだが、使いまわしたい場合なかなか悩ましい
17              排他処理はListBoxに任せてしまっていいかなぁ^^;
18            -->
19            <RadioButton
20              MinWidth="100"
21              MinHeight="50"
22              Margin="4,0"
23              Content="{Binding ColumnName}"
24              IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
25              Style="{StaticResource {x:Type ToggleButton}}" />
26          </ControlTemplate>
27        </Setter.Value>
28      </Setter>
29    </Style>
30  </Window.Resources>
31  <StackPanel>
32    <ListBox
33      HorizontalAlignment="Center"
34      ItemContainerStyle="{StaticResource RadioStyle}"
35      ItemsSource="{Binding Items}"
36      SelectedItem="{Binding SelectedItem}">
37      <ItemsControl.ItemsPanel>
38        <ItemsPanelTemplate>
39          <StackPanel Orientation="Horizontal" />
40        </ItemsPanelTemplate>
41      </ItemsControl.ItemsPanel>
42    </ListBox>
43    <TextBlock HorizontalAlignment="Center" Text="{Binding SelectedItem.ColumnName}" />
44
45    <Separator Margin="8" />
46
47    <!--
48      こういう使い方もある
49      [方法: 階層データでマスター詳細パターンを使用する - WPF .NET Framework | Microsoft Learn](https://learn.microsoft.com/ja-jp/dotnet/desktop/wpf/data/how-to-use-the-master-detail-pattern-with-hierarchical-data)
50      SelectedItemをバインドしていないので一番上と連動していない
51      もちろんバインドすれば連動する。あるいは一番上もIsSynchronizedWithCurrentItem="True"を付ける
52    -->
53    <ListBox
54      HorizontalAlignment="Center"
55      IsSynchronizedWithCurrentItem="True"
56      ItemContainerStyle="{StaticResource RadioStyle}"
57      ItemsSource="{Binding Items}">
58      <ItemsControl.ItemsPanel>
59        <ItemsPanelTemplate>
60          <StackPanel Orientation="Horizontal" />
61        </ItemsPanelTemplate>
62      </ItemsControl.ItemsPanel>
63    </ListBox>
64    <TextBlock HorizontalAlignment="Center" Text="{Binding Items/ColumnName}" />
65
66    <Separator Margin="8" />
67
68    <!--  SelectedItemをバインドしてるので一番上と連動している  -->
69    <TabControl
70      HorizontalAlignment="Center"
71      BorderThickness="0"
72      ItemsSource="{Binding Items}"
73      SelectedItem="{Binding SelectedItem}">
74      <TabControl.ItemContainerStyle>
75        <Style TargetType="TabItem">
76          <Setter Property="Template">
77            <Setter.Value>
78              <ControlTemplate TargetType="TabItem">
79                <RadioButton
80                  MinWidth="100"
81                  MinHeight="50"
82                  Margin="4,0"
83                  Content="{Binding ColumnName}"
84                  IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
85                  Style="{StaticResource {x:Type ToggleButton}}" />
86              </ControlTemplate>
87            </Setter.Value>
88          </Setter>
89        </Style>
90      </TabControl.ItemContainerStyle>
91      <TabControl.ContentTemplate>
92        <DataTemplate>
93          <TextBlock HorizontalAlignment="Center" Text="{Binding ColumnName}" />
94        </DataTemplate>
95      </TabControl.ContentTemplate>
96    </TabControl>
97  </StackPanel>
98</Window>

cs
1using System.Windows;
2using CommunityToolkit.Mvvm.ComponentModel;
3
4namespace Q64524;
5
6public partial class MainWindow : Window
7{
8    public MainWindow()
9    {
10        InitializeComponent();
11        DataContext = new ViewModel();
12    }
13}
14
15public record Item(string ColumnName);
16
17public partial class ViewModel : ObservableObject
18{
19    public List<Item> Items { get; } = [new("AAA"), new("BBB"), new("CCC")];
20    [ObservableProperty] private Item? _SelectedItem;
21}

NuGet Gallery | CommunityToolkit.Mvvm

投稿2024/11/19 16:15

TN8001

総合スコア10108

自己解決

Tak1waさま回答ありがとうございます。
最終的にstackoverflowの記事も参考にいじってみたところ下記の通りに実装できました

XML
1<ItemsControl ItemsSource="{Binding Items}">
2    <ItemsControl.ItemsPanel>
3        <ItemsPanelTemplate>
4            <StackPanel Orientation="Horizontal" />
5        </ItemsPanelTemplate>
6    </ItemsControl.ItemsPanel>
7    <ItemsControl.ItemTemplate>
8        <DataTemplate>
9            <RadioButton Content="{Binding Display}"
10                     IsChecked="{Binding Checked}"
11                     GroupName="radio" Width="100" Height="50" Margin="10,0,0,0">
12                
13                <RadioButton.Template>
14                    <ControlTemplate TargetType="RadioButton">
15                        <ToggleButton Content="{TemplateBinding Content}" Tag="{ Binding }"
16                                  IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
17                            <ToggleButton.Style>
18                                <Style TargetType="ToggleButton">
19                                    <!--↓追加分 -->
20                                    <Setter Property="Template">
21                                        <Setter.Value>
22                                            <ControlTemplate TargetType="ToggleButton">
23                                                <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
24                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
25                                                </Border>
26                                            </ControlTemplate>
27                                        </Setter.Value>
28                                    </Setter>
29                                    <!--↑追加分 -->
30                                    <Style.Triggers>
31                                        <Trigger Property="IsChecked" Value="True">
32                                            <Setter Property="Background" Value="Red" />
33                                        </Trigger>
34                                    </Style.Triggers>
35                                </Style>
36                            </ToggleButton.Style>
37                        </ToggleButton>
38                    </ControlTemplate>
39                </RadioButton.Template>
40            </RadioButton>
41        </DataTemplate>
42    </ItemsControl.ItemTemplate>
43</ItemsControl>