界面到界面元素的数据绑定

一、什么是「界面元素 → 界面元素」绑定？

一句话定义

让一个控件的属性，自动跟随另一个控件的属性变化。

大白话

• 滑块拖动 → 文字大小同步变
• 勾选框勾选 → 按钮禁用 / 启用
• 输入框输入 → 文本块实时显示
• 单选框选择 → 颜色同步改变

不用后台代码，纯 XAML 联动！

二、核心语法（必背）

关键：ElementName + Path

{Binding ElementName=目标控件名, Path=目标控件的属性}

三要素

1. ElementName：你要绑定哪个控件（写控件的 x:Name）
2. Path：你要绑定控件的哪个属性
3. Mode：可选，绑定模式（默认 OneWay）

三、最简单示例：输入框实时同步到文本块

功能

在 TextBox 里输入文字，TextBlock 实时显示一模一样的内容。

<StackPanel>
    <!-- 源控件：输入框 -->
    <TextBox x:Name="txtInput" PlaceholderText="请输入文字"/>

    <!-- 目标控件：绑定输入框 -->
    <TextBlock Text="{Binding ElementName=txtInput, Path=Text}" 
               FontSize="20" Margin="10"/>
</StackPanel>

效果

你输入什么，下面立刻显示什么！纯 XAML，无后台代码！

四、示例 2：滑块控制字体大小（超常用）

功能

拖动 Slider 滑块，TextBlock 字体大小同步变大变小。

<StackPanel>
    <Slider x:Name="sliderSize" 
            Minimum="10"    <!-- 最小10号字 -->
            Maximum="50"    <!-- 最大50号字 -->
            Value="20"/>    <!-- 默认20号字 -->

    <!-- 文字大小绑定滑块的值 -->
    <TextBlock Text="我会跟着滑块变大变小"
               FontSize="{Binding ElementName=sliderSize, Path=Value}"
               Margin="10"/>
</StackPanel>

关键点

• Slider 的值是 Value 属性
• FontSize 直接绑定 sliderSize.Value

五、示例 3：勾选框控制按钮是否可用

功能

勾选 CheckBox → 按钮启用
取消勾选 → 按钮禁用

<StackPanel>
    <CheckBox x:Name="chkEnable" Content="启用按钮"/>

    <!-- 按钮的 IsEnabled 绑定勾选框的 IsChecked -->
    <Button Content="我是按钮"
            IsEnabled="{Binding ElementName=chkEnable, Path=IsChecked}"
            Width="120" Height="40"/>
</StackPanel>

效果

• 勾选 ✅ 按钮可点
• 取消勾选 ❌ 按钮变灰不可点

六、示例 4：单选按钮切换颜色

功能

选择不同单选框，矩形背景色同步改变。

<StackPanel>
    <RadioButton x:Name="rbRed" Content="红色" IsChecked="True"/>
    <RadioButton x:Name="rbBlue" Content="蓝色"/>

    <!-- 颜色绑定单选框是否选中 -->
    <Rectangle Width="100" Height="50" Margin="10">
        <Rectangle.Style>
            <Style TargetType="Rectangle">
                <Style.Triggers>
                    <!-- 选中红色 → 背景红 -->
                    <DataTrigger Binding="{Binding ElementName=rbRed, Path=IsChecked}" Value="True">
                        <Setter Property="Fill" Value="Red"/>
                    </DataTrigger>
                    <!-- 选中蓝色 → 背景蓝 -->
                    <DataTrigger Binding="{Binding ElementName=rbBlue, Path=IsChecked}" Value="True">
                        <Setter Property="Fill" Value="Blue"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</StackPanel>

七、示例 5：进度条绑定滑块（双向绑定）

功能

• 拖动滑块 → 进度条同步走
• （双向绑定也可以反过来）

<StackPanel>
    <Slider x:Name="sliderProgress" 
            Minimum="0" Maximum="100" Value="50"/>

    <!-- 进度条的值 Value 绑定滑块 Value -->
    <ProgressBar 
        Value="{Binding ElementName=sliderProgress, Path=Value, Mode=TwoWay}"
        Height="30" Margin="10"/>
</StackPanel>

重点

Mode=TwoWay 表示双向同步，哪边改另一边都变。

八、「控件绑定控件」完整语法大全

1. 基础单向绑定（最常用）

属性="{Binding ElementName=控件名, Path=控件属性}"

2. 双向绑定

属性="{Binding ElementName=控件名, Path=控件属性, Mode=TwoWay}"

3. 延迟绑定（输入完再更新）

九、核心总结（1 分钟记住）

1. 适用场景

• 输入框 ↔ 文本显示
• 滑块 ↔ 大小 / 数值
• 勾选框 ↔ 启用 / 禁用
• 单选框 ↔ 样式切换
• 控件之间纯界面联动

2. 核心口诀

ElementName 找控件，Path 找属性，纯 XAML 实现控件联动！

3. 优点

• 完全不用写后台 C# 代码
• 简单、直观、维护方便
• WPF 最基础、最常用绑定方式