WPF Canvas 數據綁定：依變數動態調整 Shape 位置

示範在 WPF 中利用雙向數據綁定，透過 TextBox、ScrollBar 控制 Canvas 內 Rectangle 的 X、Y 座標。完整 XAML 與代碼後置：

Window1.xaml

<Window xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="TestWpfCanvasShapeDataBinding.Window1"
        Title="Test Data Binding" Height="480" Width="230">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition /> <RowDefinition />
    </Grid.RowDefinitions>
    <TextBox Name="txtX" Margin="12,10,0,0" Height="23" Width="95"
             Text="{Binding Path=RectX, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    <Label Name="lblX" Margin="12,40,0,0" Content="{Binding Path=RectX}" />
    <Button Name="btnX" Margin="0,10,5,0" Click="button1_Click">Check X Value</Button>
    <ScrollBar Name="scbX" Margin="12,70,5,0" Height="20" Width="181" Orientation="Horizontal"
               Maximum="200" Value="{Binding Path=RectX, Mode=TwoWay}" />
    <TextBox Name="txtY" Margin="12,120,0,0" Height="23" Width="95"
             Text="{Binding Path=RectY, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    <Label Name="lblY" Margin="12,150,0,0" Content="{Binding Path=RectY}" />
    <Button Name="btnY" Margin="0,120,5,0" Click="button2_Click">Check Y Value</Button>
    <ScrollBar Name="scbY" Margin="12,180,5,0" Height="20" Width="181" Orientation="Horizontal"
               Maximum="200" Value="{Binding Path=RectY, Mode=TwoWay}" />
    <Canvas Grid.Row="1">
      <Canvas.Background>
        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
          <GradientStop Color="#FF337496" Offset="0" />
          <GradientStop Color="#FF94E2EC" Offset="1" />
        </LinearGradientBrush>
      </Canvas.Background>
      <Rectangle Height="20" Width="20" Stroke="#FF301A87" Fill="#FF8169E6"
                 Canvas.Left="{Binding Path=RectX}" Canvas.Top="{Binding Path=RectY}" />
    </Canvas>
  </Grid>
</Window>

Window1.xaml.cs

public partial class Window1 : Window {
  public Window1() { InitializeComponent(); DataContext = this; }
  public double RectX { get; set; }
  public double RectY { get; set; }
  private void button1_Click(object sender, RoutedEventArgs e) { MessageBox.Show("X = " + RectX); }
  private void button2_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Y = " + RectY); }
}

關鍵在於將 Canvas.Left/Canvas.Top 綁定至 ViewModel 屬性，並設定 Mode=TwoWay、UpdateSourceTrigger=PropertyChanged 即時同步。滑動 ScrollBar 或輸入數值皆能即時移動矩形。