Question

I’d like for my control to start visual state transition animation after some delay.
I tried setting BeginTime on a visual state Storyboard. But it gave nothing 🙁
Is there any way to do this?

    <i:Interaction.Triggers>
     <i:EventTrigger EventName="Loaded" SourceObject="{Binding ElementName=controlRoot}">
        <ei:GoToStateAction StateName="MouseOverData"/>
     </i:EventTrigger>

     <i:EventTrigger EventName="MouseEnter" SourceObject="{Binding ElementName=textBlockChart}">
        <ei:GoToStateAction StateName="MouseOverCharts"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave" SourceObject="{Binding ElementName=textBlockChart}">
        <ei:GoToStateAction StateName="Normal"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseEnter" SourceObject="{Binding ElementName=grid}">
        <ei:GoToStateAction StateName="MouseOverCharts"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave" SourceObject="{Binding ElementName=grid}">
        <ei:GoToStateAction StateName="Normal"/>
    </i:EventTrigger>

     <i:EventTrigger EventName="MouseEnter" SourceObject="{Binding ElementName=textBlockData}">
        <ei:GoToStateAction StateName="MouseOverData"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave" SourceObject="{Binding ElementName=textBlockData}">
        <ei:GoToStateAction StateName="Normal"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseEnter" SourceObject="{Binding ElementName=grid1}">
        <ei:GoToStateAction StateName="MouseOverData"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave" SourceObject="{Binding ElementName=grid1}">
        <ei:GoToStateAction StateName="Normal"/>
    </i:EventTrigger>
</i:Interaction.Triggers>
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:0.2" />
            <VisualTransition From="MouseOverCharts" GeneratedDuration="0:0:0.2" To="Normal">
                <VisualTransition.GeneratedEasingFunction>
                    <CircleEase EasingMode="EaseIn"/>
                </VisualTransition.GeneratedEasingFunction>
            </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="MouseOverCharts">
            <Storyboard>
              <ColorAnimation Duration="0" To="#FFEFE78A" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="textBlockChart" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="10" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="textBlockChart" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="textBlockChart" d:IsOptimized="True"/>
                <ColorAnimation Duration="0" To="#FFEFE78A" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlockChartContent" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="220" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="MouseOverData">
            <Storyboard BeginTime="0:0:10">
              <ColorAnimation BeginTime="0:0:5" Duration="0" To="#FFEFE78A" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlockDataContent" d:IsOptimized="True"/>
              <ColorAnimation BeginTime="0:0:5" Duration="0" To="#FFEFE78A" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="textBlockData" d:IsOptimized="True"/>
              <DoubleAnimation BeginTime="0:0:5" Duration="0" To="10" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="textBlockData" d:IsOptimized="True"/>
              <DoubleAnimation BeginTime="0:0:5" Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="textBlockData" d:IsOptimized="True"/>
              <DoubleAnimation BeginTime="0:0:5" Duration="0" To="220" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid1" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Normal"/>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Thanks.

Answer 1

Try removing GeneratedDuration="0:0:0.2" inside <VisualTransition GeneratedDuration="0:0:0.2" />