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:单选框的是否选中。