Models:
public class CompBottonModel : ObservableObject
public CompBottonModel()
//构造函数
private String content;
/// <summary>
/// 单选框相关
/// </summary>
public String Content
get { return content; }
set { content = value; RaisePropertyChanged(() => Content); }
private Boolean isCheck;
/// <summary>
/// 单选框是否选中
/// </summary>
public Boolean IsCheck
get { return isCheck; }
set { isCheck = value; RaisePropertyChanged(() => IsCheck); }
ViewModel:
public class VMTempTest : ViewModelBase
public VMTempTest()
CheckButtons = new List<CompBottonModel>()
new CompBottonModel(){ Content="苹果", IsCheck = false },
new CompBottonModel(){ Content="香蕉", IsCheck = false },
new CompBottonModel(){ Content="梨", IsCheck = false },
new CompBottonModel(){ Content="樱桃", IsCheck = false }
private List<CompBottonModel> checkButtons;
/// <summary>
/// 组合复选框
/// </summary>
public List<CompBottonModel> CheckButtons
get { return checkButtons; }
checkButtons = value; RaisePropertyChanged(() => CheckButtons);
private String checkInfo;
/// <summary>
/// 确认框选中信息
/// </summary>
public String CheckInfo
get { return checkInfo; }
set { checkInfo = value; RaisePropertyChanged(() => CheckInfo); }
private RelayCommand checkCommand;
/// <summary>
/// 复选框命令
/// </summary>
public RelayCommand CheckCommand
if (checkCommand == null)
checkCommand = new RelayCommand(() => ExcuteCheckCommand());
return checkCommand;
set { checkCommand = value; }
private void ExcuteCheckCommand()
CheckInfo = "";
if (CheckButtons != null && CheckButtons.Count > 0)
var list = CheckButtons.Where(p => p.IsCheck);
if (list.Count() > 0)
foreach (var l in list)
CheckInfo += l.Content + ",";
CheckInfo = CheckInfo.TrimEnd(','); // 把最后一个逗号删掉
ItemsControl中的项目间距和水平排列控制
如果想让上面的 checkbox 按水平排列,并设置项目之间的间距,做如下修改。
<DataTemplate>
增加一个 Margin="0 0 10 0
。
ItemsControl
赋值属性 panel 为水平。
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<StackPanel Margin="10">
<TextBlock Text="复合框" FontWeight="Bold" Margin="0,5,0,5" ></TextBlock>
<DockPanel x:Name="GroupCheckButton" >
<StackPanel DockPanel.Dock="Left" >
<ItemsControl ItemsSource="{Binding CheckButtons}" x:Name="cbt">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Content}" IsChecked="{Binding IsCheck}" Margin="0 0 10 0"
Command="{Binding DataContext.CheckCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl}}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<StackPanel DockPanel.Dock="Right" Margin="50 0 0 0" VerticalAlignment="Center" Orientation="Horizontal">
<TextBlock Text="{Binding CheckInfo,StringFormat='结果:\{0\}'}" ></TextBlock>
</StackPanel>
</DockPanel>
</StackPanel>
</Grid>
样式如下: