Windows.UI.Composition seems to have adopted the same laissez-faire attitude to documenting how it works as the rest of UWP. The MSDN documentation is merely a regurgitation of the APIs with an occasional remark throw in and not much else. The overview documentation is very shallow and doesn't address the core fundamentals of how composition works.

It's in stark contrast to Apple's documentation on Core Animation. The Core Animation Programming Guide provides an excellent walk through of the concepts underlying the API, how it integrates with the higher level user-interface APIs and how a developer works utilises Core Animation.

Please review Apple's documentation and produce something similar. A couple of MSDN articles and some non-real world sample projects aren't acceptable.

Running the TransformComponents sample crashes on startup:
"System.MissingMethodException: Method not found: 'System.Object Windows.UI.Xaml.Hosting.ElementCompositionPreview.GetContainerVisual(Windows.UI.Xaml.UIElement)'.\r\n at TransformComponents.MainPage.MainPage_Loaded(Object sender, RoutedEventArgs e)"

Running from VS2015 update 1
Win10 64-bit 1511 (10586.164)

Any suggestions?

The title says it all: it'd probably be better if people would use SO to ask random questions than github.

Whenever we focused TextBox to start writing the Foreground color changes from the one we defined to black. We found no way to change it even when editing it's XAML definition.

in build 2016, Creating Beautiful UX in a Real-World App with Visuals, Animations and Effects James & Tim showed us how to make a connectedaimation

But i cant find the ConnectedAnimationService class under Windows.UI.Xaml.Media.Animation, any idea where it is located?

i have installed SDK 14295 with VS2015 update2

I was able to run the samples yesterday but today after installing the new Windows 10 build 10586.104 whatever projects that use Microsoft.UI.Composition.Toolkit to load images are not able to display any images at all.

What I've noticed is the following piece of code will always return a Size of (0,0) for any UIElement.

var visual = ElementCompositionPreview.GetElementVisual(MyUIElement);
Debug.WriteLine($"Visual's size: {visual.Size}");

Output

Visual's size: <0, 0>

Is this by design? I wonder what if I want to animate the Size of the element using Composition Animations?

I have a GridView that contains a UserControl in its ItemsTemplate. These UserControls each show a simple picture in the 10240 build, but for the later builds, I'm using UI.Composition to do some fancier stuff. So far, I have it set to randomly change the image and cross-fade as it does so.

I have the Loaded event of the UserControl grabbing the Visual of a placeholder XAML element (Grid) in the UserControl. I then create a ContainerVisual and set it as the child of that element visual. Next, I create two SpriteVisuals and place them into the ContainerVisual so that they overlap.

XAML Element's Visual -> ContainerVisual -> {SpriteVisual1, SpriteVisual2}

I then pull a image reference at random from my database, fetch the StorageFile for that image, create a CompositionImage using the toolkit's CompositionImageFactory. SpriteVisual1 gets a static image brush. After a DispatcherTimer tick event, the SpriteVisual2 will get an Effect (ArithmeticCompositeEffect) that has the Source1Amount and Source2Amount properties animated using two ScalarKeyFrameAnimations. I stick a new random CompositionImage into the second place on the Effect and get my CrossFade Effect.

Before the next animation starts, I set the backing SpriteVisual1 to the updated image so that the flickering of SpriteVisual2 (when the new brush effect is set) can't be seen.

This works PERFECTLY! I recently put a video on Twitter of it. I can resize my window and my GridView's custom panel will rearrange the items and resize them to fit the window. The UI.Composition animation is rock solid.

However, it falls to pieces when I actually add or remove an item from the existing set. When the page is first loaded, I am actually adding items one by one to an ICollectionView. These aren't actually drawn on screen at this stage. Once, they are on-screen, if I add or remove one of the items, it crashes and I can't catch an exception on the managed side. If I comment out all of the UI.Composition code, it works perfectly. It seems to die when the code I'm running in the UI thread pauses to do some async work. It usually dies when I am pulling the list of available images from my SQLite database (using an async connection). It's not the database's problem though.

I can't make much sense out of the native code call stack, but this is it for the last thread.

combase.dll!RoFailFastWithErrorContextInternal2(HRESULT hrError, unsigned long cStowedExceptions, _STOWED_EXCEPTION_INFORMATION_V2 * * aStowedExceptionPointers) Line 1034  C++

combase.dll!RoFailFastWithErrorContextInternal(HRESULT hrError, unsigned long cStowedExceptions, STOWED_EXCEPTION_INFORMATION_V1 * * aStowedExceptionPointers) Line 947 C++
Windows.UI.Xaml.dll!DCompVisual::InsertChild(DCompHelpers::IDCompVisual * pChild, DCompHelpers::IDCompVisual * pPreviousSibling) Line 251 C++
Windows.UI.Xaml.dll!HWCompTreeNode::InsertVisual(DCompHelpers::IDCompVisual * pNewDCompVisual, DCompHelpers::IDCompVisual * pParentVisual, DCompHelpers::IDCompVisual * pChildVisual) Line 1103 C++
Windows.UI.Xaml.dll!HWCompTreeNode::EnsureHandOffVisualInserted() Line 966 C++
Windows.UI.Xaml.dll!HWCompTreeNode::PushPropertiesImpl(DCompTreeHost * pDCompTreeHost, bool useDCompAnimations, bool disablePixelSnapping) Line 3086 C++
Windows.UI.Xaml.dll!HWCompTreeNode::UpdateTreeVirtual(DCompTreeHost * pDCompTreeHost, unsigned int * pFullScreenNodeCount, bool useDCompAnimations, bool disablePixelSnapping) Line 2037 C++
Windows.UI.Xaml.dll!HWCompTreeNode::UpdateTreeVirtual(DCompTreeHost * pDCompTreeHost, unsigned int * pFullScreenNodeCount, bool useDCompAnimations, bool disablePixelSnapping) Line 2047 C++
Windows.UI.Xaml.dll!HWCompTreeNode::UpdateTreeVirtual(DCompTreeHost * pDCompTreeHost, unsigned int * pFullScreenNodeCount, bool useDCompAnimations, bool disablePixelSnapping) Line 2047 C++
Windows.UI.Xaml.dll!HWCompTreeNode::UpdateTreeVirtual(DCompTreeHost * pDCompTreeHost, unsigned int * pFullScreenNodeCount, bool useDCompAnimations, bool disablePixelSnapping) Line 2047 C++
Windows.UI.Xaml.dll!HWCompTreeNode::UpdateTreeVirtual(DCompTreeHost * pDCompTreeHost, unsigned int * pFullScreenNodeCount, bool useDCompAnimations, bool disablePixelSnapping) Line 2047 C++
Windows.UI.Xaml.dll!HWCompNode::UpdateTree(DCompTreeHost * pDCompTreeHost, unsigned int * pFullScreenNodeCount, bool useDCompAnimations, bool disablePixelSnapping) Line 666 C++
Windows.UI.Xaml.dll!HWCompTreeNode::UpdateTreeRoot(DCompTreeHost * pDCompTreeHost, bool useDCompAnimations) Line 2001 C++
Windows.UI.Xaml.dll!CHardwareCompositor::SubmitCompositionTree(HWCompTreeNode * pTreeRoot, bool useDCompAnimations) Line 1081 C++
Windows.UI.Xaml.dll!CCoreServices::SubmitRenderCommandsToCompositor(CHardwareCompositor * pHardwareCompositor, ICoreRenderTarget * pIRenderTarget, HWCompTreeNode * pRootCompNode, IPALClock * pTimeManager, float directManipulationViewports, CTimeManager * pMapUIElementToCompositorContent, CTimeManager * useDCompAnimations, const xvector<CCompositorDirectManipulationViewport *> & ppOldTimeManagerClone, xchainedmap<CUIElement *,IObject *> *) Line 7824 C++
Windows.UI.Xaml.dll!CCoreServices::SubmitPrimitiveCompositionCommands(ICoreRenderTarget * pIRenderTarget, CUIElement * pVisualRoot, IPALClock * pClock, float rFrameStartTime, XRECT_WH * pDirtyRect, const xvector<CCompositorDirectManipulationViewport *> & directManipulationViewports, bool useDCompAnimations) Line 7532 C++
Windows.UI.Xaml.dll!CCoreServices::NWDrawTree(HWWalk * pHWWalk, ICoreRenderTarget * pIRenderTarget, VisualTree * pVisualTree, unsigned int forceRedraw, XRECT_WH * prcDirtyRect) Line 7229 C++
Windows.UI.Xaml.dll!CCoreServices::NWDrawMainTree(ICoreRenderTarget * pIRenderTarget, bool fForceRedraw, XRECT_WH * prcDirtyRect) Line 6723 C++
Windows.UI.Xaml.dll!CWindowRenderTarget::Draw(CCoreServices * pCore, unsigned int fForceRedraw, XRECT_WH * prcDirtyRect) Line 130 C++
Windows.UI.Xaml.dll!CXcpBrowserHost::OnTick() Line 525 C++
Windows.UI.Xaml.dll!CXcpDispatcher::Tick() Line 1409 C++
Windows.UI.Xaml.dll!CXcpDispatcher::OnReentrancyProtectedWindowMessage(HWND_ * msg, unsigned int lParam, unsigned int) Line 1011 C++
Windows.UI.Xaml.dll!CXcpDispatcher::WindowProc(HWND__ * hwnd, unsigned int msg, unsigned int wParam, long lParam) Line 805 C++
user32.dll!__InternalCallWinProc@20�() Unknown
user32.dll!UserCallWinProcCheckWow() Unknown
user32.dll!DispatchMessageWorker() Unknown
user32.dll!_DispatchMessageW@4�() Unknown
Windows.UI.dll!Windows::UI::Core::CDispatcher::ProcessMessage(int bDrainQueue, int * pbAnyMessages) Line 235 C++
Windows.UI.dll!Windows::UI::Core::CDispatcher::WaitAndProcessMessages(void * hEventWait) Line 436 C++
Windows.UI.dll!Windows::UI::Core::CDispatcher::ProcessEvents(Windows::UI::Core::CoreProcessEventsOption options) Line 541 C++
Windows.UI.Xaml.dll!CJupiterWindow::RunCoreWindowMessageLoop() Line 1118 C++
Windows.UI.Xaml.dll!CJupiterControl::RunMessageLoop() Line 796 C++
Windows.UI.Xaml.dll!DirectUI::DXamlCore::RunMessageLoop() Line 2767 C++
Windows.UI.Xaml.dll!DirectUI::FrameworkView::Run() Line 103 C++
twinapi.appcore.dll!Windows::ApplicationModel::Core::CoreApplicationView::Run(void) Unknown
twinapi.appcore.dll!Microsoft::WRL::Details::Make<struct Microsoft::WRL::Details::InvokeHelper<struct Windows::Foundation::IAsyncActionCompletedHandler,class <lambda_e4b1934750ab38adfb74f12296e81f29>,2>,class <lambda_e4b1934750ab38adfb74f12296e81f29> &>(class <lambda_e4b1934750ab38adfb74f12296e81f29> &) Unknown
SHCore.dll!CallerIdentity::GetCallingProcessHandle(unsigned long,enum RUNTIMEBROKER_CALLERIDENTITY_CHECK,void * *) Unknown
kernel32.dll!@BaseThreadInitThunk@12�() Unknown
ntdll.dll!__RtlUserThreadStart() Unknown
ntdll.dll!__RtlUserThreadStart@8�() Unknown

The project "Microsoft.UI.Composition.Toolkit" in WindowsUIDevLabs-master\Demos\Reference Demos currently does not include all referenced files. Therefore I cannot build all demos that rely on this project.

Thanks for the good work,
Robert

When I try to run the SampleGallery project, it gives me the following error:

Cannot resolve 'GenXbf.dll' under path 'C:\Program Files (x86)\Windows Kits\10'. Please install the Windows Software Development Kit. The Windows 8.2 SDK is installed with Visual Studio.

Looks like it's trying to locate the Windows 8.2 SDK from the path above, but the actual path to the Windows 8.2 folder on my machine is:

C:\Program Files (x86)\MSBuild\Microsoft\WindowsXaml\v14.0

I do have the latest SDK (14295) with Visual Studio 2015 Update 2.

Any idea what went wrong? Thanks.

If you change all the _mainVisual references to _root under ScaleToggle_Click (file), the clip no longer works.

I just found that this might have something to do with this issue I raised. If I specifically set the Size of the _root, it works again.

private void InsetClipToggle_Click(object sender, RoutedEventArgs e)
{
    // To fix the clipping, we need to size the Visual
    _root.Size = new Vector2((float)TopGrid.ActualWidth, (float)TopGrid.ActualHeight);

    // Toggle visual between having no clip and a clip that squares the visual
    if (_root.Clip == null)
    {
        InsetClip iClip = _compositor.CreateInsetClip();
        iClip.LeftInset = (RectangleWidth - RectangleHeight) / 2;
        iClip.RightInset = iClip.LeftInset;
        _root.Clip = iClip;
    }
    else
    {
        _root.Clip = null;
    }
}

Is it possible for a desktop layered window application to use the new Windows.UI.Composition technology?

We would like to transform a XAML view to a .png or .jpg file.

The issue that we are facing is that, using RenderTargetBitmap we are limited of a max size of 4096px x 4096px, when we need to export a ScrollView of size 10000px x 6000px, like reported here.

How can we acomplish this?

I am trying to understand how to slowly scroll a Xaml GridView but I don't really understand from the samples how to do that. Should I use a keyframe animation or a something else? The interaction that I want is that when the user isn't touching the GridView it scrolls slowly to the left but as soon as the user touches it, scrolling stops. I get an ArgumentException at the last line. what am I doing wrong?

void StartAnimatingPictures()
{
        var scrollViewer = GetScrollViewer(this.Pictures);

        if (scrollViewer == null)
        {
            return;
        }

        _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

        _scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);

        var animation = _compositor.CreateScalarKeyFrameAnimation();

        animation.InsertExpressionKeyFrame(0.0f, "ScrollManipulation.Translation.X");
        animation.InsertKeyFrame(1.0f, -1000.0f);

        _scrollProperties.StartAnimation("ScrollManipulation", animation);
}

Hello,

I created an app based on the Slideshow UWP app. I was using the CompositionImage that was built-in directly in the DLL.
Now, I converted the application with the "new" CompositionImage in the Toolkit.

The big difference between the two version is if you reload the page of the application, in the previous version, for the second time, the image load very quickly (as if the images still in a cache). Now, the second load of the page takes the exact same time for the image to load as the first time (it downloads again the images).

Is there a difference when downloading the images? The previous version was very useful and the user experience increase a lot if the images are somehow "cache" along the way.

Thanks, Adrien.

I am updating my uwp app to use the visual layer in select places. The target platform min Version is 10240, so I need to conditionalize the use of the visual layer. Please add an example of how to do this to one of your samples or user documentation. Here is what I am currently doing to accomplish this:

if ( Windows.Foundation.Metadata.ApiInformation.IsMethodPresent("Windows.UI.Xaml.Hosting.ElementCompositionPreview", "GetElementVisual") )
{}

The ParallaxMusic sample won't run and shows an "Authentication Failed" message because the RemoteDataSource is missing valid CLIENT_ID and CLIENT_SECRET values. Please update the sample to not have these dependencies.

Method not found: 'System.Object Windows.UI.Xaml.Hosting.ElementCompositionPreview.GetContainerVisual(Windows.UI.Xaml.UIElement)'.

System.MissingMethodException: Method not found: 'System.Object Windows.UI.Xaml.Hosting.ElementCompositionPreview.GetContainerVisual(Windows.UI.Xaml.UIElement)'.
at TransformComponents.MainPage.MainPage_Loaded(Object sender, RoutedEventArgs e)

I have a Grid control that has content in it and I would simply like to rotate the Grid, say 30 degrees along the Y-axis, when it's Loaded. I did the following but it doesn't work, produces an error:

var uiElement = sender as UIElement;

// Initialize the Compositor
_root = ElementCompositionPreview.GetElementVisual(uiElement);
_compositor = _root.Compositor;

ExpressionAnimation expression = _compositor.CreateExpressionAnimation("Matrix4x4.CreateRotationY(angle)");
expression.SetScalarParameter("angle", 30.0f);
_root.StartAnimation("TransformMatrix", expression);

How do I go about doing the perspective rotation?

I've spent most of this morning getting the sample projects downloaded from github to build cleanly & run. None of the build cleanly without intervention.

As a rule of thumb samples should not be dependent on unrelated dependencies or require developers to sign up for access to services in order to get a sample to build & run succesfully.

In the case of the composition visual sample I had to hand edit the raw xml of the .csproj in order to get it to build.

I am experimenting with just the following control, to create a Card flipping effect.

<Grid Width="236" Height="360">
    <Border x:Name="Back" Padding="0" BorderBrush="DarkGray" BorderThickness="2" CornerRadius="20" Background="Orange" 
            VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    </Border>
    <Border x:Name="Front" Padding="0" BorderBrush="DarkGray" BorderThickness="2" CornerRadius="20" Background="Red" 
            VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    </Border>
</Grid>

And I set the composition like the following:

private void InvalidateComposition()
{
float halfwidth = (float)(Width / 2.0);

        FrontVisual = CompositionManager.GetContainerVisual(Front);
        FrontVisual.RotationAxis = new Vector3(0, 1, 0);
        FrontVisual.CenterPoint = new Vector3(halfwidth, 0f, 0f);
        FrontVisual.BackfaceVisibility = CompositionBackfaceVisibility.Hidden;

        BackVisual = CompositionManager.GetContainerVisual(Back);
        BackVisual.RotationAxis = new Vector3(0, 1, 0);
        BackVisual.CenterPoint = new Vector3(halfwidth, 0f, 0f);
        BackVisual.BackfaceVisibility = CompositionBackfaceVisibility.Hidden;

...
}
Doing that if I take a look to the Live Visual Tree, the front border is positioned top 360 px of the back border not over ("z-order"), might be I am doing something wrong.
This makes that if I add more instances they are overlapped one over another so I cannot make the use of tap events, etc.

There doesn't seem to be a way to list the current properties and their types in a CompositionPropertySet. Please consider adding a Keys collection or something similar since it's difficult to know what properties you get from external sources like scrollviews

CompositionRefreshProblem.zip
Hi everyone,

I try to rotate the icon of an AppBarButton for a refresh scenario. For the first couple of runs this works fine but then the animation starts to stutter.

Here's the code I am using:
`public sealed partial class MainPage : Page
{

    Visual _refreshVisual;
    private bool _isAnimationStarted;

    public MainPage()
    {
        this.InitializeComponent();
    }



    private async void startRefresh(object sender, RoutedEventArgs e)
    {
        if (_isAnimationStarted)
        {
            Debug.WriteLine("ignoring refresh request");
            return;
        }
        _isAnimationStarted = true;
        var visual = _refreshVisual;
        if (visual == null)
        {
            visual = initRefreshVisual();
        }
        // start animation:
        var compositor = visual.Compositor;
        LinearEasingFunction linear = compositor.CreateLinearEasingFunction();
        var animation = compositor.CreateScalarKeyFrameAnimation();
        animation.InsertKeyFrame(0.0f, visual.RotationAngleInDegrees);
        animation.InsertKeyFrame(1.0f, visual.RotationAngleInDegrees + 360f, linear);
        animation.Duration = TimeSpan.FromMilliseconds(2000);
        animation.IterationBehavior = AnimationIterationBehavior.Forever;
        visual.StartAnimation("RotationAngleInDegrees", animation);

        await Task.Delay(1000);

        visual.StopAnimation("RotationAngleInDegrees");
        _isAnimationStarted = false;

    }

    private Visual initRefreshVisual()
    {
        var icon = refreshAppBarButton.Icon;
        Visual visual = ElementCompositionPreview.GetElementVisual(icon);
        visual.Size = new System.Numerics.Vector2((float)icon.ActualWidth, (float)icon.ActualHeight);
        visual.CenterPoint = new System.Numerics.Vector3(visual.Size.X / 2f, visual.Size.Y / 2f, 0f);
        _refreshVisual = visual;
        return visual;
    }
}`

I have also attached a reproduction project. To reproduce the problem, start the app and then hit the refresh button and wait for the animation to stop. Repeat around 4 times to see the animation jittering and stuttering.

On a related note: calling visual.StopAnimation() seems to jump back a bit.

Is there something that I am doing wrong here or did I find a bug? I am on Windows 10586, by the way.

Thanks in advance,
Robert
CompositionRefreshProblem.zip

Resizing a dark themed UWP application results in "jank" as the root frame cannot resize quickly enough to cover the window's white background. This is present on all dark-themed apps including Microsoft's (try Photos or Groove Music). UWP APIs don't provide access to the window fill colour and unlike WinForms there's no cunning work-around.

I was hoping that I'd be able to use the Composition APIs to work around this but it doesn't appear that this is possible as one cannot access the root visual that should in theory be underlying all the content. Even if one could, since the Visual class doesn't have a background fill property, I'd still have to create a SpriteVisual to fill the window and then resize it when the window changed size.

Is this a correct description of the situation?

Suppose we have a Canvas and inside it has elements as usual. I can easily place the canvas inside a Viewbox and I have it scaled right according with the Window Size.

From the Composition pov, is there a way to make scaling of a control, might be only hardcoded, and the performance will be times better than using a ViewBox?

I've got an ExpressionAnimation running on an CompositionEffectBrush that changes the hue of a visual. The expression is using the ScrollerViewManipulation property, Translation.Y. I've also created a scalar property to hold the ScrollViewer's ScrollableHeight, so I can get a normalized scroll position.

I'm handling the Window.Current.SizeChanged event and trying to update the parameters of my ExpressionAnimation since the ScrollViewer's ScrollableHeight has changed. However, I can't seem to change it. I've tried to stop the animation, change the parameter, then restart it, but nothing seemed to change. Then I just tried to stop the animation when the window changes size like this:

_effectBrush.Properties.StopAnimation("HueRotationEffect.Angle");

and nothing happens. The animation continues to play.

edit
I've just tried to stop any of my animations, including the parallax animation that was demoed by one of your team, and I can't get it to stop once started.

_visual.StopAnimation("Offset.Y");

again, this has no effect.

Hi,

I'm using an expression that crashes Windows on PCs without dedicated graphic cards. The bug occurs on build 10586, I haven't tested on the latest Windows Preview.

Here is the expression animation:
( (ScrollManipulation.Translation.X > -100) ? 0 : (Lerp(0, -100, Clamp(-ScrollManipulation.Translation.X / MaxScroll, 0,1))) )"

To fix it, I had to use a more verbose version:

( (ScrollManipulation.Translation.X > -100) ? (0): Lerp(0,-100, ( ((-ScrollManipulation.Translation.X / MaxScroll)<0)?0: ((-ScrollManipulation.Translation.X / MaxScroll)>1)?1: (-ScrollManipulation.Translation.X / MaxScroll) ) ) )"

Is the ternary operator compatible with imbricated functions? Is it a known issue?
I know about the issue #19 but I didn't manage to fix it just by adding parenthesis.

Hello there,
I have a question about property sets. Currently, getting things out of a property set involves calling one of the TryGet* Methods that takes an out parameter. Is the reason for not having a single overload or throwing is because of compatibility with the other Uwp languages?

I made a small extension method for getting values directly since i cant use out parameters in a c# expression, but it would be nicer to be able to create your own subclasses of CompositionPropertySet with strongly typed properties. So my main question is, is there anything special going on with CompositionPropertySet(or CompositionObject) that has to be done in order to make a property animatable? Like registration similar to dependency properties or something like that. Or is it just a regular property? I tried to do some reflecting but i cant see past the winmd files :/ I assume its possible somehow since i suppose that is what the Insert* methods are doing.

I know this was mentioned in the BUILD 2015 but just wonder if there's a timeline for it? I am asking because if it's coming soon then I will wait for it otherwise I will have to find an alternative.

Thanks guys!

Sometimes when I define a KeyFrameAnimation, I don't just want to play it from beginning to end but to scrub it through based on external input.

I am really just looking for something similar to the Seek function of the Storyboard. Also, Web Animations API has currentTime to do the same thing.

A common scenario would be:

• Define an animation.
• Begin and immediately Suspend the animation when a finger is down.
• Call animation.Seek based on how far the finger has moved from point A to point B.
• Once the finger lifts up, call animation.Resume to finish off the animation smoothly.

Maybe this method should be living inside CompositionScopedBatch which would allow scrubbing a collection of animations?

I cannot seem to get the same implicit animations to work on a GridView, which was demonstrated in quite a few Build talks. The build number of my Windows 10 is 14295.

The code is rather simple:

private void GridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    var visual = ElementCompositionPreview.GetElementVisual(args.ItemContainer);

    var implicitAnimations = visual.Compositor.CreateImplicitAnimationMap();
    // CreateAnimationGroup simply returns an object of AnimationGroup
    implicitAnimations["Offset"] = CreateAnimationGroup();

    visual.ImplicitAnimations = implicitAnimations;
}

My understanding is, the animation needs to be triggered by the change of the Offset value of a GridViewItem, so the GridView control itself must have some built-in logic to update the Offset values of all its children. Maybe this feature is not supported in build 14295 yet?

I couldn't get the actual sample to compile -
1>C:\Users...\composition-master\SDK10586_NOV_UPDATE_RTM\CompositionVisual\compositionvisual\compositionvisual.csproj(128,5): error : This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is ..\packages\Microsoft.Diagnostics.Tracing.EventSource.Redist.1.1.16-beta\build\portable-net45+win8+wpa81\Microsoft.Diagnostics.Tracing.EventSource.Redist.targets.

• but I did get CompositionImageSample to work, then commented out its code and used the CompositionVisual code and got it to work.

That aside...

dragging with a mouse the rectangles is quite slow. It doesn't move with the mouse seamlessly. This a known issue?

Hi

I am having trouble with a basic animation to elements on a usercontrol. Here is my animation code:

            visual = ElementCompositionPreview.GetElementVisual(gImage);
            Compositor compositor = visual.Compositor;

            var animation = compositor.CreateVector3KeyFrameAnimation();

            animation.InsertKeyFrame(0f, new Vector3(0f, 0f, 0f));
            animation.InsertKeyFrame(0.50f, new Vector3(0, -50f, 0f));
            animation.InsertKeyFrame(1f, new Vector3(0, 0f, 0f));

            animation.Duration = TimeSpan.FromSeconds(6);
            animation.IterationBehavior = AnimationIterationBehavior.Forever;

            visual.StartAnimation("Offset", animation);

So it grabs the image element "gimage" and moves it up and down. This works fine.

Now what I have is an ObservableCollection of this usercontrol in a gridview. This gridview is set to allow reordering of items. I can reorder an item on the same row it is on, but once I move it to another row in the grid, the application crashes with "An unhandled win32 exception occurred in appname.exe [7996]". If I disable the animations, this error does not occur and I can reorder all items on my gridview.

I would appreciate any feedback on this, I can't seem to work around it.

Thanks!

Hello,
Looking at the reference for ExpressionAnimation it doesn't look like dot and cross products are supported, is this correct or are the docs out of date?
If they are not available, please consider adding them, because they would be very useful.

We have an issue with TextBox where is doesn't render font formats like FontStyle and FontWeight when using a custom FontFamily. This works fine for TextBlock.

Here is a simple app showing the bug.

I would like to create a Cubic "EaseIn", such as the one that exists in XAML (look in the link below in the Remarks section):

https://msdn.microsoft.com/en-us/library/system.windows.media.animation.cubicease(v=vs.110).aspx

How do I do that using the Compositor.CreateCubicBezierEasingFunction()?? It takes two vectors, what values do I use for both Vectors?

Can this API draw a XAML vector object
<DrawingImage><DrawingImage.Drawing><DrawingGroup>...
as exported from Expression Design. Is there sample code for this?

SVG are key elements in our app. We use them for stickers (from Noun Project), and for large frameworks. Users can even drop their own SVGs to their murals.

Here is an example of a mural:

Since we can't natively render SVG in XAML, we tried the next solutions:

• Using WebViews: This will render our SVG perfectly but the performance of the app drops significantly.
• SvgForXaml: This library didn't work for us since it fails to render many of our SVG files.
• Pre-loaded .png files: This works, but only if we don't resize the elements (which we need to), and if we don't support user SVGs (which we also need to)
• WebView to .png: This looked like promising but it failed to work for many reasons. First, you need to have the webview actually added to the xaml tree to make it work. Secondly, we can't seem to take a screenshot of a WebView that has transparent backgrounds. For this reason we had to take two screenshots and then figure out transparency to create another image. Third, it didn't consistently work.

Any thought? This is super important for us!

Hi

So as the new insider builds are coming out I've seen a new method on the Windows.UI.Xaml.Shapes.Shape base class: CompositionBrush GetAlphaMask().

This is awesome, as one of my major pain points was that I couldn't use a Xaml element as a mask for a different one - now my question is: does the alpha mask compositionbrush stay up to date if I animate the shape?

This would make creating material design-like "shape fills up the screen" animations a breeze to do :)

Thanks,
Tamás

I do not want to continue with my apps until the #Build2016, so I am experimenting, in this case https://github.com/juanpaexpedite/MasterDetailsComposition/tree/master/CompPac I am developing the Pacman using Composition. (Yes I know I can use the CanvasAnimatedControl of Win2D). But I want to test just using Composition.

Instead a dispatcher timer I have added CompositionTarget.Rendering. (That I know it for long time ago).

1.- Is there a better way to update composition properties like Offset and RotationAngle using this event?, because I think a DispatcherTimer is not the best option, it has an small flickering that I do not know if can be improved.
2.- For X,Y translations should I use just Offset or TransformMatrix?.

I want to learn in deep the capabilities of Composition and doing this kind of examples I think is it a good way, any advice will be welcome. Thanks Juan Pablo

A couple of days ago I pushed an animated Tab control to GitHub and it was built in the last Windows 10 Insider build 14527. As you swipe left or right on the control, the headers are fade in/out accordingly and the header underline follows the selected header too. Yes, it's made with Composition. I really like it. :)

Today when I tried to run the project on the same touch-enabled machine, as soon as I did a swipe on the control, the whole Windows 10 OS went black. After a couple of minutes it came back to life but the machine seemed to be restarted and the resolution was set to the lowest, so I thought this might just be a video card failure and shouldn't have anything to do with the project.

I was wrong. The machine just kept crashing as soon as I touched the control. I then tried it on my phone (build 10.0.10586.107), same result - the phone just restarted.

This might have something to do with the any of the following updates that are installed in the last couple of days, I'm not 100% sure.

After spending a couple of hours debugging, I managed to make the crash go away, on both my PC and phone. However, I am not exactly sure what's causing this. This could be a build issue but I was using the same build when I developed it and it was working fine.

Anyway, this is what I've found -

If you use Conditional Operator Expression (i.e. ? & :) inside your Expression, you have to make sure that you wrap any expression that has more than one members with round brackets ((...)).

For example,

• (A < 0) ? (B + C) : (B + D) works fine on both PC and phone.
• A < 0 ? B + C : B + D crashes on both PC and phone.

Hopefully this can help you guys narrow down the issue!

I'm working with a pannable and zoomable ScrollViewer which contains multiple elements you can move around and an InkCanvas on top where you can draw.

The issue that we are having is that, when manipulating an element and touching with another hand to the canvas or other element, sometimes the manipultion events stops firing, leaving the element in a weird state, where you can't interact with it anymore. ManipulationStarted and ManipulationCompleted are never called again, and sometimes ManipulationDelta works.

Any idea? Which we found out it's that if we put the InkCanvas below all the elements, then it never breaks, but we need the InkCanvas to be on top of every element.

We submited the example here. To reproduce, try to scale the element with two fingers, as fast as you can. You will notice that at some point the element will break.

Also, you can watch a video of how we reproduced it here. We broke the Whiteboard app for Surface Hub just moving an element and touching the canvas at the same time. After doing that, then we weren't able to move the elements any more.

Is there a more powerful alternative to RenderTargetBitmap.RenderAsync method in Windows.UI.Composition?
As per MSDN, RenderTargetBitmap.RenderAsync has its own limitiations.
I wish there was a better API to capture the pixels within a UIElement.

Hi,

at build there was a session on the new guidelines for the nav pane navigation pattern: https://channel9.msdn.com/Events/Build/2016/B842

Is there a template for this pattern available for download? Or is there a place with info on sizes, and instructions on how to make nav pane menu items look the way they should look?

Unable to cast object of type 'Windows.UI.Composition.ContainerVisual' to type 'Windows.UI.Composition.IVisual'.

Hey

Is it possible that hit testing disregards Orientation? I thought that the Xaml side should be in sync with the visuals' position, but in my experience the PointerEntered/Exited events don't consider the change.

This can be observed here: https://github.com/tomzorz/Composition_fun/tree/master/Composition_Hotchkiss

Thanks,
Tamás

Since the ImageLoader in SamplesCommon is based on CompositionImageLoader, it has the same bug that I just discovered. Essentially, when initializing the ImageLoader with a CompositionGraphicsDevice the local variable for the CanvasDeviace is never assigned. This means that when trying to load a bitmap there is no device and the draw fails. More information can be found here, and the solution can be found here.

Hi,

I have implemented an ArithmeticCompositeEffect in my app which I apply every 20s to animate a blend between 2 images. I can see memory grow steadily...

I have extract a sample project for you to have a look: https://github.com/cyrilcathala/CompositionBlendEffect

Do you have any best practices about memory management, and when to dispose what?

Thanks!

When i have cloned the entire code and build for the first time I am getting below error. I have rebuilded cleaned and done everything. Please help.

msdn documentation at https://msdn.microsoft.com/en-us/windows/uwp/graphics/composition-effects has many links to https://github.com/Microsoft/composition/tree/master/SDK10240_WIN10_RTM/BasicCompositonEffects which no longer exist