none
Trigger is playing the wrong storyboard

    Question

  • Using Blend for VS 2015 - no updates to install - I created a rectangle on a new blank window.

    I then created a MyFadeIn storyboard which changed the alpha of the stroke colour of the rectangle from 0% to 100%.
    After that I created a MyFadeOut storyboard which changed the alpha of the stroke colour from 100% to 0%.

    The purpose of these was for the colour to fade in/out on certain events.

    Both storyboards play just fine when I play them from the "Objects and Timeline" window.

    Then I created a Trigger for rectangle.MouseEnter being raised telling MyFadeIn to Begin.
    And then another Trigger for rectangle.MouseLeave being raised telling MyFadeOut to Begin.

    No other Triggers exist.

    Basically, the idea is to move the pointer over the rectangle and its border should fade up to a colour, then move the pointer away from the rectangle and the border should fade back to invisible. Nothing complicated.

    However, whenever I move the pointer over the rectangle, the MyFadeOut storyboard is played instead of the MyFadeIn storyboard. Leaving the rectangle plays the MyFadeOut storyboard but MyFadeIn is never played. Also, sometimes neither will play; the rectangle doesn't change when you enter or leave but give it a few seconds and MyFadeOut will start playing again when either entering or leaving.

    I'm obviously doing something wrong that is so basic I'm just not seeing it. I've tried various websites, read many articles and blogs and watched a few videos but nothing comes close to what I'm getting.

    I've tried restarting Blend and deleted the window and started again from scratch but I still get the same outcome.

    Can anyone help? (I'm new to Blend.)

    Here's the XAML:

    <Window x:Class="TestingBlend.Window3"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:TestingBlend"
            mc:Ignorable="d"
            Title="Window3" Height="300" Width="300">
        <Window.Resources>
            <Storyboard x:Key="MyFadeIn">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                    <EasingColorKeyFrame KeyTime="0" Value="#00CB2929"/>
                    <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FFCB2929"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="MyFadeOut">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                    <EasingColorKeyFrame KeyTime="0" Value="#FFCB2929"/>
                    <EasingColorKeyFrame KeyTime="0:0:1" Value="#00CB2929"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </Window.Resources>
        <Window.Triggers>
            <EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="rectangle">
                <BeginStoryboard x:Name="MyFadeIn_BeginStoryboard" Storyboard="{StaticResource MyFadeIn}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="rectangle">
                <BeginStoryboard x:Name="MyFadeOut_BeginStoryboard" Storyboard="{StaticResource MyFadeOut}"/>
            </EventTrigger>
        </Window.Triggers>
        <Grid>
            <Rectangle x:Name="rectangle" Margin="79.933,68.984,103.202,119.822" Stroke="#00CB2929"/>
    
        </Grid>
    </Window>


    Wednesday, September 28, 2016 1:38 PM

Answers

  • Hi Garry,

    I think it's because your rectangle does not have the Fill property set.

    So the hotspot of your rectangle just falls on the stroke part only.

    In order to make the triggers will be affected by whole the rectangle, you just have to set the Fill property with a near transparent color, for example Fill="#01000000".

    Hope this will be helpful to you.


    Ouch Liu , Developer ≈ Designer


    • Edited by Ouch Liu Thursday, March 02, 2017 11:22 AM
    • Marked as answer by Garry Patchett Thursday, March 02, 2017 12:34 PM
    Thursday, March 02, 2017 11:22 AM

All replies

  • Hi Garry,

    I think it's because your rectangle does not have the Fill property set.

    So the hotspot of your rectangle just falls on the stroke part only.

    In order to make the triggers will be affected by whole the rectangle, you just have to set the Fill property with a near transparent color, for example Fill="#01000000".

    Hope this will be helpful to you.


    Ouch Liu , Developer ≈ Designer


    • Edited by Ouch Liu Thursday, March 02, 2017 11:22 AM
    • Marked as answer by Garry Patchett Thursday, March 02, 2017 12:34 PM
    Thursday, March 02, 2017 11:22 AM
  • Hi there.

    Many thanks for replying to such an old issue. I had almost forgotten I that had created it.

    I tried your solution and it works great. So simple, but it certainly wasn't something that I would have thought of myself.

    I can now start to get back into learning Blend again.

    Thanks very much again.

    Cheers, Garry.
    Thursday, March 02, 2017 12:34 PM