Question

I have a control that can appear on the left- or right-hand side of a window depending on the value of a viewmodel property (which changes as a result of a button click elsewhere in the UI). I’m using DataTriggers to achieve this positioning:

<DataTrigger Binding="{Binding ShowOnLeft}" Value="True">
    <Setter Property="HorizontalAlignment" Value="Left"/>
</DataTrigger>
<DataTrigger Binding="{Binding ShowOnLeft}" Value="False">
    <Setter Property="HorizontalAlignment" Value="Right"/>
</DataTrigger>

I now want to make the control fade in when it’s position changes, so I added these triggers:-

<Trigger Property="HorizontalAlignment" Value="Left">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="0.8" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

<Trigger Property="HorizontalAlignment" Value="Right">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="0.8" Duration="0:0:0.2"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

However it produces some odd results. The fade works the first time HorizontalAlignment changes to “Left”, but not on subsequent attempts. However the fade will happily work every time HorizontalAlignment changes to “Right”. It partly seems to be down to trigger order – if I swap the two triggers then the reverse happens (the fade only works the first time I set HorizontalAlignment to “Right”, but works every time for “Left”).

What am I doing wrong?

Answer 1

Maybe a wild guess, but I have had similar (unwanted) behavior some time ago. Finally, I had succes with the property FillBehavior of a DoubleAnimation set to Stop (the default is HoldEnd).

Read this to learn more about this property / enumeration.