How to binding slider.value to ellipse gradient startpoint

Question

how to adjust the color using the slider???

like this

http://s2.ipicture.ru/uploads/20140220/4q71sUT5.jpg

http://s4.postimg.org/43lecgnjx/Bind.jpg

Answer 1

<StackPanel>
    <Ellipse x:Name="ell" Width="50" Height="50">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop x:Name="stopToBind" Color="#FFFF0808" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

    <Slider Value="{Binding ElementName=stopToBind, Path=Offset, Mode=TwoWay}"/>
</StackPanel>

UPDATE

Without smooth:

<StackPanel>
    <Ellipse x:Name="ell" Width="50" Height="50">
        <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Red" Offset="{Binding ElementName=sl, Path=Value, Mode=TwoWay}"/>
                <GradientStop Color="Black" Offset="{Binding ElementName=sl, Path=Value, Mode=TwoWay}"/>
            </LinearGradientBrush>
        </Ellipse.Fill>

    </Ellipse>

    <Slider Value="0.5" x:Name="sl" Maximum="1" Minimum="0"/>
</StackPanel>