How to use storyboard on target element from another view?

Question

I use storyboard in order to do animation:

  <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                            <DoubleAnimation Storyboard.TargetName="Animation" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
                            <DoubleAnimation Storyboard.TargetName="Record" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
                            <DoubleAnimation Storyboard.TargetName="Info" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                            <DoubleAnimation Storyboard.TargetName="info_content" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>

but targets are in another view XAML. I assume I should use ViewModel in order to access them, but I would need some more hints.

Answer 1

I created a UserControl with Button, and tried to animate that Button from MainWindow.

Problem : You need reference of the Button which you want to animate, so that you can use it for Storyboard.Target property. This can be solved using appropriate handler to get it. I did it using Window's Loaded event, and using FindName() method of UserControl.

The FindName() returns the object, which can be exposed using a DP, or normal property supported by INPC.

This reference is then bound to the Storyboard.Target property.

MainWindow :

        <Button ...>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard Name="Sb1">
                            <DoubleAnimation To="150.0" 
                                    Duration="0:0:2" 
                                    Storyboard.Target="{Binding TargetBtn, Mode=OneWay}"
                                    Storyboard.TargetProperty="Width"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

Code,

set DataContext for the Window, this.DataContext = this;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
     // TargetBtn is a DP
     TargetBtn = (Button)UC1.FindName("Btn1");
}

You can also use this approach :

Dynamically changing TargetName , here you should change Target property instead of TargetName property.

Answer 2

It is business of just View. All UI actions such as animation, styling should be done by View. ViewModel should not know about View. It is better to create new Style for all Button for your application in App.xaml file. If you want to use this style for concrete Button just use x:Key property.

Let me show an example:

<Application.Resources>
    <Style TargetType="Button" x:Key="EventTriggerButton" >
        <Style.Triggers>            
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                        <DoubleAnimation Storyboard.TargetName="Animation" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
                        <DoubleAnimation Storyboard.TargetName="Record" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
                        <DoubleAnimation Storyboard.TargetName="Info" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                        <DoubleAnimation Storyboard.TargetName="info_content" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>            
        </Style.Triggers>
    </Style>
</Application.Resources>