Constructing WPF in-code for transform group based on the xaml code

Question

0.00/5 (No votes)

See more:

I am having problem in constructing my wpf c# project. This project supposely to animate a rectangle to move a certain amount of coordinate that i have set earlier.
Ex: My rectangle is at the position (x=0,y=0). I want with a click of a button to make it move at position (x=150, y=230) in interval of 100 milliseconds.
However, it cannot run and come up with error "System.InvalidOperationException: 'Cannot resolve all property references in the property path 'RenderTransform.Children[2].scaleY'." And it's highlighting the s.Begin(rectangle); part.

What I have tried:

This is the xaml code

XML

<Window x:Class="newStackOverflow.MainWindow"
        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:newStackOverflow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
                Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:10" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="canvas1" VerticalAlignment="Stretch" Background="Green">
            <Rectangle x:Name="rectangle"
                       Fill="White" Stroke="Black"
                       Height="100" Width="100"
                       Canvas.Left="10" Canvas.Top="10"
                       RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>
        <Button Content="Button"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Padding="10 5" Margin="10" Grid.Row="1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>
</Window>

And this is my in code:

C#

public MainWindow()
       {
           InitializeComponent();


           Button button = new Button();
           button.Height = 28;
           button.Width = 58;
           button.HorizontalAlignment = HorizontalAlignment.Center;
           button.VerticalAlignment = VerticalAlignment.Center;
           button.Content = "Button";
           canvas1.Children.Add(button);

           button.Name = "button";

           this.RegisterName(button.Name, button);

           Rectangle rectangle = new Rectangle();
           rectangle.Width = 100;
           rectangle.Height = 100;
           rectangle.Fill = new SolidColorBrush(Colors.White);
           rectangle.Stroke = new SolidColorBrush(Colors.Black);
           Canvas.SetLeft(rectangle, 10);
           Canvas.SetTop(rectangle,10);
           canvas1.Children.Add(rectangle);

           rectangle.Name = "rectangle";


           TranslateTransform tt = new TranslateTransform();
           ScaleTransform st = new ScaleTransform();


           TransformGroup tg = new TransformGroup();
           tg.Children.Add(tt);
           tg.Children.Add(st);

           button.RenderTransform = tg;


           Duration duration = new Duration(TimeSpan.FromMilliseconds(10));
           DoubleAnimationUsingKeyFrames myDoubleAnim = new DoubleAnimationUsingKeyFrames();
           EasingDoubleKeyFrame myDoubleKey = new EasingDoubleKeyFrame();



           Storyboard s = new Storyboard();
           Storyboard.SetTargetName(myDoubleAnim, button.Name);
           Storyboard.SetTargetProperty(myDoubleAnim, new PropertyPath("RenderTransform.Children[1].scaleY"));

           myDoubleKey.KeyTime = KeyTime.FromPercent(1);
           myDoubleKey.Value = 300;
           myDoubleAnim.KeyFrames.Add(myDoubleKey);
           s.Children.Add(myDoubleAnim);

            s.Begin(rectangle);
           //button.Loaded += new RoutedEventHandler(buttonLoaded);


       }

Posted 23-Nov-17 7:57am

Member 13485513

Updated 24-Nov-17 20:51pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2017-11-23T13:16:00

You don't need to create the Storyboard in code if it exists in XAML. Simply reference the XAML Storyboard by its Key and start it:

C#

Storyboard sb = this.FindResource("Storyboard1") as Storyboard;
sb.Begin();

If the StoryBoard does not have a TargetName, you can set one:

C#

Storyboard sb = this.FindResource("Storyboard1") as Storyboard;
Storyboard.SetTarget(sb, rectangle);
sb.Begin();

UPDATE

Here is an answer to a similar question that I posted. In this solution, they wanted to have a XAML only solution - click the button and play the animation:

XML

<Window x:Class="WpfRotateImage.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        mc:Ignorable="d"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        Title="WPF CodeProject Answer - Rotate Image" Height="350" Width="525">

    <Window.Resources>
        <Storyboard x:Key="Rotate">
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Visibility)"
                Storyboard.TargetName="Image1">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.01" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Visibility)"
                Storyboard.TargetName="Image2">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.01" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                Storyboard.TargetName="Image1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
            <BeginStoryboard Storyboard="{StaticResource Rotate}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid>
        <Grid.Resources>
            <Style TargetType="Image">
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="Margin" Value="0 10 0 0"/>
                <Setter Property="Grid.ColumnSpan" Value="8"/>
                <Setter Property="Grid.RowSpan" Value="8"/>
                <Setter Property="Width" Value="100"/>
                <Setter Property="Height" Value="100"/>
            </Style>
            <Style TargetType="Button">
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Bottom"/>
                <Setter Property="Margin" Value="0 10"/>
                <Setter Property="Padding" Value="10 5"/>
                <Setter Property="Grid.ColumnSpan" Value="8"/>
                <Setter Property="Grid.RowSpan" Value="8"/>
            </Style>
        </Grid.Resources>

        <Image x:Name="Image1" Source="https://vc.vse.cz/wp-content/uploads/2014/08/Accept-icon.png"
               RenderTransformOrigin="0.5,0.5" Visibility="Hidden">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="Image2" Source="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/MUTCD_R1-1.svg/2000px-MUTCD_R1-1.svg.png"/>

        <Button x:Name="button" Content="Animate"/>
    </Grid>

</Window>

Now, you want to call a storyboard against a UIElement from code-behind. So we want to change the button to raise an event and remove the Trigger for the button click event:

XML

<Window x:Class="WpfRotateImage.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        mc:Ignorable="d"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        Title="WPF CodeProject Answer - Rotate Image" Height="350" Width="525">

    <Window.Resources>
        <Storyboard x:Key="Rotate">
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Visibility)"
                Storyboard.TargetName="Image1">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.01" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.Visibility)"
                Storyboard.TargetName="Image2">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:1.01" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                Storyboard.TargetName="Image1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Grid.Resources>
            <Style TargetType="Image">
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="Margin" Value="0 10 0 0"/>
                <Setter Property="Grid.ColumnSpan" Value="8"/>
                <Setter Property="Grid.RowSpan" Value="8"/>
                <Setter Property="Width" Value="100"/>
                <Setter Property="Height" Value="100"/>
            </Style>
            <Style TargetType="Button">
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Bottom"/>
                <Setter Property="Margin" Value="0 10"/>
                <Setter Property="Padding" Value="10 5"/>
                <Setter Property="Grid.ColumnSpan" Value="8"/>
                <Setter Property="Grid.RowSpan" Value="8"/>
            </Style>
        </Grid.Resources>

        <Image x:Name="Image1" Source="https://vc.vse.cz/wp-content/uploads/2014/08/Accept-icon.png"
               RenderTransformOrigin="0.5,0.5" Visibility="Hidden">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="Image2" Source="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/MUTCD_R1-1.svg/2000px-MUTCD_R1-1.svg.png"/>

        <Button x:Name="button" Content="Animate" Click="button_Click"/>
    </Grid>

</Window>

Next we need to wire up the button event:

C#

using System.Windows;
using System.Windows.Media.Animation;

namespace WpfRotateImage
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            var sb = FindResource("Rotate") as Storyboard;
            sb.Begin();
        }
    }
}

And bingo! The button is clicked, the code-behind is called, and the storyboard is found and started.

Member 13485513 · Answer 2 · 2017-11-24T20:51:00

So is that mean i have to comment everything and make another function like i have done below?

public MainWindow()
        {
            InitializeComponent();


            //Button button = new Button();
            //button.Height = 28;
            //button.Width = 58;
            //button.HorizontalAlignment = HorizontalAlignment.Center;
            //button.VerticalAlignment = VerticalAlignment.Center;
            //button.Content = "Button";
            //canvas1.Children.Add(button);

            //button.Name = "button";

            //this.RegisterName(button.Name, button);

            //Rectangle rectangle = new Rectangle();
            //rectangle.Width = 100;
            //rectangle.Height = 100;
            //rectangle.Fill = new SolidColorBrush(Colors.White);
            //rectangle.Stroke = new SolidColorBrush(Colors.Black);
            //Canvas.SetLeft(rectangle, 10);
            //Canvas.SetTop(rectangle, 10);
            //canvas1.Children.Add(rectangle);

            //rectangle.Name = "rectangle";


            //TranslateTransform tt = new TranslateTransform();
            //ScaleTransform st = new ScaleTransform();


            //TransformGroup tg = new TransformGroup();
            //tg.Children.Add(tt);
            //tg.Children.Add(st);

            //button.RenderTransform = tg;


            //Duration duration = new Duration(TimeSpan.FromMilliseconds(10));
            //DoubleAnimationUsingKeyFrames myDoubleAnim = new DoubleAnimationUsingKeyFrames();
            //EasingDoubleKeyFrame myDoubleKey = new EasingDoubleKeyFrame();



            //Storyboard s = this.FindResource("Storyboard1") as Storyboard;
            //Storyboard.SetTarget(s, rectangle);
            ////Storyboard.SetTargetProperty(s, new PropertyPath("RenderTransform.Children[1].scaleY"));

            //myDoubleKey.KeyTime = KeyTime.FromPercent(1);
            //myDoubleKey.Value = 300;
            //myDoubleAnim.KeyFrames.Add(myDoubleKey);
            //s.Children.Add(myDoubleAnim);

            ////s.Begin();
            //button.Loaded += new RoutedEventHandler(buttonLoaded);


        }

        private void buttonLoaded(object sender, RoutedEventArgs e)
        {
            Storyboard s = this.FindResource("Storyboard1") as Storyboard;
            s.Begin(this);
        }
    }
}

Constructing WPF in-code for transform group based on the xaml code

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0