C# Wpf雙向綁定實例

Wpf中雙向綁定處理需要兩處

實例1：

1.前台Xaml中屬性Binding 時Model指定 TwoWay

<Grid>
    <Ellipse  x:Name="ellipse"
        Fill="#FFF4F4F5" HorizontalAlignment="Left" 
                Height="{Binding Path=Number,Mode=TwoWay}" Margin="50,55,0,0" Stroke="Black"
                VerticalAlignment="Top" Width="{Binding Path=Number,Mode=TwoWay}"/>
    <Slider x:Name="slider"  Margin="28,167,22,0" ValueChanged="slider_ValueChanged"
            VerticalAlignment="Top" TickPlacement="Both" Maximum="100" SmallChange="1"/>
    <Label x:Name="label" Content="{Binding Path=Number,Mode=TwoWay}" HorizontalAlignment="Left" Margin="110,150,0,0" VerticalAlignment="Top"/>
</Grid>

2.后台綁定的數據上線文實現INotifyPropertyChanged（向客戶端發出某一屬性值已更改的通知。）接口

/// <summary>
/// Thread6.xaml 的交互邏輯
/// </summary>
public partial class Thread6 : Window
{

    TestData testData = new TestData() { Number = 10 };
    public Thread6()
    {
        InitializeComponent();
        //創建雙向綁定
        ellipse.DataContext = testData;
        label.DataContext = testData;
    }
    private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        testData.Number = (int)e.NewValue;
    }
}

public class TestData : INotifyPropertyChanged
{
    private int _Number;
    public int Number
    {
        get
        {
            return _Number;
        }
        set
        {
            _Number = value;
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

顯示結果：

實例2：使用Wpf的雙向綁定機制，可以實現多線程修改UI

注：其他線程修改綁定數據時會通知到UI線程修改界面數據。

TestData類定義同上

Xaml定義同上

//創建雙向綁定
ellipse.DataContext = testData;
//創建線程修改數據
Task.Run(() =>
{
    while (true)
    {
        testData.Number++;
        if (testData.Number == 200)
            testData.Number = 0;
        Thread.Sleep(100);
    }
});