How to animate ListBoxItem position - silverlight

I am having some trouble animating the items in my ListBox. Animations on the OpacityProperty work great but when i try to animate the position of my ListBoxItem it simply does not move an inch (No exceptions are thrown, not even a log message indicating error).
Here is the code i am using:
private void deletAnimation()
{
Todo todoToDelete = App.ViewModel.Todos[1];
Storyboard storyboard = new Storyboard();
DoubleAnimation alphaAnim = new DoubleAnimation();
alphaAnim.From = 1;
alphaAnim.To = 0;
alphaAnim.Duration = new Duration(TimeSpan.FromMilliseconds(500));
ListBoxItem target = TodoList.ItemContainerGenerator.ContainerFromItem(todoToDelete) as ListBoxItem;
Storyboard.SetTarget(alphaAnim, target);
Storyboard.SetTargetProperty(alphaAnim, new PropertyPath(UIElement.OpacityProperty));
storyboard.Children.Add(alphaAnim);
for (int i = App.ViewModel.Todos.IndexOf(todoToDelete) + 1; i < App.ViewModel.Todos.Count; i++)
{
Todo todo = App.ViewModel.Todos[i];
target = TodoList.ItemContainerGenerator.ContainerFromItem(todo) as ListBoxItem;
DoubleAnimation translateAnim = new DoubleAnimation();
translateAnim.From = target.RenderTransformOrigin.Y;
translateAnim.To = target.RenderTransformOrigin.Y - target.ActualHeight;
translateAnim.Duration = new Duration(TimeSpan.FromMilliseconds(500));
translateAnim.BeginTime = TimeSpan.FromMilliseconds(500);
Storyboard.SetTarget(translateAnim, target);
Storyboard.SetTargetProperty(translateAnim, new PropertyPath(TranslateTransform.YProperty));
storyboard.Children.Add(translateAnim);
}
storyboard.Begin();
}
Some things i have noticed while debugging:
The RenderTransformOrigin.Y property is always 0 no matter which ListBoxItem is referenced.
The Height property is NaN though the ActualHeight property is 67
The parent property of the ListBoxItem is null
These two things make me wonder if i am given a reference to a ListBoxItem that is not rendered of the screen? But as the Opacity animation works perfectly and all of my list is visible(only contains 3 items at the moment) i do not see how this could be the case.
I have also tried using a PointAnimation and animating the RenderTransformOrigin property directly but this gave the same result (nothing that is).
Any help is appreciated, thanks!

Please check out this link:
http://blogs.msdn.com/b/jasongin/archive/2011/01/03/wp7-reorderlistbox-improvements-rearrange-animations-and-more.aspx
Someone has created a class that you can easily incorporate into your app. This has animations for adding/removing items from your list.
This should save you a lot of time and frustration.

Related

WPF - add scrollviewer to panel with codebehind

For certain reasons I need to add elements to my form with codebehind.
There is a main panel. By clicking a button - I am adding some content to it as below:
private void AddCodeKlantFieldButtonOnClick(object sender, RoutedEventArgs routedEventArgs)
{
var button = sender as Button;
if (button != null)
{
var panel = (StackPanel)button.Tag;
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal };
AddLabel(stackPanel, "Klant van:", 135);
opzoekenLandVan = new OpzoekenCode(OpzoekenCodeTable.Klant, "");
opzoekenLandTot = new OpzoekenCode(OpzoekenCodeTable.Klant, "");
stackPanel.Children.Add(opzoekenLandVan);
AddLabel(stackPanel, "tot en met:", 100);
stackPanel.Children.Add(opzoekenLandTot);
var count = panel.Children.Count;
panel.Children.Insert(8, stackPanel);
}
}
That works fine! But if I add too much items, there is not enough space on the form - so a scrollviewer would be needed. I am quite new and can not figure out how to handle it. I tried this:
var scrollViewer = new ScrollViewer();
scrollViewer.Content = panel;
scrollViewer.Visibility = Visibility.Visible;
scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
scrollViewer.CanContentScroll = true;
But the scrollbar does not appear. If I try to add it to the form
panel.Children.Add(scrollViewer);
I am getting an error:
An exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll but was not handled in user code
Additional information: Logical tree depth exceeded while traversing the tree. This could indicate a cycle in the tree.
In the code below, you did not add the scrollViewer to the visual tree so it's not displaying
var scrollViewer = new ScrollViewer();
scrollViewer.Content = panel; //this does not add to visualtree
scrollViewer.Visibility = Visibility.Visible;
scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
scrollViewer.CanContentScroll = true;
one of the lines above is
scrollViewer.Content = panel;
so you will get an error on trying to add it to panel's children.
panel.Children.Add(scrollViewer);
You see the circular issue? First line, you put panel inside scrollViewer, next line you put the same scrollViewer in the panel.
Try commenting out scrollViewer.Content = panel but leave panel.Children.Add(scrollViwer) in, this should add the scrollViewer to the visualtree. But it'll probably be invisible due to 0 width or height since it has no content and is in a stackpanel.

Set element opacity different than window

I'd like to know if it's possible to:
I have window (Window1) with listview. Double click on element (Element1) of this listview open little popup window (Window2).
I'd like to set Element1 and Window2 opacity to 1, but Window1 to 0.2
Window2 is open as topmost with ShowDialog().HasValue, like
this.Opacity = 0.2;
selected.opacity = 1;
Window2.opacity = 1;
if(Window2.ShowDialog().HasValue())
this.Opacity = 1;
#EDIT:
main window, called "Window1":
private void Border_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.ClickCount == 2)
{
if (popup != null)
popup.Close();
popup = new PopupWindow(ListView.SelectedItem as SelectedItem, sender as Border, this);
popup.Topmost = true;
((Border)sender).Opacity = 1;
this.Opacity = 0.2;
popup.Opacity = 1;
if (popup.ShowDialog().HasValue)
{
this.Opacity = 1;
}
}
}
Unfortunately, what you are trying to achieve cannot be directly accomplished with WPF because Opacity values are kind of inherited by child controls. From the UIElement.Opacity Property page on MSDN:
Opacity is applied from parent elements on down the element tree to child elements, but the visible effects of the nested opacity settings aren't indicated in the property value of individual child elements. For instance, if a list has a 50% (0.5) opacity and one of its list items has its own opacity set to 20% (0.2), the net visible opacity for that list item will be rendered as if it were 10% (0.1), but the property value of the list item Opacity property would still be 0.2 when queried.
However, it is possible to fake your desired look by making certain elements within the Window semi opaque, while still having Opacity="1.0" for child elements. So, try removing the Opacity setting from the Window and instead set the Background to a see through colour like this:
window.Background = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
Or even simpler:
window.Background = Brushes.Transparent;
Using a combination of transparent colours and low Opacity values on certain UI elements should get you what you want eventually.

Silverlight opacity animation not working programmatically

I'm new at Silverlight and trying samples for things animating the opacity of an object programatically.
I've come up with the following code:
MapShape myTestShape= RadMapInformationLayer.Items[0] as MapShape;
SolidColorBrush brush = new SolidColorBrush();
brush.Color = Colors.Purple;
myTestShape.Fill = brush;
//create a duration object
Duration duration = new Duration(TimeSpan.FromSeconds(5));
//create the storyboard
Storyboard story = new Storyboard();
//create double animation
DoubleAnimation animation = new DoubleAnimation();
//set the duration property
animation.Duration = duration;
//set the from and too values
animation.From = 1.0;
animation.To = 0.0;
//add the duration to the storyboard
story.Duration = duration;
//now set the target of the animation
Storyboard.SetTarget(animation, myTestShape);
//set the target property of this object
Storyboard.SetTargetProperty(animation, new PropertyPath(UIElement.OpacityProperty));
//add the double animations to the story board
story.Children.Add(animation);
if (!LayoutRoot.Resources.Contains("story1"))
LayoutRoot.Resources.Add("story1", story);
story.Begin();
For the property path I've also tried:
1. new PropertyPath("(FrameworkElement.Opacity)")
2. new PropertyPath("(FrameworkElement.Opacity)")
3. new PropertyPath("(Control.Opacity)")
And a few others, I'm having zero luck with this.
Can anyone see where I'm going wrong?
Thanks,
Jacques
I have done databinding to MapShape.FillProperty before.
Try:
//create double animation
ColorAnimation animation = new ColorAnimation();
//set the duration property
animation.Duration = duration;
//set the from and too values
animation.From = Colors.Purple;
animation.To = Colors.Transparent;
//add the duration to the storyboard
story.Duration = duration;
//now set the target of the animation
Storyboard.SetTarget(animation, rect);
//set the target property of this object
Storyboard.SetTargetProperty(animation, new PropertyPath("(MapShape.Fill).Color"));
EDIT:
As for why your code is not working -- Looking through MapShape.SetShapeFillStroke(), it appears that Telerik won't bind the MapShape's Opacity to its inner primitive shape's Opacity unless you provide a fill. Do you have a Fill defined in XAML? If not, try providing one. Otherwise, maybe the code is defined too early in the Shape's lifecycle (in or after ReadCompleted)?
<telerik:InformationLayer x:Name="StateLayer">
<telerik:InformationLayer.Reader>
...
</telerik:InformationLayer.Reader>
<telerik:InformationLayer.ShapeFill>
<telerik:MapShapeFill Fill="{StaticResource CommonBackgroundLightBrush}" Stroke="#5A636B" StrokeThickness="1" />
</telerik:InformationLayer.ShapeFill>

Silverlight programmatically binding from C# code

I have a Canvas and a custom control called BasicShape
After I add two BasicShape controls on the Canvas, I want programatically to connect them with a Line and I want to do this using the Binding class.
I want to connect the Bottom side of first shape with the Top side of the second one.
Initially i tried to connect only the X1 property of the Line with the Canvas.Left attached property of the fisrt BasicShape but this doesn't work. Line X1 property is not updated when I change the Canvas.SetLeft(basicShape1) value
BasicShape bs1 = canvas.Children[0] as BasicShape;
BasicShape bs2 = canvas.Children[1] as BasicShape;
Line line = new Line();
line.StrokeThickness = 1;
line.Stroke = new SolidColorBrush(Colors.Red);
line.X1 = 100;
line.Y1 = 100;
line.X2 = 200;
line.Y2 = 200;
canvas.Children.Add(line);
Binding b = new Binding("AnyName");
b.Source = bs1;
b.Path = new PropertyPath(Canvas.LeftProperty);
line.SetBinding(Line.X1Property, b);
I'm trying to create a simple UML diagram like this one
alt text http://www.invariant-corp.com/omechron/images/uml_diagram.gif
I just did it other way, without binding
This will be a permanent link
http://calciusorin.com/SilverlightDiagrams/
I decided to manually update all lines on shape Location or Size changed
private void basicShape_BasicShapeLocationSizeChangedEvent(BasicShape sender)
{
foreach (CustomLine customLine in lines)
{
if (customLine.StartFromShape(sender))
{
Point point = sender.GetLinePoint(customLine.GetStartSide());
customLine.SetStartPoint(point);
}
if (customLine.EndInShape(sender))
{
Point point = sender.GetLinePoint(customLine.GetEndSide());
customLine.SetEndPoint(point);
}
}
}
I am sure that the Binding solution is more elegant. Anyone interested in my solution, with SL Controls that can be resized, connected with lines, just contact me.

How to force ActualWidth and ActualHeight to update (silverlight)

I a grid on my silverlight control, I am programatically adding a canvas, and in the canvas I am loading and displaying Image.
I'm also adding a rotation to the canvas. The problem is that by default the CenterX and CenterY of the rotation is the top left of the canvas. What I want is the rotation to happen around the centre of the canvas.
To do this, I've tried setting the CenterX and CenterY of the Rotation to the Images ActualWidth / 2 and ActualHeight / 2, however I've discovered that ActualWidth and ActualHeight are not always populated, at least not right away. How can I force them to get updated?
Even using the DownloadProgress event on the image doesn't seem to guarantee the ActualWidth and ActualHeight are populated, and neither does using this.Dispatcher.BeginInvoke()...
Image imgTest = new Image();
Canvas cnvTest = new Canvas();
Uri uriImage = new Uri("myurl", UriKind.RelativeOrAbsolute);
System.Windows.Media.Imaging.BitmapImage bmpDisplay = new System.Windows.Media.Imaging.BitmapImage(uriImage);
bmpDisplay.DownloadProgress += new EventHandler<System.Windows.Media.Imaging.DownloadProgressEventArgs>(this.GetActualDimensionsAfterDownload);
imgTest.Source = bmpDisplay;
imgTest.Stretch = Stretch.Uniform;
imgTest.HorizontalAlignment = HorizontalAlignment.Center;
imgTest.VerticalAlignment = VerticalAlignment.Center;
cnvTest.Children.Add(imgTest);
this.grdLayout.Children.Add(imgTest);
this.Dispatcher.BeginInvoke(new Action(GetActualDimensions));
To update the ActualWidth and ActualHeight of a FrameworkElement you will have to call UpdateLayout.
Unfortunately, calling updateLayout doesn't always work either depending on your situation.
I've had better luck doing something like:
whateverUIElement.Dispatcher.BeginInvoke(()
{
//code that needs width/height here
}
);
but even that fails too often.
Most reliable method I found is to use DependencyPropertyDescriptor AddValueChanged listeners of ActualWidth and ActualHeight instead of OnLayoutUpdated to get element sizes after rendering
DependencyPropertyDescriptor descriptor = DependencyPropertyDescriptor.FromProperty(ActualWidthProperty, typeof(StackPanel));
if (descriptor != null)
{
descriptor.AddValueChanged(uiPanelRoot, DrawPipelines_LayoutUpdated);
}
descriptor = DependencyPropertyDescriptor.FromProperty(ActualHeightProperty, typeof(StackPanel));
if (descriptor != null)
{
descriptor.AddValueChanged(uiPanelRoot, DrawPipelines_LayoutUpdated);
}
void DrawPipelines_LayoutUpdated(object sender, EventArgs e)
{
// Point point1 = elementInstrumentSampleVial.TranslatePoint(
// new Point(11.0, 15.0), uiGridMainInner);
}
Instead of using StackPanel, Grid etc. use base element that you are depending on for relative sizes

Resources