Why composition animation(example in UWP docs) is not working? - c#

The simple animation example show in the Windows UWP docs under the section of Visual Layer and sub-section of Time animation is not working...
Above is the code example shown in the docs.
Above is the code of XAML rectangle that I am animating.
Above is the code I have written, similar to the code in first image.
Now this is the error I am getting every time I run the app in debug mode. The property was not found. But that is what is written in docs, then how could it be. One more thing I have tried setting the property to renderTransform as well but that doesn't work either.
What am I doing wrong?

Adding another answer because the one here isn't entirely correct - whilst the example IS wrong, there is in fact a Translation property on Composition Visuals that come from XAML objects - that is also most likely preferable to using offset if your animating a visual of a XAML object.
Firstly, you need to enable the translation property on the element like so:
ElementCompositionPreview.SetIsTranslationEnabled(uiElement, true)
Secondly, you then need to change the animation property to actually target the correct property:
visual.StartAnimation("Translation.X", animation);
This only works if you're targeting the creators update or above.
Using Translation over Offset entirely avoids issues where XAML layout updates break the animation - as XAML position updates will overwrite a Visual's Offset and stop any current animation, whereas Translation animations will continue to run unabated of what the XAML layout engine does.

I believe that the example is wrong. The Visual object have no properties like as "Translation". To move it from left to right,
visual.StartAnimation("Offset.X", animation);
or
visual.StartAnimation(nameof(visual.Offset) + "." + nameof(visual.Offset.X), animation);
I have very simple example code of animate the object with UI.Composition on GitHub. The comments are all Japanese, but it may help you, I hope so.
CompositionGridView

Related

How to get back Visual Studio's old way of alerting of suggestions by darkening code instead of by 3 dots?

Visual Studio used to alert us of unused variables by darkening them. Now (version 16.10.2) it fills the code with three dots everywhere, which look a little like code and are more confusing.
Is there a way to get the old way back?
There is a color control for the ellipses called "Suggestion Ellipses...". You could set the foreground color of it to the same color as your editors background to get a sense that its turned off. You'll still see it when you select the item though like so:
Version 16.10.3 now
It looks like they changed it back.
So if you still have it - update VS.

Adding custom glyph of a break point in Visual Studio

I want to create a custom breakpoint type that will break for a duration then continue. I can mark a breakpoint as this new custom type with a command in its context. Is it possible to change the red glyph of the breakpoint to one that is blue or maybe even a different shape? I cant find any literature about it anywhere. I think I could make a custom text view port adornment for a separated breakpoint marking column but things would be less complicated if I could just change the glyph. I am working with wpf. Thanks in advance.
Turns out that this is possible with the IGlyphFactory.
Read this to see how its done.
https://learn.microsoft.com/en-us/visualstudio/extensibility/creating-an-extension-with-an-editor-item-template?view=vs-2019

SciChart AxesPanelTemplate with dynamic grid

my task is to draw a flexible number of digital signal realtime-data in SciChart.
Due to the nature of this signals they are between 0..1. I want to have them stacked as in the SciChart example found at https://www.scichart.com/example/wpf-chart-example-vertically-stacked-yaxis/.
But with a dynamic grid template inside the YAxesPanelTemplate. What ever I try, there are no YAxes drawn.
I'm using a GridExtension which is very close to the one found here:
https://rachel53461.wordpress.com/2011/09/17/wpf-grids-rowcolumn-count-properties/
refernced from this answer
https://rachel53461.wordpress.com/2011/09/17/wpf-grids-rowcolumn-count-properties/
Any help is highly appreciated
Cheers
Martin
my solution might not be ideal, but it is almost working for me.
Since I’m developing the code for a customer, I’m not allowed to post code by NDA, but I can give my theoretical approach.
specify the number of YAxes in VM
use this to build the grid inside ItemPanelTemplate and bind with DynamicResource (see example in link below)
to do so, use class from this blog and adopt as needed. I build
a specialized class for my use-case
bind to the SizeChangedEvent of RenderSurface Iterate the axes from
YAxes,calculate height per axis and set it.
inside the same loop don’t forget to set the row by using
Grid.SetRow(axis, rowIndex)
This approach is from my point of view not the most performing, but the only I was able to discover from the SciChart docs.
The last task which I’m facing, is to get the height of the chart portion of the RenderSurface, as the height given in SizeChanged is of the full height including YAxis and other stuff drawn.
Maybe someone from SciChart (#Dr. ABT - just maybe) can help out on this last task?
Hope this helps someone else too.
Cheers
Martin

Saving controls location and loading it back

I have a panel (with autoscrolling) that contains randomly placed UserControls, I want to save the locations of these controls and load them back at a later time so they are placed exactly where they were before.
What's the proper way to do this in .NET? At the moment this is what I'm saving to the database as X,Y:
X: Math.Abs(panel.AutoScrollPosition.X) + control.Location.X;
Y: Math.Abs(panel.AutoScrollPosition.Y) + control.Location.Y;
And when I load the control I do:
control.Location = new System.Drawing.Point(X, Y);
But I think I'm missing something, because of the way the AutoScroll behaves in .NET. Sometimes I find the controls misplaced (unlike their old position) after loading.
Been boggling my mind for a while now, I really hope I'd find some information here.
Not sure on all the configuration you are using, but make sure the incremental steps for the scroll bars are whole numbers. Next make sure that the controls are getting added back to the panel control tree instead of the parent form and set the location.
You could use a app.config file to save those settings, so when you need them back you just make a call to the settings for the key inside app.config.
I think there is not a proper way, whatever you feel better it works, but if you are going to have dynamically created controls you could have a database as you have now. But, if there are going to be just a few of them, a app.config file will work better.
I presume you want to restore the controls to their current visual position after scrolling and that is why you take account of the auto-scroll? When you say the controls are misplaced, have they moved relative to each other, or are the whole lot 'scrolled' to the wrong position?
Are you sure about the Math.Abs? This seems somewhat odd; I would try with just adding Location.X and AutoScrollPosition.X (or use -AutoScrollPosition.X)
I would also check on restore that the AutoScrollPosition is currently 0.

Animate a sprite by using two images

I would have thought this was a common desire, but I'll be damned if I can find this.
I simply want to Animate an image by swapping two images back and forth. I tried StoryBoard, but apparently you can't change the source in a storyboard. The only answer I can come up with is a Timer, which I don't think is the best way.
Edit: How do I animate image content in WPF? Came up in the "Similiar Questions" window. And while this will do what I want, it is "hackish" as the OP of it says, and it only swaps two images, what if I wanted a whole sequence of 10 or 20 or 100.
I found another post here on SO whose answer sounds like it could solve your problem: Change an image during animation using storyboard
The problem with this approach is that it also doesn't satify your request for supporting an arbitrary number of images.
I was going to propose a different method that involves databinding the Image Source to the image path, and then in code behind simply changing the path, but I haven't gotten it to work yet.
Here's an article that seems to have an elegant way to handle your requirements: http://www.codeproject.com/Articles/364529/Animation-using-Storyboards-in-WPF
Hopefully that will work for you.

Categories