Bind Controls TO standalone animations

Question

Hi, i'm new to wpf and i'm try to learn something. My problem is : i need to bind all that i want to a looping animation...

Example:

<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
    <Slider Visibility="Hidden"  Minimum="0" Maximum="100" Height="22" Margin="73,40,105,0" Name="Slider1" VerticalAlignment="Top" Value="0">
        <Slider.Triggers>
        <EventTrigger RoutedEvent="Slider.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="Slider1" 
                        Storyboard.TargetProperty="Value"
                        From="0" To="100" Duration="0:0:5" 
                        AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
            </Slider.Triggers>
    </Slider>
    <Slider Minimum="0" Maximum="100" Height="22" Margin="72,98,106,0" Name="Slider2" VerticalAlignment="Top" Value="{Binding ElementName=Slider1, Path=Value}"/>
    <Button Width="{Binding ElementName=Slider1, Path=Value}"></Button>
</StackPanel>

Slider1 is hidden and act as a Source for Slider2 and ButtonWidth. Like a standalone oscillator. I need a way to eliminate slider1 and bind directly to a standalone animation that loops. It is possible? Thanks in advance :)

Answer 1

Why don't you simply animate the Slider2 Value the same way you've animated Slider1's value? You can also animate the Button's Width. I am not sure why you would need Slider1 in the first place. The following markup demonstrates removing Slider1 and using the animation as a resource:

<Window.Resources>
    <DoubleAnimation x:Key="ValueAnimation"
                         Storyboard.TargetProperty="Value"
                         From="0" To="100" Duration="0:0:5"
                         AutoReverse="True" RepeatBehavior="Forever" />
</Window.Resources>
<StackPanel>
    <Slider Minimum="0" Maximum="100" Height="22" Margin="72,98,106,0"
            Name="Slider2" VerticalAlignment="Top">
        <Slider.Triggers>
            <EventTrigger RoutedEvent="Slider.Loaded">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="Slider2">
                        <StaticResource ResourceKey="ValueAnimation"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Slider.Triggers>
    </Slider>
    <Button Width="{Binding ElementName=Slider2, Path=Value}"/>
</StackPanel>

You could remove the TargetProperty from ValueAnimation and specify that per animation, as well. That would let you use a single animation for both the Button.Width and the Slider.Value.

Answer 2

Hi Charlie, thanks for your answer :)

Why don't you simply animate the Slider2 Value the same way you've animated Slider1's value?

because i need to centralize the animation values to share it on multiple objects (not only another slider) and, in this way, i can edit values in 1 place only :)

Thank you your example fits well :)