We Keep Coding

Animating rectangle in WPF

I have a password box and under it i have a rectangle. I want the rectangle to expand from 0 to 200 width when the password box gets focus.
this is the XAML code
<Rectangle x:Name="passwordbox_underline" Grid.Row="2"
Grid.Column="1" Fill="YellowGreen" RadiusX="1" RadiusY="1" Width="0" HorizontalAlignment="Left"/>
<PasswordBox Grid.Column="1"
Grid.Row="1"
Style="{StaticResource hi}" CaretBrush="White" FontStretch="Expanded" x:Name="pass" GotFocus="pass_GotFocus"/>
And this is the C# code:
private void pass_GotFocus(object sender, RoutedEventArgs e)
{
Duration duration = new Duration(TimeSpan.FromSeconds(2));
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
Storyboard.SetTarget(myDoubleAnimation1, passwordbox_underline);
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("Rectangle.Width"));
myDoubleAnimation1.From = 0;
myDoubleAnimation1.To = 200;
sb.Begin();
}
But it doesn't work and nothing happens. Where's the problem?

I got it working. There we a couple minor issues.
First, you never added your DoubleAnimation to your Storyboard. You need the following
sb.Children.Add(myDoubleAnimation1);
Next, your property path is a bit off. You're working on the Rectangle, so you don't specify it as part of the path. It is just be "Width".
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("Width"));
Last, your rectangle had no height so it still was not visible when animated. I added a height of 5 for testing.
<Rectangle x:Name="passwordbox_underline" Grid.Row="2"
Grid.Column="1" Fill="YellowGreen" RadiusX="1" RadiusY="1" Width="0" Height="5" HorizontalAlignment="Left"/>
Putting it all together, this code snippet will animate (but don't forget to add a height to your rectangle):
Duration duration = new Duration(TimeSpan.FromSeconds(2));
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
Storyboard.SetTarget(myDoubleAnimation1, passwordbox_underline);
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("Width"));
myDoubleAnimation1.From = 0;
myDoubleAnimation1.To = 200;
sb.Children.Add(myDoubleAnimation1);
sb.Begin();

How to get Text-Marquee to fade in and out smoothly in WPF

I have a WPF Canvas with a TextBlock and an Image on it. The text is animated, but it doesn't look smooth. I tried many combinations of different FPS-Settings and durations but it won't get better.
I also want to let the text fade-in/out at the start and ending. But I found no methods to do so.
At the moment it looks like that:
How can I get the animation smoothly? How can I fade it in/out smoothly?
Before you ask, I need to show the Window invisible because I use the WpfAppBar and that component needs an HWND.
Here is the canvas xaml:
<Canvas x:Name="canMain" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Border x:Name="boLogo" Panel.ZIndex="2" Height="40" Background="Gray" Canvas.Left="0" Canvas.Top="-20">
<Image Height="39" Width="auto" Margin="5, 0, 5, 0" Source="pack://siteoforigin:,,,/Resources/Logo.png" />
</Border>
<TextBlock x:Name="tbInfo" Panel.ZIndex="1" Visibility="Hidden" RenderOptions.BitmapScalingMode="NearestNeighbor" FontSize="32" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" FontFamily="Arial" FontWeight="Bold" Padding="5" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
And the code to animate the text:
public void ShowWindow(Brush fontColor, Brush backgroundColor, string str) {
var helper = new WindowInteropHelper(this);
helper.EnsureHandle();
tbInfo.Foreground = fontColor;
this.Background = backgroundColor;
tbInfo.Text = str;
this.Height = 39;
this.Width = SystemParameters.WorkArea.Width;
this.Left = SystemParameters.PrimaryScreenWidth - this.Width;
ShowWindowInvisible();
WpfAppBar.AppBarFunctions.SetAppBar(this, WpfAppBar.ABEdge.Top);
Visibility = Visibility.Visible;
int duration = 10 + str.Length / 5;
TextMarquee(duration);
}
private void TextMarquee(int duration)
{
Timeline.DesiredFrameRateProperty.OverrideMetadata(
typeof(Timeline),
new FrameworkPropertyMetadata { DefaultValue = 60 }
);
double height = canMain.ActualHeight - tbInfo.ActualHeight;
tbInfo.Margin = new Thickness(0, height / 2, 0, 0);
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = canMain.ActualWidth;
doubleAnimation.To = tbInfo.ActualWidth *-1;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(duration));
tbInfo.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
tbInfo.Visibility = Visibility.Visible;
}
private void ShowWindowInvisible()
{
var width = Width;
var height = Height;
var windowStyle = WindowStyle;
var showInTaskbar = ShowInTaskbar;
var showActivated = ShowActivated;
Width = 0;
Height = 0;
WindowStyle = WindowStyle.None;
ShowInTaskbar = false;
ShowActivated = false;
Show();
Visibility = Visibility.Hidden;
Width = width;
Height = height;
WindowStyle = windowStyle;
ShowInTaskbar = showInTaskbar;
ShowActivated = showActivated;
}

How to animate TranslateTransform and ScaleTransform in WPF

I'm trying to animate the TranslateTransform and ScaleTransform of a Rectangle at the same time using a StoryBoard in code-behind. I studied some similar questions but I some how I'm still stuck at the first step.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="Aqua"></Rectangle>
<Button Grid.Row="1" Content="Animate" Click="ButtonBase_OnClick"/>
</Grid>
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var translate_x = new DoubleAnimation()
{
From = 0,
To = 100,
Duration = TimeSpan.FromSeconds(5),
};
var translate_y = new DoubleAnimation()
{
From = 0,
To = 100,
Duration = TimeSpan.FromSeconds(5),
};
var scale_x = new DoubleAnimation()
{
From = 1,
To = 2,
Duration = TimeSpan.FromSeconds(5),
};
var scale_y = new DoubleAnimation()
{
From = 1,
To = 2,
Duration = TimeSpan.FromSeconds(5),
};
}

In XAML, give your rectangle a TransformGroup:
<Rectangle x:Name="MyRectangle" Width="100" Height="100" Fill="Chartreuse">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="rectScale"/>
<TranslateTransform x:Name="rectTrans"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
In the code-behind, use the BeginAnimation method on the transforms:
rectScale.BeginAnimation(ScaleTransform.ScaleXProperty, scale_x);
rectScale.BeginAnimation(ScaleTransform.ScaleYProperty, scale_y);
rectTrans.BeginAnimation(TranslateTransform.XProperty, translate_x);
rectTrans.BeginAnimation(TranslateTransform.YProperty, translate_y);

If rectScale.BeginAnimation() doesn't work try
rectScale.RenderTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scale_x);

ListView Scrolling does not work when Manipulation events wired into ListviewItem - WP8.1

I have wired Manipulation events with the listviewitem to capture left swipe and right swipe. But when I try to scroll down the listview, it does not work! The manipulation events get fired and the listview does not scroll!
This is the listview Datatemplate
<Grid Height="60" Width="380" Margin="0,0,0,1">
<Grid x:Name="ItemGrid" HorizontalAlignment="Left" VerticalAlignment="Center" Width="380" Height="60" Background="Orange" Canvas.ZIndex="2"
ManipulationMode="TranslateX" ManipulationStarted="On_ChannelItem_ManipulationStarted" ManipulationDelta="On_ChannelItem_ManipulationDelta" ManipulationCompleted="OnChannelItemManipulationCompleted">
<TextBlock x:Name="titleTextBlock" Margin="20,0,0,0" Canvas.ZIndex="2" VerticalAlignment="Center" TextAlignment="Left" FontSize="25" >
</TextBlock>
</Grid>
<Grid x:Name="DelGrid" Opacity="0.0" HorizontalAlignment="Right" VerticalAlignment="Center" Height="60" Background="Red" Canvas.ZIndex="-1" Tapped="On_ChannelDelete_Tap" Width="380">
<Button Content="X" FontSize="25" Canvas.ZIndex="-1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="380" BorderThickness="0" />
</Grid>
</Grid>
This is the manipulation events
private void OnChannelItemManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Grid ChannelGrid = (Grid)sender;
Grid DeleteGrid = (Grid)((Grid)(ChannelGrid.Parent)).Children[1];
double dist = e.Cumulative.Translation.X;
if (dist < -100) // Swipe left
{
Storyboard SwipeLeft = new Storyboard();
DoubleAnimation OpacityAnimation = new DoubleAnimation();
OpacityAnimation.EnableDependentAnimation = true;
OpacityAnimation.From = 0.0;
OpacityAnimation.To = 1.0;
OpacityAnimation.BeginTime = TimeSpan.FromMilliseconds(0);
OpacityAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1));
Storyboard.SetTarget(OpacityAnimation, DeleteGrid);
Storyboard.SetTargetProperty(OpacityAnimation, "Opacity");
SwipeLeft.Children.Add(OpacityAnimation);
DoubleAnimation WidthAnimation = new DoubleAnimation();
WidthAnimation.EnableDependentAnimation = true;
WidthAnimation.From = 380;
WidthAnimation.To = 0;
WidthAnimation.BeginTime = TimeSpan.FromMilliseconds(30);
WidthAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
Storyboard.SetTarget(WidthAnimation, ChannelGrid);
Storyboard.SetTargetProperty(WidthAnimation, "Width");
SwipeLeft.Children.Add(WidthAnimation);
SwipeLeft.Begin();
}
else if (dist > 100) // Swipe right
{
Storyboard SwipeRight = new Storyboard();
ColorAnimation changeColorAnimation = new ColorAnimation();
changeColorAnimation.EnableDependentAnimation = true;
changeColorAnimation.To = Colors.Green;
changeColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
Storyboard.SetTarget(changeColorAnimation, ChannelGrid);
PropertyPath p = new PropertyPath("(ChannelGrid.Background).(SolidColorBrush.Color)");
Storyboard.SetTargetProperty(changeColorAnimation, p.Path);
SwipeRight.Children.Add(changeColorAnimation);
SwipeRight.Begin();
}
}
How do I enable the normal listview scrolling as well as the swipe? Vertical Scrolling is possible when I remove the manipulation events

Update your manipulation mode to include System:
ManipulationMode="TranslateX,System"

Creating a silverlight border in codebehind?

I have the following border in XAML:
<Border
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.RowSpan="3"
CornerRadius="1,1,1,1"
Background="Red"
BorderBrush="#333333"
BorderThickness="1,1,1,1"
x:Name="border"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter
x:Name="contentPresenter"
Margin="10,0,10,0"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Border>
and I'm trying to create a similar border in code behind (C#). I can't get beyond Border b = new Border(), I'm not sure how I'm supposed to put the border inside the specific grid column or how to span it.
Any ideas?

Something like this:
var border = new Border();
Grid.SetColumn(border, 0);
Grid.SetColumnSpan(border, 3);
Grid.SetRowSpan(border, 3);
border.CornerRadius = new CornerRadius(1);
border.Background = new SolidColorBrush(Colors.Red);
border.BorderBrush = new SolidColorBrush(Color.FromArgb(0xff, 0x33, 0x33, 0x33));
border.BorderThickness = new Thickness(1);
border.RenderTransformOrigin = new Point(0.5, 0.5);
var transformGroup = new TransformGroup();
transformGroup.Children.Add(new ScaleTransform());
transformGroup.Children.Add(new SkewTransform());
transformGroup.Children.Add(new RotateTransform());
transformGroup.Children.Add(new TranslateTransform());
border.RenderTransform = transformGroup;
Let me know if you want me to set the rest of the properties.

If that can help you :
Border b = new Border();
Grid.SetColumn(b, 0);
Grid.SetColumnSpan(b, 3);
Grid.SetRowSpan(b, 3);
b.CornerRadius = new CornerRadius(1);
b.Background = new SolidColorBrush(Colors.Red);
// Then add your border to the grid
g.Children.Add(b);
But for the ContentPresneter I dont know how to do that