单选按钮验证

Posted 2023-03-05

【中文标题】单选按钮验证

【英文标题】：Validation on Radio Buttons

【发布时间】：2015-09-01 20:04:48

【问题描述】：

我真的不知道该怎么说，所以就这样吧。

我的 WPF 应用程序中的表单上有一些单选按钮，这些按钮经过验证。它们基本上是此表单的必填字段。

当我开始填写表格时，两个单选按钮都标有红色边框，但是当我选择其中一个按钮时。发生这种情况：

我该如何解决这个问题？我知道我可以将控件更改为 ComboBox 之类的东西，但通常电子表单上的性别字段是单选按钮。

我尝试让验证显示在包含单选按钮的堆栈面板上，但什么也没做。

我也不能真正为性别设置默认值，以防它被忽视并导致进一步的投诉/误解。

上图的 XAML 在这里：

<StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal">
    <RadioButton GroupName="Gender" Content="Male" IsChecked="Binding Gender, Converter=StaticResource GenderToCharConverter, ConverterParameter=M"/>
    <RadioButton GroupName="Gender" Content="Female" IsChecked="Binding Gender, Converter=StaticResource GenderToCharConverter, ConverterParameter=F"/>
</StackPanel>

编辑：为了更清楚地说明我的问题是什么，当我打开此表单的新实例时，两个单选按钮都标有验证边框，因为它们应该是必需的此表单上的字段。

When a gender is selected, the validation border is only removed from the radio button that is clicked when really I would imagine that both borders should be removed as the data-bound property now has a value.

似乎删除此边框的唯一方法是单击要删除的其他选项，然后重新选择原始值。这种情况不应该发生在此表单上，因为这可能会使用户感到困惑，并让他们误认为性别控制仍然存在问题，而且看起来就像一个错误。

编辑 2： This 问题修复了边框显示，但随后隐藏了需要选择的单选按钮之一这一事实。有没有办法在 StackPanel 周围放置边框而不是单个单选按钮。似乎完全没有关于如何在 Google 上实现这一点的示例，这完全是愚蠢的。

编辑3：相关代码。

// Gender property in the viewmodel.
[Required(AllowEmptyStrings=false, ErrorMessage="Gender is a required field.")]
    public string Gender
    
        get  return _currentMember.Gender; 
        set
        
            if(value != _currentMember.Gender)
            
                _currentMember.Gender = value;
                RaisePropertyChanged();
                Validate(_currentMember.Gender);
            
        
    

// Converter
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    
            string input = (string)value;
            string test = (string)parameter;
            return input == test;
    

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    
        if (value == null || !(value is bool))
            return string.Empty;

        if (parameter == null || !(parameter is string))
            return string.Empty;

        if ((bool)value)
            return parameter.ToString();

        else
            return string.Empty;
    

【问题讨论】：

你到底有什么问题？

当我打开表单时，验证会将两个单选按钮标记为错误，这是有道理的，因为其中一个是必需的。当我选择其中一个时，另一个单选按钮仍然标有错误。

为什么没有“未指定”的性别选项？这也会给你一个不错的默认选项。

@Jack，我做不到。必须为此特定表格指定性别。除非我误解了你所说的？

你能发布你的 ViewModel 和你的转换器代码吗？

【参考方案1】：

在我看来，您有 2 个解决方案：第一个 - 最简单的一个 - 是为 Gender 属性设置默认值。这样，两个单选按钮中的一个将被选中，并且始终满足“必需”属性。

第二种解决方案是将 ListView “屏蔽”为 RadioButtonGroup。对于我的示例，我使用了一个非常直观的框架来通过使用属性来执行验证。你可以找到它here。

所以，我没有使用堆栈面板，而是编写了这段 XAML：

<ListView SelectedValue="Binding Gender, ValidatesOnDataErrors=True"
            SelectedValuePath="Tag" BorderThickness="0" Margin="2" SelectionMode="Single">

    <RadioButton GroupName="Gender" Margin="2" Tag="M" Content="Male" IsChecked="Binding RelativeSource=RelativeSource AncestorType=ListViewItem, Path=IsSelected" />
    <RadioButton GroupName="Gender" Margin="2" Tag="F" Content="Female" IsChecked="Binding RelativeSource=RelativeSource AncestorType=ListViewItem, Path=IsSelected" />

</ListView>

当然可以用更合适的样式来改进 ListView（例如隐藏选择样式）。由于只有SelectedValue 属性绑定到Gender 属性，您将在ListView 周围看到只有一个 验证模板。

我希望这是您想要的结果。

此外-使用该框架-我无法重现您的问题，因为如果我使用您的堆栈面板并选中一个单选按钮，两个红色矩形都会消失。

【讨论】：

太棒了。谢谢。

【参考方案2】：

这是在另一个答案中没有框架的情况下如何做到这一点（这很好但不是必需的）。

关键是用另一个元素包围单选按钮，该元素绑定到相同的属性。这将显示错误。我为 StackPanel 的 Tag 属性设置了绑定，否则不会使用该绑定。

然后您需要关闭每个单选按钮的验证错误模板，使用 'Validation.ErrorTemplate="x:Null"'。

<StackPanel Tag="Binding Gender" >
    <RadioButton IsChecked="Binding Gender, 
        Converter=StaticResource GenderConverter,
        ConverterParameter=x:Static enumerations:Male" 
        Content="Male" Validation.ErrorTemplate="x:Null"/>
    <RadioButton IsChecked="Binding Gender, 
        Converter=StaticResource GenderConverter,
        ConverterParameter=x:Static enumerations:Female" 
        Content="Female" Validation.ErrorTemplate="x:Null"/>
</StackPanel>