How is xaml control rendered in UWP application? - xaml

I am new to UWP app development and want to understand how xaml control is rendered in the UWP application. Which is the class that implements the rendering logic? And is that code open source? Also, when I create a new custom control, do I need to take care of rendering myself?

How is xaml control rendered in UWP application?
This is a big topic, for understanding this, we need to know UI Framework Layering. Windows.UI.XAML-> Windows.UI.Composition-> DirectX Family.
Derive from official document, The Visual layer provides a high performance, retained-mode API for graphics, effects and animations, and is the foundation for all UI across Windows devices. You define your UI in a declarative manner and the Visual layer relies on graphics hardware acceleration to ensure your content, effects and animations are rendered in a smooth, glitch-free manner independent of the app's UI thread.
And is that code open source?
Currently, the UWP open source controls are WinUI. You could find the base custom control build logic.
do I need to take care of rendering myself
The rendering is very low level, if you just custom control that inherit Control class, you have no need to care about the rendering process, you just need to build the interface in the target templated style. and add specific dependency property in the code behind. For more detail please refer to Templated Control document.

Related

Can WinUI 3 be used for offscreen rendering of a xaml tree?

I would like to use the new WinUI 3 framework to render a 2D xaml tree to a DirectX texture.
Ideally, I want to be able to supply the WinUI infrastructure with my own DirectX device, context and rendering target and it will render the xaml content onto my rendering target.
I basically want to embed WinUI 3 into an existing 3D graphics engine.
From skimming through the documentation, I can see that some form of DirectX interoperability exists via CompositionGraphicsDevice class. But I haven't been able to understand if this mechanism is intended to be used in order to embed custom D3D content into an existing WinUI-based UI or the other way around.
So Can this be done? Can WinUI 3 be used for offscreen rendering of a xaml tree without creating a Window? Can you outline the steps required to do so?

c# UI Automation for OpenGL

Is it possible to inspect GUI elements for OpenGL windows applications, as it is possible to do it with native windows apps or any app done in WPF or windows forms? I would like to be able to read text of labels, textboxes in the OpenGL application, didn't manage to do it with UIAutomation with c#, nor with Selenium.
Unfortunately, no. OpenGL is a rasterisation API: by the time the UI element data reaches OpenGL, it is already in a format describing how to draw rectangles and the pixels of the font, not abstract UI element descriptions.
Your best bet is OCR.

Click and drag selection box in UWP

Is it possible to implement mouse click and drag selection box in GridView UWP Windows 10. Should it be done through simply drawing a rectangle, calculating coordinates of its points and evaluating position of other objects inside this box? Or are there some other ways?
Could you give a bit of sample code or a link?
The Universal Windows Platform does allow for Drag-And-Drop behavior. This includes drag from app and drop outside of app, drag and drop inside the app, and drag from outside the app and drop in the app.
The way to do this very simple (with room for heavy customization if you feel like it is needed): UWP XAML controls have a CanDrag and AllowDrop properties. The former is just a property of whichever control you're dealing with, the latter is an event that needs to be handled properly via code. If you want to further customize your app you can also handle the DragOver, which handles behavior when a dragged item is over a drop area but has not been "released" yet.
For further details and a bit example code please read Microsoft's own documentation for Drag-And-Drop. For a more built up example, you can check out the following Github repo.

2D animation framework for windows store apps

I am trying to develop a user interface which involves creating train sets on the canvas. I am planning to create this as a windows store app. I have some experience in Silverlight and xaml. I am planning to make my app in C# and Xaml.
I have done some research on the web and I could not find any decent framework which support following animations and UI activities:
Drag and drop controls
Snapping of controls
Reordering snapped controls
Drop-shadow effects for control
I know how to di all these in Silverlight world but the windows store xaml put some limitations. Could anyone suggest some framework or perhaps code samples that could be useful for me.
The GridView control offers drag and drop, snapping and reordering of items right out of the box.

UserControl vs LayoutAwarePage (Windows 8 XAML)

What is the difference between <common:LayoutAwarePage and <UserControl... in XAML in Windows 8. Looks like both are used as W8 pages.
A Page is what you need to use inside of a Frame to support the standard navigation framework and the standard AppBar class. LayoutAwarePage adds support for different visual states depending on layout (portrait, landscape full/filled/snapped), which really is required when you are building an app to submit to the store.
A UserControl is just a simple way to group some UI pieces and code-behind together useful especially if you want to have a reusable piece of UI that shows up on different pages or if your page design becomes too complicated (eg. if you have a lot of XAML for different page layouts). It is also useful if you want to create a common control to be reused in multiple places or multiple projects, but don't care about being able to restyle it - then you would need to create a custom/templated control.
layoutawarepage are page that allow supports for the various view such as filled, snapped, portrait and landscape. in which you would have to handle the visualstatemanager in xaml and do the switching from various view in codebehind.
while usercontrol are elements that you can place in other pages.