Forums - CSHTML5

Posted: **Thu Oct 17, 2019 10:41 pm**

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? :roll:

I'm using 2.0.0-alpha49-068 for my project :idea:

Posted: **Fri Oct 18, 2019 2:04 am**

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 :shock:

Posted: **Fri Oct 18, 2019 3:05 am**

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

Posted: **Mon Oct 21, 2019 7:45 pm**

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

Thank you

Posted: **Mon Oct 21, 2019 11:31 pm**

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

Posted: **Tue Oct 22, 2019 1:32 am**

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

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();

Posted: **Tue Oct 22, 2019 3:22 am**

Thanks!

Forums - CSHTML5

Storyboard by XAML is OK but not Code...

Storyboard by XAML is OK but not Code...

Re: Storyboard by XAML is OK but not Code...

Re: Storyboard by XAML is OK but not Code...

Re: Storyboard by XAML is OK but not Code...

Re: Storyboard by XAML is OK but not Code...

Re: Storyboard by XAML is OK but not Code...

Re: Storyboard by XAML is OK but not Code...