locked
[UWP] Trigger Multiple Storyboards which run at the same time RRS feed

  • Question

  • Hi everyone

    I would like to trigger multiple storyboards at the same time based on a value in my ViewModel. 

    When I do the following only the first item runs.

    <Core:DataTriggerBehavior Binding="{Binding Expression}" Value="1">
        <Media:ControlStoryboardAction Storyboard="{StaticResource EyeLid_Left_Close}"/>
        <Media:ControlStoryboardAction Storyboard="{StaticResource EyeLids_Right_Close}"/>
    </Core:DataTriggerBehavior>

    I can't seem to find a way to run multiple storyboards from inside a single storyboard either.

    I don't want to have to compose a single storyboard of the animations of both storyboards. That would mean a lot of duplicate animations.

    thanks


    • Edited by hypodyne1 Tuesday, April 4, 2017 9:25 PM
    Monday, April 3, 2017 5:26 AM

Answers

  • Hello hypodyne1,

    Welcome to the Developing Universal Windows apps forum!

    Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools  and please remember to add tag to title by yourself.

    You could not put two ControlStoryboardAction in the same DataTriggerBehavior. You would need to use two DataTriggerBehavior like my following code sample:

    <Page.Resources>
            <Storyboard x:Name="StoryboardSample1" AutoReverse="True" RepeatBehavior="Forever">
                <DoubleAnimation Duration="0:0:2.2" To="0.5"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
            Storyboard.TargetName="DataTriggerRectangle" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0:0:2.2" To="0.5"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
            Storyboard.TargetName="DataTriggerRectangle" d:IsOptimized="True"/>
            </Storyboard>
    
            <Storyboard x:Name="StoryboardSample2" AutoReverse="True" RepeatBehavior="Forever">
                <ColorAnimation Duration="0:0:2.2" To="Blue"
            Storyboard.TargetProperty="(UIElement.Fill).(SolidColorBrush.Color)"
            Storyboard.TargetName="DataTriggerRectangle" d:IsOptimized="True"/>
                
            </Storyboard>
        </Page.Resources>
    
        <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Rectangle x:Name="DataTriggerRectangle" Height="100" Width="100" Fill="Red">
                <Rectangle.RenderTransform>
                    <CompositeTransform ScaleX="1" ScaleY="1"></CompositeTransform>
                </Rectangle.RenderTransform>
                <Interactivity:Interaction.Behaviors>
                    <Interactions:DataTriggerBehavior Binding="{Binding Value, ElementName=slider}" ComparisonCondition="Equal" Value="50">
                        <Media:ControlStoryboardAction Storyboard="{StaticResource StoryboardSample1}" ControlStoryboardOption="TogglePlayPause"/>
                    </Interactions:DataTriggerBehavior>
                    <Interactions:DataTriggerBehavior Binding="{Binding Value, ElementName=slider}" ComparisonCondition="Equal" Value="50">
                        <Media:ControlStoryboardAction Storyboard="{StaticResource StoryboardSample2}" ControlStoryboardOption="TogglePlayPause"/>
                    </Interactions:DataTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </Rectangle>
    
            <Slider x:Name="slider" Maximum="100"></Slider>
            
        </StackPanel>

    Best Regards,

    Xavier Eoro


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by hypodyne1 Monday, April 10, 2017 10:00 AM
    Tuesday, April 4, 2017 7:19 AM