Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions hub/apps/desktop/modernize/ui/visual-layer-in-desktop-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ ms.localizationpriority: medium

# Using the Visual layer in desktop apps

You can now use Windows Runtime APIs in non-UWP desktop applications to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 applications, and take advantage of the latest Windows UI features that are only available via UWP.
> [!IMPORTANT]
> This page describes the Windows SDK Visual layer (`Windows.UI.Composition`) for Win32 interop scenarios. For new WinUI 3 / Windows App SDK development, see [Visual layer overview](/windows/apps/develop/composition/visual-layer) which covers the `Microsoft.UI.Composition` namespace.

You can now use Windows Runtime APIs in non-UWP desktop applications to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 applications, and take advantage of modern Windows UI features.

For many scenarios, you can use [XAML islands](../xaml-islands/xaml-islands.md) to add modern XAML controls to your app. However, when you need to create custom experiences that go beyond the built-in controls, you can access the Visual layer APIs.

Expand All @@ -29,23 +32,23 @@ You can use the Visual layer to give your application a unique look and feel, an

### Brushes

[Composition brushes](/windows/uwp/composition/composition-brushes) let you paint UI objects with solid colors, gradients, images, videos, complex effects, and more.
[Composition brushes](/windows/apps/develop/composition/composition-brushes) let you paint UI objects with solid colors, gradients, images, videos, complex effects, and more.

![An egg created with Material Creator](../images/visual-layer-interop/egg.gif)

> _An egg created with the [Material Creator demo app](https://github.com/Microsoft/WindowsCompositionSamples/tree/master/Demos/MaterialCreator)._

### Effects

[Composition effects](/windows/uwp/composition/composition-effects) include light, shadow, and a list of filter effects. They can be animated, customized, and chained, then applied directly to visuals. The SceneLightingEffect can be combined with composition lighting to create atmosphere, depth and materials.
[Composition effects](/windows/apps/develop/composition/composition-effects) include light, shadow, and a list of filter effects. They can be animated, customized, and chained, then applied directly to visuals. The SceneLightingEffect can be combined with composition lighting to create atmosphere, depth and materials.

![Lights and material](../images/visual-layer-interop/light-interop.gif)

> _Lights and material demonstrated in the [Windows UI Composition sample gallery](https://github.com/Microsoft/WindowsCompositionSamples/tree/master/SampleGallery)._

### Animations

[Composition animations](/windows/uwp/composition/composition-animation) run directly in the compositor process, independent of the UI thread. This ensures smoothness and scale, so you can run large numbers of concurrent, explicit animations. In addition to familiar KeyFrame animations to drive property changes over time, you can use expressions to set up mathematical relationships between different properties, including user input. Input driven animations let you create UI that dynamically and fluidly responds to user input, which can result in higher user engagement.
[Composition animations](/windows/apps/develop/composition/composition-animation) run directly in the compositor process, independent of the UI thread. This ensures smoothness and scale, so you can run large numbers of concurrent, explicit animations. In addition to familiar KeyFrame animations to drive property changes over time, you can use expressions to set up mathematical relationships between different properties, including user input. Input driven animations let you create UI that dynamically and fluidly responds to user input, which can result in higher user engagement.

![Short video of another user interface created with the visual layer.](../images/visual-layer-interop/swipe-scroller.gif)

Expand Down Expand Up @@ -84,19 +87,19 @@ Learn how to use the Visual layer in your applications by experimenting with our

While many Visual Layer features work the same when hosted in a desktop application as they do in a UWP app, some features do have limitations. Here are some of the limitations to be aware of:

- Effect chains rely on [Win2D](https://microsoft.github.io/Win2D/html/Introduction.htm) for the effect descriptions. The [Win2D NuGet package](https://www.nuget.org/packages/Win2D.uwp) is not supported in desktop applications, so you would need to recompile it from the [source code](https://github.com/Microsoft/Win2D).
- Effect chains rely on [Win2D](https://microsoft.github.io/Win2D/html/Introduction.htm) for the effect descriptions. For Windows App SDK apps, use the [Microsoft.Graphics.Win2D](https://www.nuget.org/packages/Microsoft.Graphics.Win2D) NuGet package. For UWP apps, use [Win2D.uwp](https://www.nuget.org/packages/Win2D.uwp).
- To do hit testing, you need to do bounds calculations by walking the visual tree yourself. This is the same as the Visual Layer in UWP, except in this case there's no XAML element you can easily bind to for hit testing.
- The Visual Layer does not have a primitive for rendering text.
- When two different UI technologies are used together, such as WPF and the Visual Layer, they are each responsible for drawing their own pixels on the screen, and they can't share pixels. As a result, Visual Layer content is always rendered on top of other UI content. (This is known as the _airspace_ issue.) You might need to do extra coding and testing to ensure your Visual layer content resizes with the host UI and doesn't occlude other content.
- Content hosted in a desktop application doesn't automatically resize or scale for DPI. Extra steps might required to ensure your content handles DPI changes. (See the platform specific tutorials for more info.)

## Additional Resources

- [Visual layer](/windows/uwp/composition/visual-layer)
- [Composition visual](/windows/uwp/composition/composition-visual-tree)
- [Composition brushes](/windows/uwp/composition/composition-brushes)
- [Composition effects](/windows/uwp/composition/composition-effects)
- [Composition animations](/windows/uwp/composition/composition-animation)
- [Visual layer](/windows/apps/develop/composition/visual-layer)
- [Composition visual](/windows/apps/develop/composition/composition-visual-tree)
- [Composition brushes](/windows/apps/develop/composition/composition-brushes)
- [Composition effects](/windows/apps/develop/composition/composition-effects)
- [Composition animations](/windows/apps/develop/composition/composition-animation)

API reference

Expand Down
3 changes: 3 additions & 0 deletions hub/apps/develop/devices-sensors/scan-from-your-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ This topic describes how to scan content from your app by using a flatbed, feede
- [**DeviceInformation**](/uwp/api/Windows.Devices.Enumeration.DeviceInformation)
- [**DeviceClass**](/uwp/api/Windows.Devices.Enumeration.DeviceClass)

> [!NOTE]
> The code samples in this article use UWP patterns. For WinUI 3 / Windows App SDK apps, replace `Dispatcher.RunAsync` with `DispatcherQueue.TryEnqueue` and use `Microsoft.UI.Dispatching.DispatcherQueuePriority` instead of `Windows.UI.Core.CoreDispatcherPriority`. For detailed migration guidance and code examples, see [Threading functionality migration](/windows/apps/windows-app-sdk/migrate-to-windows-app-sdk/guides/threading).

To scan from your app, you must first list the available scanners by declaring a new [**DeviceInformation**](/uwp/api/Windows.Devices.Enumeration.DeviceInformation) object and getting the [**DeviceClass**](/uwp/api/Windows.Devices.Enumeration.DeviceClass) type. Only scanners that are installed locally with WIA drivers are listed and available to your app.

After your app has listed available scanners, it can use the auto-configured scan settings based on the scanner type, or just scan using the available flatbed or feeder scan source. To use auto-configured settings, the scanner must be enabled for auto-configuration and must not be equipped with both a flatbed and a feeder scanner. For more info, see [Auto-Configured Scanning](/windows-hardware/drivers/image/auto-configured-scanning).
Expand Down
8 changes: 4 additions & 4 deletions hub/apps/develop/launch/handle-uri-activation.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,12 @@ The following code programmatically launches the app via its URI:
```csharp
// Launch the URI
var uri = new Uri("alsdk:");
var success = await Windows.System.Launcher.LaunchUriAsync(uri)
var success = await Windows.System.Launcher.LaunchUriAsync(uri);
```

For more details about how to launch an app via a URI, see [Launch the default app for a URI](launch-default-app.md).

It is recommended that apps create a new XAML [Frame](/uwp/api/Windows.UI.Xaml.Controls.Frame) for each activation event that opens a new page. This way, the navigation backstack for the new XAML **Frame** will not contain any previous content that the app might have on the current window when suspended. Apps that decide to use a single XAML **Frame** for Launch and File Contracts should clear the pages on the **Frame** navigation journal before navigating to a new page.
It is recommended that apps create a new XAML [Frame](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.frame) for each activation event that opens a new page. This way, the navigation backstack for the new XAML **Frame** will not contain any previous content that the app might have on the current window when suspended. Apps that decide to use a single XAML **Frame** for Launch and File Contracts should clear the pages on the **Frame** navigation journal before navigating to a new page.

When launched via Protocol activation, apps should consider including UI that allows the user to go back to the top page of the app.

Expand All @@ -150,9 +150,9 @@ Any app or website can use your URI scheme name, including malicious ones. So an
> [!NOTE]
> When a UWP app is launched via Protocol Contract, make sure that Back button takes the user back to the screen that launched the app and not to the app's previous content.

We recommend that apps create a new XAML [**Frame**](/uwp/api/Windows.UI.Xaml.Controls.Frame) for each activation event that opens a new Uri target. This way, the navigation backstack for the new XAML **Frame** will not contain any previous content that the app might have on the current window when suspended.
We recommend that apps create a new XAML [**Frame**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.frame) for each activation event that opens a new Uri target. This way, the navigation backstack for the new XAML **Frame** will not contain any previous content that the app might have on the current window when suspended.

If you decide that you want your apps to use a single XAML [**Frame**](/uwp/api/Windows.UI.Xaml.Controls.Frame) for Launch and Protocol Contracts, clear the pages on the **Frame** navigation journal before navigating to a new page. When launched via Protocol Contract, consider including UI into your apps that allows the user to go back to the top of the app.
If you decide that you want your apps to use a single XAML [**Frame**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.frame) for Launch and Protocol Contracts, clear the pages on the **Frame** navigation journal before navigating to a new page. When launched via Protocol Contract, consider including UI into your apps that allows the user to go back to the top of the app.

## Related content

Expand Down
6 changes: 3 additions & 3 deletions hub/apps/develop/motion/xaml-property-animations.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This article introduces properties that let you animate a XAML UIElement with th
Typically, you use either XAML or Composition APIs to build animations in your Windows apps:

- Use XAML constructs like [Storyboarded animations](storyboarded-animations.md), or the _*ThemeTransition_ and _*ThemeAnimation_ classes in the [Microsoft.UI.Xaml.Media.Animation](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation) namespace.
- Use composition animations as described in [Using the Visual Layer with XAML](/windows/uwp/composition/using-the-visual-layer-with-xaml).
- Use composition animations as described in [Using the Visual Layer with XAML](/windows/apps/develop/composition/visual-layer).

Using the visual layer provides better performance than using the XAML constructs. But using [ElementCompositionPreview](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.Hosting.ElementCompositionPreview) to get the element's underlying composition [Visual](/windows/windows-app-sdk/api/winrt/microsoft.ui.composition.visual) object, and then animating the Visual with composition animations, is more complex to use.

Expand Down Expand Up @@ -100,7 +100,7 @@ Use the [StartAnimation](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.ui
This example shows how to animate the scale of a Button.

```csharp
var compositor = Window.Current.Compositor;
var compositor = CompositionTarget.GetCompositorForCurrentThread();
var animation = compositor.CreateVector3KeyFrameAnimation();

animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
Expand Down Expand Up @@ -132,5 +132,5 @@ destinationButton.StartAnimation(animation);
## Related topics

- [Storyboarded animations](storyboarded-animations.md)
- [Using the Visual Layer with XAML](/windows/uwp/composition/using-the-visual-layer-with-xaml)
- [Using the Visual Layer with XAML](/windows/apps/develop/composition/visual-layer)
- [Transforms overview](../../develop/platform/xaml/transforms.md)
8 changes: 4 additions & 4 deletions hub/apps/develop/performance/optimize-xaml-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ Here, we look at some other ways you can reduce the number of elements your app

If your XAML markup contains elements that you don't show right away, you can defer loading those elements until they are shown. For example, you can delay the creation of non-visible content such as a secondary tab in a tab-like UI. Or, you might show items in a grid view by default, but provide an option for the user to view the data in a list instead. You can delay loading the list until it's needed.

Use the [x:Load attribute](/windows/uwp/xaml-platform/x-load-attribute) instead of the [Visibility](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.visibility) property to control when an element is shown. When an element's visibility is set to **Collapsed**, then it is skipped during the render pass, but you still pay the object instance costs in memory. When you use x:Load instead, the framework does not create the object instance until it is needed, so the memory costs are even lower. The drawback is that you pay a small memory overhead (approximately 600 bytes) when the UI is not loaded.
Use the [x:Load attribute](/windows/apps/develop/platform/xaml/x-load-attribute) instead of the [Visibility](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.visibility) property to control when an element is shown. When an element's visibility is set to **Collapsed**, then it is skipped during the render pass, but you still pay the object instance costs in memory. When you use x:Load instead, the framework does not create the object instance until it is needed, so the memory costs are even lower. The drawback is that you pay a small memory overhead (approximately 600 bytes) when the UI is not loaded.

> [!NOTE]
> In Windows App SDK, [x:Load](/windows/uwp/xaml-platform/x-load-attribute) is the recommended deferred-loading pattern for XAML content that is not needed immediately.
> In Windows App SDK, [x:Load](/windows/apps/develop/platform/xaml/x-load-attribute) is the recommended deferred-loading pattern for XAML content that is not needed immediately.

The following examples show the difference in element count and memory use when different techniques are used to hide UI elements. A ListView and a GridView containing identical items are placed in a page's root Grid. The ListView is not visible, but the GridView is shown. The XAML in each of these examples produces the same UI on the screen. Use [tools for profiling and performance](/windows/apps/performance/choose-between-tools) to check element count and memory use in your app.

Expand Down Expand Up @@ -146,7 +146,7 @@ In general, [ResourceDictionary](/windows/windows-app-sdk/api/winrt/microsoft.ui

### Resources with x:Name

Use the [x:Key attribute](/windows/uwp/xaml-platform/x-key-attribute) to reference your resources. Any resource with the [x:Name attribute](/windows/uwp/xaml-platform/x-name-attribute) won't benefit from the platform optimization; instead, it is instantiated as soon as the ResourceDictionary is created. This happens because x:Name tells the platform that your app needs field access to this resource, so the platform needs to create something to hold a reference to it.
Use the [x:Key attribute](/windows/apps/develop/platform/xaml/x-key-attribute) to reference your resources. Any resource with the [x:Name attribute](/windows/apps/develop/platform/xaml/x-name-attribute) won't benefit from the platform optimization; instead, it is instantiated as soon as the ResourceDictionary is created. This happens because x:Name tells the platform that your app needs field access to this resource, so the platform needs to create something to hold a reference to it.

### ResourceDictionary in a UserControl

Expand Down Expand Up @@ -272,7 +272,7 @@ To fix the duplication, define the brush as a resource. If controls in other pag

Overdrawing occurs where more than one object is drawn in the same screen pixels. Note that there is sometimes a tradeoff between this guidance and the desire to minimize element count.

Use [**DebugSettings.IsOverdrawHeatMapEnabled**](/uwp/api/windows.ui.xaml.debugsettings.isoverdrawheatmapenabled) as a visual diagnostic. You might find objects being drawn that you didn't know were in the scene.
Use [**DebugSettings.IsOverdrawHeatMapEnabled**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.debugsettings.isoverdrawheatmapenabled) as a visual diagnostic. You might find objects being drawn that you didn't know were in the scene.

### Transparent or hidden elements

Expand Down
Loading