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

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

回答2件

こんにちは。

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

自己解決

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>