Bind an object to user input or to other internal values
You can bind the value of one property to the value of another property so that they are synchronized, or so that a change in one property updates the other. This is useful when making user input determine how a control is displayed. For example, in a media player, you could have the value of a volume slider update the contents of a text box to let users know the numeric value of the volume.
.png "Ee341411.0345097b-aefd-4c9e-a7e4-115fadabe492(en-us,Expression.30).png")
To bind the value of a slider to a text box
In the Tools panel, right-click the bottom tool group, and then select the Slider control
.png "Ee341411.b478d0b9-7525-47cb-b633-0007e08432d4(en-us,Expression.30).png")
from the list that appears.Draw a slider control on the artboard in your main document.
With the new slider object selected, locate the following properties under Common Properties in the Properties panel and set their values:
Set LargeChange to 10. This is the incremental change that occurs when you click the slider bar.
Set Maximum to 2001. The slider will go from 0 to 2001.
Set SmallChange to 1. This is the incremental change that occurs when you use your arrow keys to move the slider.
In the Tools panel, right-click the tool group second from the bottom, and then select the TextBox control
.png "Ee341411.b5206bf1-18c8-491f-8239-3e542b2ca147(en-us,Expression.30).png")
from the list that appears.Draw a text box control on the artboard next to the slider object.
With the new text box object selected, locate the Text property under Common Properties in the Properties panel. You will bind the Text property to the value of the slider.
Click Advanced property options
.png "Ee341411.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).png")
, and then click Data Binding from the list that appears.In the Create Data Binding dialog box, click the Element Property tab. This is where you bind internal values to properties.
Expand the tree of elements under Scene elements, and then select the [Slider] object.
Under Properties, select Value : (Double).
This binds the content of the text box to the value of the slider.
Tip
If you do not see the Value property, select All Properties in the Show drop-down list. The default of the Show drop-down list is Matching Types Only. If the property you want does not appear in the list when Matching Types Only is selected, you might have to create a value converter to provide a smooth conversion between values.
For more information, see Try it: Convert data from one type to another.
Click Show advanced properties
.png "Ee341411.de239c9d-42ce-4f5e-83b9-5f9924c0431f(en-us,Expression.30).png")
, and then select TwoWay next to Binding direction.This setting makes it possible both for the text box to update the slider and for the slider to update the text box.
Press F5 to run your application.
Drag the slider thumb to watch the value in the text box update.
.png "Ee341411.0279e814-a5af-4322-84d4-754083a57f83(en-us,Expression.30).png")
Tip
Notice how the value of the slider can have too many decimal positions to be displayed in the text box. This is another good reason to create a value converter to convert the value to a whole number before it is passed to the text box.
See also
Tasks
Try it: Convert data from one type to another