Storyboard by XAML is OK but not Code...

[KenX]

This is my first message. First of all, thank you for bringing us this awesome product

I use DoubleAnimationUsingKeyFrames for animation on controls e.g. TextBlock like below, it works perfectly if done in XAML:

Code: Select all

<Storyboard x:Name="objFadeInControls">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textblock1" Storyboard.TargetProperty="Opacity">
                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseIn"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textblock1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-100"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseIn"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
</Storyboard>

<TextBlock x:Name="textblock1" Text="Some Text" Opacity="0">
            <TextBlock.RenderTransform>
                    <CompositeTransform/>
            </TextBlock.RenderTransform>
</TextBlock>


As there will be many controls to be animated at once, I have created a custom control that will generate all given controls automatically. That's why I have to code behind. However, when I do exactly the same, the animation doesn't work:

Code: Select all

            Storyboard m_sbFadeIn = new Storyboard();
            EasingDoubleKeyFrame _edkf1 = new EasingDoubleKeyFrame
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)),
                Value = 0.0
            };
            EasingDoubleKeyFrame _edkf2 = new EasingDoubleKeyFrame
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)),
                Value = 1.0,
                EasingFunction = new CircleEase { EasingMode = EasingMode.EaseIn }
            };
            DoubleAnimationUsingKeyFrames _daukf = new DoubleAnimationUsingKeyFrames();
            _daukf.KeyFrames.Add(_edkf1);
            _daukf.KeyFrames.Add(_edkf2);
            Storyboard.SetTargetName(_daukf, "textblock1");
            Storyboard.SetTargetProperty(_daukf, new PropertyPath(FrameworkElement.OpacityProperty));
            m_sbFadeIn.Children.Add(_daukf);
           
            _edkf1 = new EasingDoubleKeyFrame
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)),
                Value = -100
            };
            _edkf2 = new EasingDoubleKeyFrame
            {
                KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)),
                Value = 0,
                EasingFunction = new CircleEase { EasingMode = EasingMode.EaseIn }
            };
            _daukf = new DoubleAnimationUsingKeyFrames();
            _daukf.KeyFrames.Add(_edkf1);
            _daukf.KeyFrames.Add(_edkf2);
            Storyboard.SetTargetName(_daukf, "textblock1");
            Storyboard.SetTargetProperty(_daukf, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
            m_sbFadeIn.Children.Add(_daukf);


The result should be the same... or did I miss anything? I'm using 2.0.0-alpha49-068 for my project

[KenX]

It looks like it has to do with the second part which targets "(UIElement.RenderTransform).(CompositeTransform.TranslateX)" as I commented them out leaving only the first part which targets "FrameworkElement.OpacityProperty" will work flawlessly

[JS-Support @Userware]

Hi KenX and welcome to the forum.

Thanks for your compliments about CSHTML5.

The issue is due to the fact that we currently do not support complex property paths defined in C# (such as new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"). You can see in the code generated in the "obj/Debug" folder that some methods are generated from the XAML file that allow to access the property using reflection, and that is not done automatically if the property path is set in C#. We are going to see if this can be improved in a future version.

Thank you.
Regards

[KenX]

I've come up with an alternative way to do exactly the same animation I wanted

Thank you

[JS-Support @Userware]

Nice! Can you please tell us more about that alternative? I'm very curious about it.

[KenX]

It's actually no magic but a dumb solution, I define TargetProperty in XAML and the rest in code-behind

In XAML:

Code: Select all

<Storyboard x:Name="objFadeInControlsBase">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" />
</Storyboard>

<!-- Many occurrences of this -->
<TextBlock x:Name="textblock1" Text="Some Text">
            <TextBlock.RenderTransform>
                    <CompositeTransform/>
            </TextBlock.RenderTransform>
</TextBlock>


Then in code-behind, I copy whatever value in Storyboard.TargetProperty from XAML into new keyframes to target every control to be generated:

Code: Select all

var _fadeInControlsBase = this.Resources["objFadeInControlsBase"] as Storyboard;
var _fadeInControlsDuplicate = new Storyboard();

var _dblKey = _fadeInControlsBase.Children[0] as DoubleAnimationUsingKeyFrames;

// A loop to iterate all controls to be generated
var _newKey1 = new DoubleAnimationUsingKeyFrames();
Storyboard.SetTargetName(_newKey1, textblock1.Name);
Storyboard.SetTargetProperty(_newKey1, Storyboard.GetTargetProperty(_dblKey));

var _edkf1 = new EasingDoubleKeyFrame
{
   KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)),
   Value = -100
};
var _edkf2 = new EasingDoubleKeyFrame
{
   KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)),
   Value = 0,
   EasingFunction = new CircleEase { EasingMode = EasingMode.EaseIn }
};

_newKey1.KeyFrames.Add(_edkf1);
_newKey1.KeyFrames.Add(_edkf2);

_fadeInControlsDuplicate.Children.Add(_newKey1);
// Loop ends

// Play animation of all controls...
_fadeInControlsDuplicate.Begin();


[JS-Support @Userware]

Thanks!