Looping Storyboard Animation Without Trigger

Question

This is my code:

<DrawingBrush Viewport="0,0,16,16" ViewportUnits="Absolute" Stretch="None" TileMode="Tile" x:Key="dbCheckerBoard">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="Black">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <RectangleGeometry Rect="0,0,8,8"/>
                        <RectangleGeometry Rect="8,8,8,8"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>
<Style x:Key="ScrollingCheckerBoardBackground" TargetType="Control">
    <Setter Property="Background" Value="{StaticResource dbCheckerBoard}" />
    <Style.Triggers>
        <EventTrigger RoutedEvent="Control.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <RectAnimation Storyboard.TargetProperty="Background.Viewport" From="0 0 16 16" To="16 16 16 16" Duration="0:0:1" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

If I apply the ScrollingCheckerBoardBackground style to my ListBox in the .XAML file, everything works fine but I want to apply the style in code-behind, when the user clicks a Button. It doesn't work because the EventTrigger is not called.

Is there a way to animate the ListBox without any triggers?

Answer 1

Is there a way to animate the ListBox without any triggers?

No, to start the animation you need a specific action or event.

In this case try use the DataTrigger, if the Tag of ListBox will be ShowAnimation when run the animation:

<Style x:Key="ScrollingCheckerBoardBackground" TargetType="Control">
    <Setter Property="Background" Value="{StaticResource dbCheckerBoard}" />

    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Mode=Self}}" Value="ShowAnimation">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <RectAnimation Storyboard.TargetProperty="Background.Viewport" From="0 0 16 16" To="16 16 16 16" Duration="0:0:1" RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>    
        </DataTrigger>
    </Style.Triggers>
</Style>

And in code-behind write this:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyListBox.Tag = "ShowAnimation";
}

Edit

You can also start the Storyboard in code-behind like this:

XAML

<Window.Resources>
    ...
    <Storyboard x:Key="MyStoryboard">
        <RectAnimation Storyboard.TargetProperty="Background.Viewport" From="0 0 16 16" To="16 16 16 16" Duration="0:0:1" RepeatBehavior="Forever" />
    </Storyboard>

    <Style x:Key="ScrollingCheckerBoardBackground" TargetType="Control">                       
        <Setter Property="Background" Value="{StaticResource dbCheckerBoard}" />           
    </Style>        
</Window.Resources>

<Grid>
    <ListBox Name="MyListBox" 
             Style="{StaticResource ScrollingCheckerBoardBackground}" 
             Tag="Null" 
             Width="100" 
             Height="30" />    

    <Button VerticalAlignment="Bottom" Content="Click" Click="Button_Click" />
</Grid>

Code-behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();          
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var story = (Storyboard)this.FindResource("MyStoryboard");

        if (story != null)
            story.Begin(MyListBox, true);
    }
}