Change the position of the shape on the canvas according to the variable

Last night a friend asked:

Reference

Hi, help me explain how WPF changes shape position and shape on canvas or grid, depending on the variable.

I don't understand what the problem is, but it looks like it's not familiar with data binding.

Then write an example of using canvas and data binding. Create a new WPF application in VS2008 and replace the Window1.xaml and Window1.xaml.cs below.

Made out is an interface like this (it's ugly t)

Divide the root container grid in the window into two rows: the upper half places controls for controlling and displaying coordinates, and the lower half places a canvas with a rectangle inside. Entering numbers or sliding scrollbar in a TextBox can change the position of the rectangle.

That is, simply drag and drop the control in the VS2008 WPF Designer to pull the interface out:

Window1.xaml

XML code

<window xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.c Om/winfx/2006/xaml "x:class=" Testwpfcanvasshapedatabinding.window1 "xmlns:custom=" http://schemas.microsoft.com/ Winfx/2006/xaml/composite-font "title=" Test Data Binding "height=" "width=" "230" > <Grid> <g Rid. rowdefinitions> <rowdefinition/> <rowdefinition/> </grid.rowdefinition  s> <textbox name= "txtx" margin= "12,10,0,0" height= "" width= "" "Verticalalignment=" Top " Horizontalalignment= "left" text= "{Binding path=rectx, Mode=twoway, updatesourcetrigger=propertychanged } "/> <label name=" LBLX "margin=" 12,40,0,0 "height=" "width=" "verticalalignment=" Top " Horizontalalignment= "left" content= "{Binding path=rectx}"/> <button name= "Btnx" margin= , 5,0 "height=" WidtH= "Bayi" verticalalignment= "Top" horizontalalignment= "right" click= "Button1_Click" > Check X Value </Button> <scrollbar name= "SCBX" margin= "12,70,5,0" height= "Width" = "181" verticalalignment= "top" orientation= "horizontal" maximum= "value=" {Bindin
                 G Path=rectx, Mode=twoway} "/> <textbox name=" txty "margin=" 12,120,0,0 "height=" width= "95" Verticalalignment= "Top" horizontalalignment= "left" text= "{Binding path=recty, Mode=twowa Y, updatesourcetrigger=propertychanged} "/> <label name=" lbly "margin=" 12,150,0,0 "Height=" "Width=" 95
        ' verticalalignment= ' top ' horizontalalignment= ' left ' content= ' {Binding path=recty} '/> <button name= "Btny" margin= "0,120,5,0" height= "" "Width=" Bayi "verticalalignment=" Top "Horizonta
     Lalignment= "Right"           click= "button2_click" > Check Y Value </Button> <scrollbar Name
                   = "Scby" margin= "12,180,5,0" height= "width=" 181 "Top" verticalalignment= "orientation=" Value= "{Binding path=recty, mode=twoway}" maximum= "/> <canvas" margin= "0,0 , 0,0 "grid.row=" 1 "> <Canvas.Background> <custom:lineargradientbrush endpoint=" 1,0.5
                      "Startpoint=" 0,0.5 "> <custom:gradientstop color=" #FF337496 "offset=" 0 "/>
            <custom:gradientstop color= "#FF94E2EC" offset= "1"/> </Custom:LinearGradientBrush> </Canvas.Background> <rectangle height= "width=" "stroke=" #FF301A87 "fill=" #FF8169 E6 "canvas.left=" {Binding path=rectx} "canvas.top=" {Binding path=recty} "/&G
        T </canvas&gT </Grid> </Window>