WPF CheckBox 复选框绑定 Binding
<Window.DataContext>
<local:VMTempTest/>
</Window.DataContext>
<Grid>
<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.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Content}" IsChecked="{Binding IsCheck}"
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>
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; }
set
{
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
{
get
{
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>
<Grid>
<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>
样式如下: