Develop Reference

Issue adding animation to programmatically created UI element

My aim is to create a textBlock containing a name, after doing something with the method GetThings() I want an animation to play on the textBox basically moving it out of the view. as it is being animated the next textBlock is created with the next name.
But when I try and run the program I get the error:
No installed components were detected. Cannot resolve TargetProperty
(UIElement.RenderTransform).(CompositeTransform.TranslateY) on
specified object.
There is probably a better way of doing this, but I am limited in terms of my ability and would appreciate any help on the current issue.
Below is the code for the project:
await Task.Run(async () =>
{
TextBlock tb = null;
foreach (KeyValuePair<string, string> s in things)
{
await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => {
TextBlock _txtBlock = new TextBlock()
{
Text = s.Key,
Margin = new Thickness(131, 0, 0, 0),
FontSize = 26,
Height = 40,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Center,
Width = 168,
};
innerOverlay.Children.Add(_txtBlock);
tb = _txtBlock;
});
string tested = GetThings(s.Value);
if (tested == string.Empty)
{
MessageDialog failedMsg = new MessageDialog("failed", "problem");
failedMsg.Commands.Add(new UICommand("Exit"));
IUICommand command = await failedMsg.ShowAsync();
if (command.Label.Equals("Exit", StringComparison.CurrentCultureIgnoreCase))
{
Windows.UI.Xaml.Application.Current.Exit();
}
return;
}
else
{
await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => {
var animation = new DoubleAnimation
{
EnableDependentAnimation = true,
To = 40,
Duration = new Duration(TimeSpan.FromMilliseconds(500)),
};
Storyboard.SetTarget(animation, tb);
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
var sb = new Storyboard();
sb.Children.Add(animation);
sb.Begin();
});
thingGroup.Add(s.Key, tested);
}
}
});

It seems that you are having questions about how to animate the transformation of the TextBlock. #Clemens is right, you will need to create a CompositeTransform object and assign it to the RenderTransform property of the TextBlock first.
I've made a simple demo here. You could refer to it and adjust it to your real scenario.
Code:
TextBlock _txtBlock = new TextBlock()
{
Text = "Frist One",
//Margin = new Thickness(131, 0, 0, 0),
FontSize = 26,
Height = 40,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Center,
Width = 168,
};
RootGrid.Children.Add(_txtBlock);
//create a CompositeTransform for the TextBlock
CompositeTransform TextBlockTransform = new CompositeTransform();
_txtBlock.RenderTransform = TextBlockTransform;
//Create animation to animate the CompositeTransform
Storyboard storyboard = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.From = 0;
animation.To = 40;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
Storyboard.SetTarget(animation, _txtBlock);
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard.Children.Add(animation);
storyboard.Begin();
You could get more information about Transforms and Animation here: Transforms overview, DoubleAnimation Class and CompositeTransform Class

Change position of Grid using animation C#

WPF
<Grid Name="GhostGrid">
<Image Source="img.jpg"/>
</Grid>
I am trying to change the position of a grid using animation. This is working fine -
C#
TranslateTransform transformImage = new TranslateTransform();
GhostGrid.RenderTransform = transformImage;
DoubleAnimation animationImage = new DoubleAnimation(0, -50, TimeSpan.FromSeconds(0.6));
transformImage.BeginAnimation(TranslateTransform.XProperty, animationImage);
But this not working -
C#
DoubleAnimation animationImage = new DoubleAnimation()
{
From = 0,
To = -450,
Duration = new Duration(TimeSpan.FromSeconds(0.8))
};
Storyboard.SetTarget(animationImage, GhostGrid);
Storyboard.SetTargetProperty(animationImage,new PropertyPath(TranslateTransform.XProperty));
storyBoard = new Storyboard();
storyBoard.Children.Add(animationImage);
storyBoard.Begin();

As per Clemens suggestion its working now -
DoubleAnimation animationImage = new DoubleAnimation()
{
From = 0,
To = -450,
Duration = new Duration(TimeSpan.FromSeconds(0.8))
};
Storyboard.SetTarget(animationImage, GhostGrid);
Storyboard.SetTargetProperty(animationImage,new PropertyPath("RenderTransform.X"));
storyBoard = new Storyboard();
storyBoard.Children.Add(animationImage);
storyBoard.Begin();

Using Dynamic Foreground with LinearGradientBrush

I'm working on a WPF application for my first time
I have a button that when clicked on will change its foreground color.
I felt regular colors are boring so I did some Linear Gradients to make it look better.
on C# I wrote.
// Here I create a Linear Gradient bush, a Collection of gradient stops, and the gradient stops I need and a brushconverter to get color codes #Fxxxx into color
BrushConverter bc = new BrushConverter();
public LinearGradientBrush MetallicBlue= new LinearGradientBrush();
public GradientStopCollection BlueG = new GradientStopCollection();
public GradientStop BGS1 = new GradientStop();
public GradientStop BGS2 = new GradientStop();
public GradientStop BGS3 = new GradientStop();
public GradientStop BGS4 = new GradientStop();
// Then I define each gradient stop and add it to the GradientStop Collection
BGS1.Color = (Color)bc.ConvertFrom("#FF094AAD");
BGS1.Offset = 0.244;
BGS2.Color = (Color)bc.ConvertFrom("#FF0745AA");
BGS2.Offset = 0.988;
BGS3.Color = (Color)bc.ConvertFrom("#FF286ED1");
BGS3.Offset = 0.5;
BGS4.Color = (Color)bc.ConvertFrom("#FF094AAD");
BGS4.Offset = 0.076;
BlueG.Add(BGS1);
BlueG.Add(BGS2);
BlueG.Add(BGS3);
BlueG.Add(BGS4);
// Here I set my Metallic Blue with Properties
MetallicBlue.StartPoint = new Point(0.5, 0);
MetallicBlue.EndPoint = new Point(0.5, 1);
MetallicBlue.GradientStops = BlueG;
On my click event when I set the color foreground it changes to blank! Text disappears.
textBlock.Foreground = MetallicBlue;
Can anyone help me out.
I want to implement this on many buttons but It does not quite work.
what am I missing.

A BrushConverter returns a Brush. You should use a ColorConverter. This works fine for me:
ColorConverter cc = new ColorConverter();
LinearGradientBrush MetallicBlue = new LinearGradientBrush();
GradientStopCollection BlueG = new GradientStopCollection();
GradientStop BGS1 = new GradientStop();
GradientStop BGS2 = new GradientStop();
GradientStop BGS3 = new GradientStop();
GradientStop BGS4 = new GradientStop();
BGS1.Color = (Color)cc.ConvertFrom("#FF094AAD");
BGS1.Offset = 0.244;
BGS2.Color = (Color)cc.ConvertFrom("#FF0745AA");
BGS2.Offset = 0.988;
BGS3.Color = (Color)cc.ConvertFrom("#FF286ED1");
BGS3.Offset = 0.5;
BGS4.Color = (Color)cc.ConvertFrom("#FF094AAD");
BGS4.Offset = 0.076;
BGS4.Offset = 0.076;
BlueG.Add(BGS1);
BlueG.Add(BGS2);
BlueG.Add(BGS3);
BlueG.Add(BGS4);
MetallicBlue.StartPoint = new Point(0.5, 0);
MetallicBlue.EndPoint = new Point(0.5, 1);
MetallicBlue.GradientStops = BlueG;
textBlock.Foreground = MetallicBlue;
textBlock.Text = "Sample";
textBlock.FontSize = 40;

Using DoubleAnimation code behind in WinRT (XAML)

I have some problem. This is my code behind:
var s = new Storyboard();
var dAnimation = new DoubleAnimation();
dAnimation.RepeatBehavior = RepeatBehavior.Forever;
dAnimation.AutoReverse = true;
dAnimation.EnableDependentAnimation = true;
dAnimation.From = 200;
dAnimation.To = 300;
Storyboard.SetTarget(dAnimation, viewBox);
Storyboard.SetTargetProperty(dAnimation, "Width");
dAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(2000));
s.Children.Add(dAnimation);
s.Begin();
viewBox is on Canvas and has just a few property: Canvas.Left, Canvas.Top, Height and Width. Code from codebehind working great with Opacity, but not working with Width or Height. Codebehind work when user pointer is entered. I want do it without triggers. Found some solutions for Silverlight and WPF:
WinRT/Metro Animation in code-behind
they are not working. I dont undersstand why it work with opacity and didn't work with Width and Height Any ideas?

You cannot animate Width with a DoubleAnimation, you need to use a DoubleAnimationUsingKeyFrames.
var animation = new DoubleAnimationUsingKeyFrames();
var frame = new EasingDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(2000)), Value = 300});
animation.KeyFrames.Add(frame);
Storyboard.SetTargetProperty(animation, "(FrameworkElement.Width)");
Storyboard.SetTarget(animation, viewBox);
Storyboard.Children.Add(animation);

I didn't check ViewBox,but I can with DoubleAnimation for Grid.
Code is like below
var s = new Storyboard();
var widthAnim = new DoubleAnimation()
{
To = w,
Duration=new Duration(TimeSpan.FromMilliseconds(duration))
};
widthAnim.EnableDependentAnimation = true;
Storyboard.SetTarget(widthAnim,elem);
Storyboard.SetTargetProperty(widthAnim,"Width");
s.Children.Add(widthAnim);
s.Begin();

How to center TextBox element inside Grid

I'm developing WP8 app for my own needs and want it to have small live tile with text.
Since small tile cannot display text, I'm generating appropriate image with needed text.
Here is the code:
WriteableBitmap bmpSmall = new WriteableBitmap(159, 159);
var grid = new Grid();
grid.Width = bmpSmall.PixelWidth;
grid.Height = bmpSmall.PixelHeight;
var background = new Canvas();
background.Width = bmpSmall.PixelWidth;
background.Height = bmpSmall.PixelHeight;
SolidColorBrush backColor = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
background.Background = backColor;
var textBlock = new TextBlock();
textBlock.Text = "qwerty";
textBlock.FontWeight = FontWeights.Bold;
textBlock.HorizontalAlignment = HorizontalAlignment.Center;
textBlock.VerticalAlignment = VerticalAlignment.Center;
textBlock.FontSize = 28;
textBlock.Foreground = new SolidColorBrush(Colors.White);
grid.Children.Add(textBlock);
bmpSmall.Render(background, null);
bmpSmall.Render(grid, null);
bmpSmall.Invalidate();
using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream imageStream = new IsolatedStorageFileStream("/Shared/ShellContent/smallTile.jpg", System.IO.FileMode.Create, isf))
{
bmpSmall.SaveJpeg(imageStream, 159, 159, 0, 100);
}
}
ShellTile tile = ShellTile.ActiveTiles.First();
FlipTileData tileData = new FlipTileData();
tileData.SmallBackgroundImage = new Uri(#"isostore:/Shared/ShellContent/smallTile.jpg", UriKind.Absolute);
tile.Update(tileData);
And result looks like:
As you see, text is aligned to top left corner. The question is "Why"? Since I'd set textBlock.HorizontalAlignment and textBlock.VerticalAlignment - I expect it in the center of the image.
For example the following XAML looks like you can expect and like I need:
<Grid Width="159" Height="159">
<Grid.Background>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</Grid.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" FontSize="28" Foreground="White">qwerty</TextBlock>
</Grid>
What did I miss? How can I center text?

Give the following code a try:
WriteableBitmap bmpSmall = new WriteableBitmap(159, 159);
var grid = new Grid();
grid.Width = bmpSmall.PixelWidth;
grid.Height = bmpSmall.PixelHeight;
var background = new Canvas();
background.Width = bmpSmall.PixelWidth;
background.Height = bmpSmall.PixelHeight;
SolidColorBrush backColor = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
background.Background = backColor;
var textBlock = new TextBlock();
textBlock.Width = bmpSmall.PixelWidth;
textBlock.Text = "qwerty";
textBlock.FontWeight = FontWeights.Bold;
textBlock.HorizontalAlignment = HorizontalAlignment.Stretch;
textBlock.VerticalAlignment = VerticalAlignment.Center;
textBlock.FontSize = 28;
textBlock.Foreground = new SolidColorBrush(Colors.White);
textBlock.TextAlignment = TextAlignment.Center;
grid.Children.Add(background);
grid.Children.Add(textBlock);
grid.Measure(new Size(bmpSmall.PixelWidth, bmpSmall.PixelHeight));
grid.Arrange(new Rect(0,0,bmpSmall.PixelWidth, bmpSmall.PixelHeight));
grid.UpdateLayout();
bmpSmall.Render(grid, null);
bmpSmall.Invalidate();
I set the TextBlock width to the same as the rest of the tile, and set HorizontalAlignment to stretch, so that control would take up the whole width of the tile. Then I set the TextAlignment property to TextAlignment.Center, in order to center the text. Hope that helps!
Edit: Apparently for writable bitmaps, you must do the measure/arrange/layout steps yourself in order to render controls as you would think they should be rendered. Give this updated code a try, it should work this time!

You will have to set the HorizontalAlignment="Stretch" VerticalAlignment="Stretch" for grid also. Currently grid is only of size of its content i.e textblock.

After copying your code into an empty WPF application, I'm afraid to tell you that your code works just fine:
All I did was to set the Grid.Background to red and the TextBlock.Background to black to clarify the situation:
<Grid Width="159" Height="159">
<Grid.Background>
<SolidColorBrush Color="Red"/>
</Grid.Background>
<TextBlock Background="Black" HorizontalAlignment="Center"
VerticalAlignment="Center" FontWeight="Bold" FontSize="28"
Foreground="White">qwerty</TextBlock>
Therefore, I can only assume that you have a problem elsewhere in your code.
UPDATE >>>
Sorry, you're right, I did misunderstand you. However, after testing your C# code, the story is just the same:
This might look like the same image, but it actually comes from your C# code... I made a couple of little changes, but nothing that affected the position of the TextBlock:
Grid grid = new Grid();
grid.Background = Brushes.Red;
grid.Width = grid.Height = 159.0;
TextBlock textBlock = new TextBlock();
textBlock.Text = "qwerty";
textBlock.Background = Brushes.Black;
textBlock.FontWeight = FontWeights.Bold;
textBlock.HorizontalAlignment = HorizontalAlignment.Center;
textBlock.VerticalAlignment = VerticalAlignment.Center;
textBlock.FontSize = 28;
textBlock.Foreground = Brushes.White;
grid.Children.Add(textBlock);
this.Content = grid;
If you put this code into a new WPF project, you'll see that it works just fine, so that only leaves your WriteableBitmap object as the culprit of this problem... what are you using that for? If you're just adding it to your UI, then you can simply add the controls to the Window directly.