How to instantiate PropertyPath for the StoryBoard with the Dependency property in C#?  
Author Message
tuhin sinha





PostPosted: Windows Presentation Foundation (WPF), How to instantiate PropertyPath for the StoryBoard with the Dependency property in C#? Top

Hi All

Below is the Xaml Code which is working as per the need to animate an image. I am tring to animate the same image through C#. Can Someone help in Setting the Storyboard.TargetProperty in C#.

How to instantiate PropertyPath for the StoryBoard with the Dependency property for Image Translate.XProperty in C# as shown below eg. (UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X) which is in XAML.

<Grid

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ccl="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"

mc:Ignorable="d"

Background="#FFFFFFFF"

x:Name="DocumentRoot"

x:Class="Animation.SampleMouseAnimation"

Width="640" Height="480">

<Grid.Resources>

<Storyboard x:Key="OnLoaded">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="Button">

<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="370" KeyTime="00:00:00"/>

<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="11" KeyTime="00:00:10.9580000"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="Button">

<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="224" KeyTime="00:00:00"/>

<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,0.5" Value="19" KeyTime="00:00:10.9580000"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Grid.Resources>

<Grid.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>

</EventTrigger>

</Grid.Triggers>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="89,107,0,0" Width="16" Height="31" x:Name="Button" Source="C:\Documents and Settings\tsinha\My Documents\Interactive Designer Projects\UntitledProject1\mouse11.JPG" RenderTransformOrigin="0.5,0.5" Grid.Row="0">

<Image.RenderTransform>

<TransformGroup>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Image.RenderTransform>

</Image>

</Grid>

C# Code:

using System;

using System.IO;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Navigation;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

using System.ComponentModel;

namespace Animation

{

public partial class Sample:Page

{

private string _targetName = "mouseImage";

private string _xtargetProperty = "(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)";

private string _ytargetProperty = "(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)";

private double _xBeginTime = 5;

public string TargetName

{

get { return _targetName; }

set { _targetName = value; }

}

public string XTargetProperty

{

get { return _xtargetProperty; }

set { _xtargetProperty = value; }

}

public string YTargetProperty

{

get { return _ytargetProperty; }

set { _ytargetProperty = value; }

}

public Image mouseImage;

public Sample()

{

mouseImage = new Image();

mouseImage.HorizontalAlignment = HorizontalAlignment.Left;

mouseImage.VerticalAlignment = VerticalAlignment.Top;

mouseImage.Margin = new Thickness(89, 107, 0, 0);

mouseImage.Width = 16;

mouseImage.Height = 31;

BitmapImage bitmap = new BitmapImage();

bitmap.BeginInit();

bitmap.UriSource = new Uri("C:\\Documents and Settings\\tsinha\\My Documents\\Interactive Designer Projects\\UntitledProject1\\mouse11.JPG");

bitmap.EndInit();

mouseImage.Source = bitmap;

mouseImage.RenderTransformOrigin = new Point(0.5, 0.5);

TransformGroup imgTransformGroup = new TransformGroup();

TranslateTransform tt = new TranslateTransform(0,0);

imgTransformGroup.Children.Add(tt);

mouseImage.RenderTransform = imgTransformGroup;

mouseImage.Name = TargetName;

// Create a name scope for the page.

NameScope.SetNameScope(this, new NameScope());

this.RegisterName(TargetName, mouseImage);

DoubleAnimationUsingKeyFrames xDoubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();

xDoubleAnimationUsingKeyFrames.BeginTime = TimeSpan.FromMilliseconds(_xBeginTime);

SplineDoubleKeyFrame xSplineDoubleKeyFrame1 = new SplineDoubleKeyFrame();

xSplineDoubleKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));

KeySpline xKeySpline1 = new KeySpline(0.5, 0.5, 0.5, 0.5);

xSplineDoubleKeyFrame1.KeySpline = xKeySpline1;

xSplineDoubleKeyFrame1.Value = 370;

SplineDoubleKeyFrame xSplineDoubleKeyFrame2 = new SplineDoubleKeyFrame();

xSplineDoubleKeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(10.9580000));

KeySpline xKeySpline2 = new KeySpline(0.5, 0.5, 0.5, 0.5);

xSplineDoubleKeyFrame2.KeySpline = xKeySpline2;

xSplineDoubleKeyFrame2.Value = 11;

xDoubleAnimationUsingKeyFrames.KeyFrames.Add(xSplineDoubleKeyFrame1);

xDoubleAnimationUsingKeyFrames.KeyFrames.Add(xSplineDoubleKeyFrame2);

//Y Co-ordinate

DoubleAnimationUsingKeyFrames yDoubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();

yDoubleAnimationUsingKeyFrames.BeginTime = TimeSpan.FromMilliseconds(_xBeginTime);

SplineDoubleKeyFrame ySplineDoubleKeyFrame1 = new SplineDoubleKeyFrame();

ySplineDoubleKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));

KeySpline yKeySpline1 = new KeySpline(0.5, 0.5, 0.5, 0.5);

ySplineDoubleKeyFrame1.KeySpline = xKeySpline1;

ySplineDoubleKeyFrame1.Value = 224;

SplineDoubleKeyFrame ySplineDoubleKeyFrame2 = new SplineDoubleKeyFrame();

ySplineDoubleKeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(10.9580000));

KeySpline yKeySpline2 = new KeySpline(0.5, 0.5, 0.5, 0.5);

ySplineDoubleKeyFrame2.KeySpline = xKeySpline2;

ySplineDoubleKeyFrame2.Value = 19;

yDoubleAnimationUsingKeyFrames.KeyFrames.Add(ySplineDoubleKeyFrame1);

yDoubleAnimationUsingKeyFrames.KeyFrames.Add(ySplineDoubleKeyFrame2);

// Create a name scope for the page.

NameScope.SetNameScope(this, new NameScope());

Storyboard.SetTargetProperty(xDoubleAnimationUsingKeyFrames, new PropertyPath(TranslateTransform.XProperty));

Storyboard.SetTargetName(yDoubleAnimationUsingKeyFrames, TargetName);

Storyboard.SetTargetProperty(yDoubleAnimationUsingKeyFrames, new PropertyPath(TranslateTransform.YProperty));

Storyboard mouseImageStoryboard = new Storyboard();

//mouseImageStoryboard.Children.Add(myDoubleAnimation);

mouseImageStoryboard.Children.Add(xDoubleAnimationUsingKeyFrames);

mouseImageStoryboard.Children.Add(yDoubleAnimationUsingKeyFrames);

ResourceDictionary resourceStoryBoard = new ResourceDictionary();

resourceStoryBoard.Add("mouseImageStoryboard", mouseImageStoryboard);

Grid grid = new Grid();

grid.Width = 640 ;

grid.Height = 480;

grid.Resources = resourceStoryBoard;

ColumnDefinition col = new ColumnDefinition();

grid.ColumnDefinitions.Add(col);

RowDefinition row = new RowDefinition();

row.Height = GridLength.Auto;

grid.RowDefinitions.Add(row);

Grid.SetRow(mouseImage, 0);

BeginStoryboard beginStoryboard = new BeginStoryboard();

beginStoryboard.Storyboard = mouseImageStoryboard;

EventTrigger mouseImageTrigger = new EventTrigger();

mouseImageTrigger.RoutedEvent = Image.LoadedEvent;

mouseImageTrigger.Actions.Add(beginStoryboard);

grid.Triggers.Add(mouseImageTrigger);

grid.Children.Add(mouseImage);

this.Content = grid;

this.Loaded += delegate(object sender, RoutedEventArgs args)

{

mouseImageStoryboard.Begin(mouseImage);

};

}

}

}

Tuhin



Visual Studio 200833  
 
 
mactacular





PostPosted: Windows Presentation Foundation (WPF), How to instantiate PropertyPath for the StoryBoard with the Dependency property in C#? Top

Hi Tuhin,

Try changing your sample.cs similar to the code below.

HTH

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

using System.ComponentModel;



namespace Animation
{
public partial class Sample:Page
{


private string _targetName = "mouseImage";

private double _xBeginTime = 5;

public string TargetName
{
get { return _targetName; }
set { _targetName = value; }
}

public Image mouseImage;

public Sample()
{

mouseImage = new Image();
mouseImage.HorizontalAlignment = HorizontalAlignment.Left;
mouseImage.VerticalAlignment = VerticalAlignment.Top;
mouseImage.Margin = new Thickness(89, 107, 0, 0);
mouseImage.Width = 16;
mouseImage.Height = 31;
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(@"C:\Documents and Settings\tsinha\My Documents\Interactive Designer Projects\UntitledProject1\mouse11.JPG",UriKind.Absolute);
bitmap.EndInit();
mouseImage.Source = bitmap;
mouseImage.RenderTransformOrigin = new Point(0.5, 0.5);


Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle2";

Grid grid = new Grid();
grid.Width = 640 ;
grid.Height = 480;


ColumnDefinition col = new ColumnDefinition();
grid.ColumnDefinitions.Add(col);

RowDefinition row = new RowDefinition();
row.Height = GridLength.Auto;
grid.RowDefinitions.Add(row);

Grid.SetRow(mouseImage, 0);

grid.Children.Add(mouseImage);
this.Content = grid;

TransformGroup imgTransformGroup = new TransformGroup();
TranslateTransform tt = new TranslateTransform();
imgTransformGroup.Children.Add(tt);
mouseImage.RenderTransform = imgTransformGroup;
mouseImage.Name = TargetName;


NameScope.SetNameScope(this, new NameScope());
this.RegisterName("tt", tt);
this.RegisterName(TargetName, mouseImage);


DoubleAnimationUsingKeyFrames xDoubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();
xDoubleAnimationUsingKeyFrames.BeginTime = TimeSpan.FromMilliseconds(_xBeginTime);

SplineDoubleKeyFrame xSplineDoubleKeyFrame1 = new SplineDoubleKeyFrame(110, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5)), new KeySpline(0.5, 0.5, 0.5, 0.5));
SplineDoubleKeyFrame xSplineDoubleKeyFrame2 = new SplineDoubleKeyFrame(370, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10.9580000)), new KeySpline(0.5, 0.5, 0.5, 0.5));

xDoubleAnimationUsingKeyFrames.KeyFrames.Add(xSplineDoubleKeyFrame1);
xDoubleAnimationUsingKeyFrames.KeyFrames.Add(xSplineDoubleKeyFrame2);

//Y Co-ordinate
DoubleAnimationUsingKeyFrames yDoubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();
yDoubleAnimationUsingKeyFrames.BeginTime = TimeSpan.FromMilliseconds(_xBeginTime);

SplineDoubleKeyFrame ySplineDoubleKeyFrame1 = new SplineDoubleKeyFrame(19, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5)), new KeySpline(0.5, 0.5, 0.5, 0.5));
SplineDoubleKeyFrame ySplineDoubleKeyFrame2 = new SplineDoubleKeyFrame(224, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10.9580000)), new KeySpline(0.5, 0.5, 0.5, 0.5));

yDoubleAnimationUsingKeyFrames.KeyFrames.Add(ySplineDoubleKeyFrame1);
yDoubleAnimationUsingKeyFrames.KeyFrames.Add(ySplineDoubleKeyFrame2);
Storyboard.SetTargetName(xDoubleAnimationUsingKeyFrames, "tt");
Storyboard.SetTargetProperty(xDoubleAnimationUsingKeyFrames, new PropertyPath(TranslateTransform.XProperty));

Storyboard.SetTargetName(yDoubleAnimationUsingKeyFrames, "tt");
Storyboard.SetTargetProperty(yDoubleAnimationUsingKeyFrames, new PropertyPath(TranslateTransform.YProperty));
Storyboard mouseImageStoryboard = new Storyboard();

mouseImageStoryboard.Children.Add(xDoubleAnimationUsingKeyFrames);
mouseImageStoryboard.Children.Add(yDoubleAnimationUsingKeyFrames);

this.Loaded += delegate(object sender, RoutedEventArgs args)
{


mouseImageStoryboard.Begin(this);
};


}
}
}