如何实现WPF Slider与TextBox的双向绑定？

问题描述 #

需求：实现Slider的值与TextBox双向绑定——Slider值变化时TextBox同步更新，用户在TextBox输入值时Slider也同步变化。目前仅完成TextBox单向绑定Slider的值，求双向绑定实现方法。

现有代码：

<TextBox 
Width="70" 
Height="20" 
Grid.Row="1" 
Margin="0 0 80 180" 
x:Name="AO1text"               
Text="{Binding ElementName=AOch1,Path=Value, StringFormat={}{0:F2}}"/>

<Slider 
x:Name="AOch1" 
Maximum="20" 
Minimum="4" 
Value="{Binding ao1value}" 
Width="250" 
BorderThickness="5" 
TickPlacement="BottomRight"/>

实现方法 #

WPF中默认的ElementName绑定对于TextBox.Text这类属性是单向的，要开启双向绑定只需要在绑定表达式中添加Mode=TwoWay。同时建议加上UpdateSourceTrigger=PropertyChanged，让TextBox的输入内容实时同步到Slider，而不是等TextBox失去焦点才更新。

修改后的代码 #

TextBox部分（核心修改）

<TextBox 
Width="70" 
Height="20" 
Grid.Row="1" 
Margin="0 0 80 180" 
x:Name="AO1text"               
Text="{Binding ElementName=AOch1, Path=Value, StringFormat={}{0:F2}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

Slider部分补充说明

如果Slider绑定的ao1value是ViewModel中的属性，需要确保该属性实现INotifyPropertyChanged接口，这样当ViewModel中的值变化时，Slider才能同步更新。如果只是单纯做UI控件间的双向绑定，也可以直接让Slider的Value绑定到TextBox的Text（需注意类型转换），但保留现有ViewModel绑定的方式更符合MVVM规范。

额外优化建议 #

为了避免用户输入非有效数字导致程序报错，可以给TextBox添加验证规则，限制输入内容为符合格式的数值：

<TextBox 
Width="70" 
Height="20" 
Grid.Row="1" 
Margin="0 0 80 180" 
x:Name="AO1text">
    <TextBox.Text>
        <Binding ElementName="AOch1" Path="Value" StringFormat="{}{0:F2}" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
            <Binding.ValidationRules>
                <ExceptionValidationRule/>
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>

这样当输入无效内容时，绑定会触发验证错误，你可以通过Validation.ErrorTemplate自定义错误提示样式。

内容的提问来源于stack exchange，提问作者ygkang