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>

样式如下:




posted @ 2021-08-13 23:20  double64  阅读(6656)  评论(1编辑  收藏  举报