Hello,
what you try to achieve is difficult. You would need a kind of bitmap copy operation with an additional mask changing dynamically at the runtime. The mask itself is drawn by vector graphic operation (an arc). As alternative a vector graphic operation with radial gradiant would be necessary. Both, copy with mask and radial gradients are not supported.
In some cases (like the video) you can achieve the desired effect by overlaping the image with a opaque vector graphic. The effect from the video could be made as follows:
1. In the background of your component put two Image views: on the left half the blue radial gradient and on the right the green gradient.
2. In front of the images put two Filled Path views. They should overlap the entire component.
3. Configure the Filled Path views to be shown with opaque black color.
4. Configure the Offset property of the both Filled path views to correspond to center of the GUI component.
5. Add two Arc Path data objects. Connect each with the respective Filled Path views.
6. Configure the properties Radius, InnerRadius, StartAngle and EndAngle of the Arc Path data objects.
Accordingly, the Filled Path views overlap the images in the backgrouznd producing the effect of an colored arc.
More advance:
7. If you want the colors of the images to change, use Alpha-only bitmaps and determine the color (blue, breen, yellow, ...) at the runtime.
8. With additional images arrangecd in front of the Filled path views you can add some glow or reflection effects. The images in the background can thus limit to show the radial gradient only. The glow or light effects can be produces by other images in front of them.
I hope it helps you further.
Best regards
Paul Banach