How can I bind a Slider value to a Rectable height in Silverlight (works in WPF)?

Question

This code works in WPF but not in Silverlight.

Are there any workarounds in Silverlight to enable to me to bind a slider value to element heights? What are the limitations of Silverlight here?

ANSWER:

Thanks Peter for solving this, for others: here is the solution with online demo and downloadable code.

<UserControl x:Class="Second12.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width="300" Height="200">
    <Grid Background="Tan">
        <StackPanel>
            <Canvas>
                <Border Background="#2200ffff" 
            Canvas.Left="40" 
            Canvas.Top="30" 
            CornerRadius="5" 
            BorderBrush="Brown"
            BorderThickness="1">
                    <Rectangle 
            Height="{Binding ElementName=theSlider, Path=Value}"
            Width="50"/>
                </Border>
            </Canvas>
        </StackPanel>
        <Slider Name="theSlider" HorizontalAlignment="Left" Width="200" Cursor="Hand"/>
    </Grid>
</UserControl>

Answer 1

ElementName binding is not currently supported in Silverlight 2. This MSDN documentation article is quite succinct on the specifics of the WPF functionality that Silverlight does and doesn't currently provide.

In the interim you have to use some sort of intermediary property, here is a full example:

Page.xaml:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">

    <StackPanel x:Name="LayoutRoot" Background="AliceBlue">

        <Slider x:Name="Slider1" Minimum="10" SmallChange="10"
                LargeChange="20" Maximum="100"
                Value="{Binding HelperValue, Mode=TwoWay}" Cursor="Hand"/>

        <Rectangle x:Name="Rectangle1" Fill="Red"
                Height="{Binding HelperValue, Mode=OneWay}" Width="100" />

    </StackPanel>

</UserControl>

Page.xaml.cs:

using System;
using System.ComponentModel;
using System.Windows.Controls;

namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        BindingConduit<double> sliderToRect = new BindingConduit<double>(50.0);

        public Page()
        {
            InitializeComponent();

            LayoutRoot.DataContext = sliderToRect;
        }
    }

    public class BindingConduit<T> : INotifyPropertyChanged where T : struct
    {
        private T helperValue;

        public T HelperValue
        {
            get { return this.helperValue; }
            set
            {
                if ((this.helperValue.Equals(value) != true))
                {
                    this.helperValue = value;
                    this.RaisePropertyChanged("HelperValue");
                }
            }
        }

        public BindingConduit(T defaultValue)
        {
            HelperValue = defaultValue;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler propertyChanged = this.PropertyChanged;

            if (propertyChanged != null)
            {
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

The Value property of the Slider is bound to HelperValue and set to TwoWay, the Rectangle's Height is bound to the same property but only requires OneWay.

The HelperValue property is being read from the instance of the BindingConduit<T> class created in Page called sliderToRect. This instance is set as the DataContext of the parent StackPanel control. Any change in Slider1's Value property is reflected in the Height of Rectangle1 because the HelperValue property raises the PropertyChanged event.

BindingConduit<T> is a custom class I've created that implements INotifyPropertyChanged and also lets you specify a default value for HelperValue (i.e. the inital Value of Slider1 and the Height of Rectangle1 (50.0) in this case).