WPF RadioButton单选框绑定 Binding

单个 CheckBox

XAML:

<Window.DataContext>
    <local:VMTempTest/>
</Window.DataContext>
<Grid>
    <StackPanel Margin="10,0,0,50">
        <TextBlock Text="单选框" FontWeight="Bold" Margin="0,5,0,5" ></TextBlock>
        <DockPanel x:Name="RadioButton" >
            <StackPanel DockPanel.Dock="Left" >
                <RadioButton Content="{Binding SingleRadio}" IsChecked="{Binding IsSingleRadioCheck}"  HorizontalAlignment="Left"  >
                </RadioButton>
            </StackPanel>
            <StackPanel DockPanel.Dock="Right" Margin="20 0 0 0" Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock Text="{Binding IsSingleRadioCheck,StringFormat='结果:\{0\}'}" ></TextBlock>
            </StackPanel>
        </DockPanel>
    </StackPanel>
</Grid>

ViewModel:

public class VMTempTest : ViewModelBase
{
    public VMTempTest()
    {
        SingleRadio = "喜欢吃苹果?";
        IsSingleRadioCheck = false;
    }

    private String singleRadio;
    /// <summary>
    /// 单选框相关
    /// </summary>
    public String SingleRadio
    {
        get { return singleRadio; }
        set { singleRadio = value; RaisePropertyChanged(() => SingleRadio); }
    }

    private Boolean isSingleRadioCheck;
    /// <summary>
    /// 单选框是否选中
    /// </summary>
    public Boolean IsSingleRadioCheck
    {
        get { return isSingleRadioCheck; }
        set { isSingleRadioCheck = value; RaisePropertyChanged(() => IsSingleRadioCheck); }
    }
}

说明:注意这边使用到了两个属性: SingleRadio,IsSingleRadioCheck,一个用于显示单选框内容,一个用于表示是否选中

组合单选框

XAML:

<Window.DataContext>
    <local:VMTempTest/>
</Window.DataContext>
<Grid>
    <StackPanel Margin="20">
        <TextBlock Text="组合单选框" FontWeight="Bold"></TextBlock>
        <DockPanel x:Name="GroupRadioButton" >
            <StackPanel DockPanel.Dock="Left">
                <ItemsControl ItemsSource="{Binding RadioButtons}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <RadioButton Content="{Binding Content}" IsChecked="{Binding IsCheck}" GroupName="RadioButtons"
                                             Command="{Binding DataContext.RadioCheckCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl}}">
                            </RadioButton>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>

            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="{Binding RadioButton.Content,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()
    {
        RadioButtons = 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> radioButtons;
    /// <summary>
    /// 组合单选框列表
    /// </summary>
    public List<CompBottonModel> RadioButtons
    {
        get { return radioButtons; }
        set
        {
            radioButtons = value; RaisePropertyChanged(() => RadioButtons);
        }
    }

    private CompBottonModel radioButton;
    /// <summary>
    /// 组合单选框 选中值
    /// </summary>
    public CompBottonModel RadioButton
    {
        get { return radioButton; }
        set { radioButton = value; RaisePropertyChanged(() => RadioButton); }
    }


    private RelayCommand radioCheckCommand;
    /// <summary>
    /// 单选框命令
    /// </summary>
    public RelayCommand RadioCheckCommand
    {
        get
        {
            if (radioCheckCommand == null)
                radioCheckCommand = new RelayCommand(() => ExcuteRadioCommand());
            return radioCheckCommand;

        }
        set { radioCheckCommand = value; }
    }

    private void ExcuteRadioCommand()
    {
        RadioButton = RadioButtons.Where(p => p.IsCheck).First();
    }
}

这边使用了 ItemsControl,可以根据模板来定义内容,我们在模板中放置我们需要用到的内容。这边需要注意的是:GroupName 用一样的,来代表这是一个单选控件组合。

这边有是三个属性进行绑定相关:

RadioButtons:单选框列表数据(循环绑定);Content:单选框显示的内容;IsCheck:单选框的是否选中。




posted @ 2021-08-12 23:25  double64  阅读(5622)  评论(0编辑  收藏  举报