wpf - 如何格式化绑定(bind)到 TextBox 的小数而不激怒我的用户？

Question

我正在尝试使用 WPF 中的数据绑定(bind)在 TextBox 中显示格式化的小数。

目标

目标 1:在代码中设置小数属性时，在文本框中显示 2 位小数。

目标 2:当用户与文本框交互(输入内容)时，不要惹恼他/她。

目标 3:绑定(bind)必须更新 PropertyChanged 上的源。

尝试

尝试 1:不设置格式。

在这里，我们几乎从头开始。

<TextBox Text="{Binding Path=SomeDecimal, UpdateSourceTrigger=PropertyChanged}" />

违反目标 1。SomeDecimal = 4.5将在文本框中显示“4.50000”。

尝试 2:在绑定(bind)中使用 StringFormat。

<TextBox Text="{Binding Path=SomeDecimal, UpdateSourceTrigger=PropertyChanged, StringFormat=F2}" />

违反目标 2。假设 SomeDecimal 为 2.5，并且文本框显示“2.50”。如果我们选择全部并输入“13.5”，我们最终会在文本框中得到“13.5.00”，因为格式化程序“帮助”插入小数和零。

尝试 3:使用扩展 WPF 工具包的 MaskedTextBox。

http://wpftoolkit.codeplex.com/wikipage?title=MaskedTextBox

假设我正确阅读文档，掩码 ##0.00 表示“两个可选数字，后跟一个必需数字、一个小数点和另外两个必需数字。这迫使我说“最大可能的数字可以进入这个文本框是 999.99”，但假设我对此没意见。

<xctk:MaskedTextBox Value="{Binding Path=SomeDecimal, UpdateSourceTrigger=PropertyChanged}" Mask="##0.00" />

违反目标 2。文本框以 ___.__ 开头选择它并输入 5.75 会得到 575.__ 。获得 5.75 的唯一方法是选择文本框并输入 <space><space>5.75 .

尝试 4:使用扩展 WPF 工具包的 DecimalUpDown 微调器。

http://wpftoolkit.codeplex.com/wikipage?title=DecimalUpDown

<xctk:DecimalUpDown Value="{Binding Path=SomeDecimal, UpdateSourceTrigger=PropertyChanged}" FormatString="F2" />

违反目标 3。DecimalUpDown 愉快地忽略 UpdateSourceTrigger=PropertyChanged。扩展 WPF 工具包 Codeplex 页面上的一位协调员建议修改后的 ControlTemplate，网址为 http://wpftoolkit.codeplex.com/discussions/352551/ 。这满足了目标 3，但违反了目标 2，表现出与尝试 2 相同的行为。

尝试 5:使用样式数据触发器，仅在用户未编辑时使用格式。

Binding to a double with StringFormat on a TextBox

即使这个满足了所有三个目标，我也不想使用它。 (A) 文本框变为每行 12 行，而不是 1 行，并且我的应用程序包含很多很多文本框。 (B) 我的所有文本框都已经有一个 Style 属性，它指向一个全局 StaticResource，用于设置 Margin、Height 和其他内容。 (C) 您可能已经注意到下面的代码将绑定(bind)路径设置了两次，这违反了 DRY 原则。

<TextBox>
    <TextBox.Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Text" Value="{Binding Path=SomeDecimal, StringFormat=F2}" />
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Text" Value="{Binding Path=SomeDecimal, UpdateSourceTrigger=PropertyChanged}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>

抛开所有这些不舒服的事情......

违反目标 2。首先，单击显示“13.50”的文本框会突然显示“13.5000”，这是意外的。其次，如果从空白文本框开始，并且我键入“13.50”，则文本框将包含“1350”。我无法解释原因，但如果光标位于文本框中字符串的右端，则按句点键不会插入小数。如果文本框包含长度 > 0 的字符串，并且我将光标重新定位到字符串右端以外的任何位置，则可以插入小数点。

尝试 6:自己动手。

我即将踏上一段痛苦的旅程，要么子类化 TextBox，要么创建附加属性，然后自己编写格式化代码。它将充满字符串操作，并导致大量脱发。

<小时/>

有人对格式化绑定(bind)到文本框的小数有什么建议，以满足上述所有目标吗？

Answer 1

尝试在 ViewModel 级别解决该问题。那它:

public class FormattedDecimalViewModel : INotifyPropertyChanged
    {
        private readonly string _format;

        public FormattedDecimalViewModel()
            : this("F2")
        {

        }

        public FormattedDecimalViewModel(string format)
        {
            _format = format;
        }

        private string _someDecimalAsString;
        // String value that will be displayed on the view.
        // Bind this property to your control
        public string SomeDecimalAsString
        {
            get
            {
                return _someDecimalAsString;
            }
            set
            {
                _someDecimalAsString = value;
                RaisePropertyChanged("SomeDecimalAsString");
                RaisePropertyChanged("SomeDecimal");
            }
        }

        // Converts user input to decimal or initializes view model
        public decimal SomeDecimal
        {
            get
            {
                return decimal.Parse(_someDecimalAsString);
            }
            set
            {
                SomeDecimalAsString = value.ToString(_format);
            }
        }

        // Applies format forcibly
        public void ApplyFormat()
        {
            SomeDecimalAsString = SomeDecimal.ToString(_format);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

示例

Xaml:

<TextBox x:Name="tb" Text="{Binding Path=SomeDecimalAsString, UpdateSourceTrigger=PropertyChanged}" />

隐藏代码:

public MainWindow()
{
    InitializeComponent();
    FormattedDecimalViewModel formattedDecimalViewModel = new FormattedDecimalViewModel { SomeDecimal = (decimal)2.50 };
    tb.LostFocus += (s, e) => formattedDecimalViewModel.ApplyFormat(); // when user finishes to type, will apply formatting
    DataContext = formattedDecimalViewModel;
}