How to: Bind a Slider to a Property Value

This example shows how to bind the Height property of a Rectangle to the Value of a Slider control.

Example

The following example shows how to define a Slider control that is named RectangeHeight that can have a Value between 0 and 200.

<Slider Name="RectangleHeight"  Margin="10, 0, 0, 0" 
  Width="100" Orientation="Horizontal" HorizontalAlignment="Left" 
  Value="50" Minimum="0" Maximum="200" 
  SmallChange="1" LargeChange="10"
  TickPlacement="BottomRight" TickFrequency="10"/>

The following example shows how to define a Rectangle that binds its Height property to the Value of the Slider control. (In the complete sample, a similar binding is created for the Width property.)

<Rectangle Fill="Blue" HorizontalAlignment="Left" 
           Margin="50,20,0,0" 
           Height="{Binding ElementName=RectangleHeight,Path=Value}" 
           Width="{Binding ElementName=RectangleWidth,Path=Value}"/>

For the complete sample, see Slider with Data Binding Sample.

See Also

Reference

Rectangle

Slider

Other Resources

Slider How-to Topics