Q&A
###前提・実現したいこと
１．ボタンをデータにより動的に生成する
２．そのボタンをラジオボタンのように排他的に選択させたい(タッチ操作のためラジオボタンは避けたい)
３．選択中のボタンだけ色を変えたい(□□■□→□■□□のような感じ)
４．選択中のボタンに設定した値を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件
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
総合スコア4791
0
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
総合スコア10049
0
自己解決
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>
投稿2017/02/04 04:57
総合スコア7
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。