diff --git a/doc/.howto-template.md b/doc/.howto-template.md index 314fd74ab861..91c108163d79 100644 --- a/doc/.howto-template.md +++ b/doc/.howto-template.md @@ -53,7 +53,7 @@ * [**Rider Version 2020.2+**](https://www.jetbrains.com/rider/download/) * [**Rider Xamarin Android Support Plugin**](https://plugins.jetbrains.com/plugin/12056-rider-xamarin-android-support/) (you may install it directly from Rider) -*** +---
@@ -72,6 +72,6 @@ See the completed sample on GitHub: [YourSample](https://github.com/unoplatform/
-*** +--- [!include[getting-help](includes/getting-help.md)] diff --git a/doc/ReleaseNotes/LegacyReleaseNotes.md b/doc/ReleaseNotes/LegacyReleaseNotes.md index f180cb442520..1258bc635b12 100644 --- a/doc/ReleaseNotes/LegacyReleaseNotes.md +++ b/doc/ReleaseNotes/LegacyReleaseNotes.md @@ -190,7 +190,7 @@ uid: Uno.ReleaseNotes.Legacy - **Custom Themes** are supported. This let you specify `HighContrast` or any other custom themes. (this is a feature not supported in UWP) - ``` csharp + ```csharp // Put that somewhere during app initialization... Uno.UI.ApplicationHelper.RequestedCustomTheme = "MyCustomTheme"; ``` diff --git a/doc/articles/Uno-UI-Performance.md b/doc/articles/Uno-UI-Performance.md index 5aa27e16b4f6..cca2cad3db3a 100644 --- a/doc/articles/Uno-UI-Performance.md +++ b/doc/articles/Uno-UI-Performance.md @@ -20,20 +20,20 @@ Here's what to look for: - The default [`ListViewItem` and `GridViewItem` styles](https://github.com/unoplatform/uno/blob/74b7d5d0e953fcdd94223f32f51665af7ce15c60/src/Uno.UI/UI/Xaml/Style/Generic/Generic.xaml#L951) are very feature-rich, yet that makes them quite slow. For instance, if you know that you're not likely to use selection features for a specific ListView, create a simpler ListViewItem style that some visual states, or the elements that are only used for selection. - If items content frequently change (e.g. live data in TextBlock) on iOS and Android, ListView items rendering can require the use of the `not_win:AreDimensionsConstrained="True"` [uno-specific property](https://github.com/unoplatform/uno/blob/7355d66f77777b57c660133d5ec011caaa810e29/src/Uno.UI/UI/Xaml/FrameworkElement.cs#L86). - This attribute prevents items in a list from requesting their parent to be re-measured when their properties change. It's safe to use the `AreDimensionsConstrained` property when items always have the same size regardless of bound data, and the items and list are stretched in the non-scrolling direction. If item sizes can change when the bound data changes (eg, if they contain bound text that can wrap over multiple lines, images of undetermined size, etc), or if the list is wrapped to the items, then you shouldn't set `AreDimensionsConstrained` because the list does need to remeasure itself when item data changes in that case. + This attribute prevents items in a list from requesting their parent to be re-measured when their properties change. It's safe to use the `AreDimensionsConstrained` property when items always have the same size regardless of bound data, and the items and list are stretched in the non-scrolling direction. If item sizes can change when the bound data changes (eg, if they contain bound text that can wrap over multiple lines, images of undetermined size, etc), or if the list is wrapped to the items, then you shouldn't set `AreDimensionsConstrained` because the list does need to remeasure itself when item data changes in that case. - You'll need to set the property on the top-level element of your item templates, as follows: + You'll need to set the property on the top-level element of your item templates, as follows: - ```xml - - - - ... - - - ``` + ```xml + + + + ... + + + ``` - Note that WinUI does not need this, and the issue is [tracked in Uno here](https://github.com/unoplatform/uno/issues/6910). + Note that WinUI does not need this, and the issue is [tracked in Uno here](https://github.com/unoplatform/uno/issues/6910). - Avoid controls that contain inline popups, menus, or flyouts. Doing so will create as many popups as there are items visible on the screen. As in general, there is only one popup visible at a time, it is generally best to move the popup to a separate static resource. - Updating items in `ItemsControl` can be quite expensive, using `ItemsRepeater` is generally faster at rendering similar content. @@ -46,11 +46,11 @@ Here's what to look for: - `ProgressRing` and `ProgressBar` controls indeterminate mode generally consume rendering time. Make sure to set those to determinate modes when not visible. - Troubleshooting of animations can be done by enabling the following logger: - ```csharp - builder.AddFilter("Windows.UI.Xaml.Media.Animation", LogLevel.Debug); - ``` + ```csharp + builder.AddFilter("Windows.UI.Xaml.Media.Animation", LogLevel.Debug); + ``` - The logger will provide all the changes done to animated properties, with element names. + The logger will provide all the changes done to animated properties, with element names. - Image Assets - Try using an image that is appropriate for the DPI and screen size. @@ -68,13 +68,13 @@ Here's what to look for: - Add the `Windows.UI.Xaml.BindableAttribute` or `System.ComponentModel.BindableAttribute` on non-DependencyObject classes. - When data binding to classes not inheriting from `DependencyObject`, in Debug configuration only, the following message may appear: - ```console - The Bindable attribute is missing and the type [XXXX] is not known by the MetadataProvider. - Reflection was used instead of the binding engine and generated static metadata. Add the Bindable attribute to prevent this message and performance issues. - ``` + ```console + The Bindable attribute is missing and the type [XXXX] is not known by the MetadataProvider. + Reflection was used instead of the binding engine and generated static metadata. Add the Bindable attribute to prevent this message and performance issues. + ``` - This message indicates that the binding engine will fall back on reflection based code, which is generally slow. To compensate for this, Uno use the `BindableTypeProvidersSourceGenerator`, which generates static non-generic code to avoid reflection operations during binding operations. - This attribute is inherited and is generally used on ViewModel based classes. + This message indicates that the binding engine will fall back on reflection based code, which is generally slow. To compensate for this, Uno use the `BindableTypeProvidersSourceGenerator`, which generates static non-generic code to avoid reflection operations during binding operations. + This attribute is inherited and is generally used on ViewModel based classes. - [`x:Phase`](https://learn.microsoft.com/windows/uwp/xaml-platform/x-phase-attribute) - For `ListView` instances with large templates, consider the use of x:Phase to reduce the number of bindings processed during item materialization. - It is only supported for items inside `ListViewItem` templates, it will be ignored for others. @@ -83,13 +83,13 @@ Here's what to look for: attribute is ignored for templates of `ContentControl` instances, or any other control. - When binding to Brushes with a solid color, prefer binding to the `Color` property like this if the brush type does not change: - ```xml - - - - - - ``` + ```xml + + + + + + ``` - Resources - Avoid using `x:Name` in `ResourceDictionary` as those force early instantiation of the resource @@ -105,13 +105,15 @@ Here's what to look for: - Adjusting the GC configuration may be useful to limit the collection runs on large allocations. Add the following to your `csproj` file: ```xml - - - - + + + ``` - You can adjust the `nursery-size` and `soft-heap-limit` based on your application's memory consumption characteristics. See the [.NET GC configuration](https://learn.microsoft.com/xamarin/android/internals/garbage-collection#configuration) for more details. + + You can adjust the `nursery-size` and `soft-heap-limit` based on your application's memory consumption characteristics. See the [.NET GC configuration](https://learn.microsoft.com/xamarin/android/internals/garbage-collection#configuration) for more details. + - The size of the application can be reduced by: + - Enabling the [IL Linker](features/using-il-linker-webassembly.md) - Enabling [XAML Resources Trimming](features/resources-trimming.md) @@ -122,20 +124,20 @@ Here's what to look for: - Enable `Marshal Methods` in `Release` with `-p:AndroidEnableMarshalMethods=true` to improve startup performance (.NET 8 +) - [Enable Startup Tracing](https://devblogs.microsoft.com/dotnet/performance-improvements-in-dotnet-maui/#record-a-custom-aot-profile) by running the following: - ```bash - dotnet add package Mono.AotProfiler.Android - dotnet build -t:BuildAndStartAotProfiling - # Wait until the app launches, then navigate around the most common screens - dotnet build -t:FinishAotProfiling - ``` + ```bash + dotnet add package Mono.AotProfiler.Android + dotnet build -t:BuildAndStartAotProfiling + # Wait until the app launches, then navigate around the most common screens + dotnet build -t:FinishAotProfiling + ``` - This will produce a `custom.aprof` in your project directory. Move the file to the `Android` folder and add the following to your `csproj`: + This will produce a `custom.aprof` in your project directory. Move the file to the `Android` folder and add the following to your `csproj`: - ```xml - - - - ``` + ```xml + + + + ``` - Enable `Full AOT` instead of `Startup Tracing` in `Release` with `-p:AndroidEnableProfiledAot=false` to get the best runtime performance diff --git a/doc/articles/controls/ContentDialog.md b/doc/articles/controls/ContentDialog.md index ec182548ec68..a69639285212 100644 --- a/doc/articles/controls/ContentDialog.md +++ b/doc/articles/controls/ContentDialog.md @@ -10,16 +10,7 @@ Represents a dialog box that can be customized to contain checkboxes, hyperlinks If you're considering using a dialog in your app, check out our comprehensive video for a detailed guidance on the implementation: -
- -
+> [!Video https://www.youtube-nocookie.com/embed/VAUYH01LMEE] ## Overlay Background (iOS/Android) diff --git a/doc/articles/create-an-app-rider.md b/doc/articles/create-an-app-rider.md index e4052e0ccf19..1303d964c111 100644 --- a/doc/articles/create-an-app-rider.md +++ b/doc/articles/create-an-app-rider.md @@ -4,19 +4,11 @@ uid: Uno.GettingStarted.CreateAnApp.Rider # Create an app with Rider -
- -
- > [!NOTE] -> Make sure to setup your environment by [following our instructions](xref:Uno.GetStarted.Rider). +> Make sure to setup your environment first by [following our instructions](xref:Uno.GetStarted.Rider). + + +> [!Video https://www.youtube-nocookie.com/embed/BQdj9rqLcos] ## Create the App @@ -91,7 +83,7 @@ You will be able to build the Windows project. Select the `net8.0-desktop` target framework, then Run. -*** +--- ## Next Steps diff --git a/doc/articles/create-an-app-vs2022.md b/doc/articles/create-an-app-vs2022.md index a0d1a31ddba4..a8d42f9cb02e 100644 --- a/doc/articles/create-an-app-vs2022.md +++ b/doc/articles/create-an-app-vs2022.md @@ -4,7 +4,7 @@ uid: Uno.GettingStarted.CreateAnApp.VS2022 # Creating an app with Visual Studio 2022 for Windows > [!NOTE] -> Make sure to setup your environment by [following our instructions](xref:Uno.GetStarted.vs2022). +> Make sure to setup your environment first by [following our instructions](xref:Uno.GetStarted.vs2022). ## Create the App @@ -115,7 +115,7 @@ To debug the **Android** platform: > [!NOTE] > If no android devices are available, a Visual Studio 17.7+ issue may require unloading/reloading the project. Right-click on the `MyApp` project and select **Unload Project** then **Load project**. -*** +--- You're all set! diff --git a/doc/articles/create-an-app-vscode.md b/doc/articles/create-an-app-vscode.md index 98a6a75380d5..b050e1fdd04f 100644 --- a/doc/articles/create-an-app-vscode.md +++ b/doc/articles/create-an-app-vscode.md @@ -4,7 +4,7 @@ uid: Uno.GettingStarted.CreateAnApp.VSCode # Creating an app with VS Code > [!NOTE] -> Make sure to setup your environment by [following our instructions](xref:Uno.GetStarted.vscode). +> Make sure to setup your environment first by [following our instructions](xref:Uno.GetStarted.vscode). ## Create the App @@ -213,11 +213,11 @@ In the status bar : Finally press `F5` to start the debugging session. -*** +--- You're all set! -You can also find [additional VS Code topics](xref:Uno.vscode.additional), such as using snippets, updating existing apps to use VS Code +You can also find [additional VS Code topics](xref:Uno.vscode.additional), such as using snippets, updating existing apps to use VS Code. ## Next Steps diff --git a/doc/articles/features/ElevatedView.md b/doc/articles/features/ElevatedView.md index 1b4d71be87c7..7a9abcdef77c 100644 --- a/doc/articles/features/ElevatedView.md +++ b/doc/articles/features/ElevatedView.md @@ -20,7 +20,7 @@ xmlns:toolkit="using:Uno.UI.Toolkit" After that, use the `ElevatedView` to host the content you need to be elevated: -``` xml +```xml diff --git a/doc/articles/features/Lottie.md b/doc/articles/features/Lottie.md index 7bc962941670..f10dcc40a645 100644 --- a/doc/articles/features/Lottie.md +++ b/doc/articles/features/Lottie.md @@ -94,7 +94,7 @@ On UWP, you'll need to reference the following packages in your head project: * `Microsoft.Toolkit.Uwp.UI.Lottie` (for the `LottieVisualSource`) * `Microsoft.UI.Xaml` (for the `AnimatedVisualPlayer`) -*** +--- For more information, see [AnimatedVisualPlayer Class](https://learn.microsoft.com/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer). @@ -131,7 +131,7 @@ Here's how to use this feature: 1. Add a _css-like_ declaration to your Lottie shape like this then put this in the name of the shape. That means the `nm` property in the json-generated file. - ``` css + ```css { Color: var(MyColor); } ``` @@ -139,7 +139,7 @@ Here's how to use this feature: 2. Use it that way: - ``` xml + ```xml diff --git a/doc/articles/features/PasswordVault.md b/doc/articles/features/PasswordVault.md index f99c59b81ebd..7b135080d9fa 100644 --- a/doc/articles/features/PasswordVault.md +++ b/doc/articles/features/PasswordVault.md @@ -46,7 +46,7 @@ There is no way to persist a secured data in a Web browser. Even if we generate there is no safe place to store this key except by relying on server components, which broke the offline support (and Progressive Web App). So currently we preferred to **not** implement the `PasswordVault`. It will throw a `NotSupportedException` when you try to create a new instance. -*** +--- ## PasswordCredential diff --git a/doc/articles/features/applicationdata.md b/doc/articles/features/applicationdata.md index c07207544a62..9593e2ec0100 100644 --- a/doc/articles/features/applicationdata.md +++ b/doc/articles/features/applicationdata.md @@ -52,7 +52,7 @@ string text = await FileIO.ReadTextAsync(file); The `LocalSettings` and `RoamingSettings` properties provide access to simple key-value containers that allow storage of lightweight user and application preferences. The values stored in settings should be simple serializable types. To store more complex data structures, it is preferred to serialize them first into a string (for example using a JSON serializer). -``` csharp +```csharp ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings; // Save a setting. diff --git a/doc/articles/features/clipboard.md b/doc/articles/features/clipboard.md index 9571b8b65087..e57a7c242022 100644 --- a/doc/articles/features/clipboard.md +++ b/doc/articles/features/clipboard.md @@ -23,16 +23,7 @@ uid: Uno.Features.Clipboard ## Using Clipboard with Uno -
- -
+> [!Video https://www.youtube-nocookie.com/embed/bfT4_LZrSQQ] * `SetContent` and `GetContent` APIs currently support textual data on all platforms. On Android, they also support URI and HTML formats, but the clipboard can hold only one item. Setting multiple items at once does not work reliably. * `ContentChanged` event can observe clipboard changes only when the application is in the foreground. On macOS, the `ContentChanged` event checks for clipboard changes by polling the current `NSPasteboard` change count in 1-second intervals. The polling starts only after the first subscriber attaches to the `ContentChanged` event and stops after the last subscriber unsubscribes. diff --git a/doc/articles/features/custom-fonts.md b/doc/articles/features/custom-fonts.md index 4bcad677db99..c7d47f642342 100644 --- a/doc/articles/features/custom-fonts.md +++ b/doc/articles/features/custom-fonts.md @@ -25,7 +25,7 @@ In order to use a custom font in your application: On Wasm platform, fonts files are loaded by the browser and can take some time to load, resulting in performance degradation and potential flickering when the font is actually available for rendering. In order to prevent this, it is possible to instruct the browser to preload the font before the rendering: -``` csharp +```csharp // Preloading of font families on Wasm. Add this before the Application.Start() in the Program.cs public static void Main(string[] args) @@ -203,7 +203,7 @@ First, the font needs to be defined in CSS. Second, you can use it in XAML in this way: -``` xml +```xml This text should be rendered using the font defined as base64 in CSS. diff --git a/doc/articles/features/progressring.md b/doc/articles/features/progressring.md index 75c2f0df2f05..0dcc6e0d0292 100644 --- a/doc/articles/features/progressring.md +++ b/doc/articles/features/progressring.md @@ -48,4 +48,4 @@ To use the MUX `ProgressRing` on non-Skia targets and WUX `ProgressRing` on Skia ``` -*** +--- diff --git a/doc/articles/features/routed-events.md b/doc/articles/features/routed-events.md index 5a172ee71e3f..319f469b0e63 100644 --- a/doc/articles/features/routed-events.md +++ b/doc/articles/features/routed-events.md @@ -10,7 +10,7 @@ This article covers some of the finer technical details of Uno Platform's routed ## Event Bubbling Flow -``` plain +```plain [1]---------------------+ | An event is fired | +--------+--------------+ @@ -80,7 +80,7 @@ platform propagate the events. But this will cause more interop between managed You can control which events are bubbling in managed code by using the `EventsBubblingInManagedCode` dependency property. The value of this property is inherited to children. Example: -``` csharp +```csharp // Make sure PointerPressed and PointerReleased are always bubbling in // managed code when they are originating from myControl and its children. myControl.EventsBubblingInManagedCode = diff --git a/doc/articles/features/svg.md b/doc/articles/features/svg.md index 5639a79c72a2..9b940d537206 100644 --- a/doc/articles/features/svg.md +++ b/doc/articles/features/svg.md @@ -42,7 +42,7 @@ To use SVG, install the following NuGet packages into the iOS, macOS, Mac Cataly Add the SVG Image to the app project and make sure that the build action is set to Content. -*** +--- Now, you can display the SVG image in an `Image` by referencing it from the `Source` property. For example: diff --git a/doc/articles/features/using-skia-desktop.md b/doc/articles/features/using-skia-desktop.md index e98aad7d1385..e37ca6466294 100644 --- a/doc/articles/features/using-skia-desktop.md +++ b/doc/articles/features/using-skia-desktop.md @@ -41,7 +41,7 @@ This builder allows us to configure the SkiaHost and setup which platforms will [!include[linux-setup](../includes/additional-linux-setup-inline.md)] -*** +--- ### Troubleshooting OpenGL integration diff --git a/doc/articles/features/using-skia-gtk.md b/doc/articles/features/using-skia-gtk.md index afeca42938e8..999901e84c99 100644 --- a/doc/articles/features/using-skia-gtk.md +++ b/doc/articles/features/using-skia-gtk.md @@ -31,7 +31,7 @@ Follow the getting started guide for [VS Code](xref:Uno.GetStarted.vscode) or [V [!include[macos-setup](../includes/additional-macos-setup-inline.md)] -*** +--- Once done, you can create a new app with [`dotnet new`](xref:Uno.GetStarted.dotnet-new) using: diff --git a/doc/articles/features/using-the-uno-sdk.md b/doc/articles/features/using-the-uno-sdk.md index f7715dbf0e2c..23c82b73ea40 100644 --- a/doc/articles/features/using-the-uno-sdk.md +++ b/doc/articles/features/using-the-uno-sdk.md @@ -129,7 +129,7 @@ Here are the supported properties: | `WinAppSdkVersion` | [Microsoft.WindowsAppSDK](https://www.nuget.org/packages/Microsoft.WindowsAppSDK) | Provides project templates and tools for building Windows applications. | | `WindowsCompatibilityVersion` | [Microsoft.Windows.Compatibility](https://www.nuget.org/packages/Microsoft.Windows.Compatibility) | Enables Windows desktop apps to use .NET Core by providing access to additional Windows APIs. | -*** +--- Those properties can be set from `Directory.Build.props` or may be set in the `csproj` file for your project. diff --git a/doc/articles/features/web-authentication-broker.md b/doc/articles/features/web-authentication-broker.md index dc2b650942e9..3a4f21fa9cca 100644 --- a/doc/articles/features/web-authentication-broker.md +++ b/doc/articles/features/web-authentication-broker.md @@ -26,7 +26,7 @@ uid: Uno.Features.WAB * You **MUST** declare an activity inheriting from `WebAuthenticationBrokerActivityBase` in the Android head. Note the `[Activity]` attribute needs to include `Exported = true` if you are targeting Android 12. - ``` csharp + ```csharp // Android: add this class near the MainActivity, in the head project [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)] [IntentFilter( @@ -52,7 +52,7 @@ uid: Uno.Features.WAB For special needs, it is possible to create a custom implementation of the Web Authentication Broker by using the `[ApiExtension]` mechanism of Uno and implementing the `IWebAuthenticationBrokerProvider` interface: -``` csharp +```csharp [assembly: ApiExtension(typeof(MyNameSpace.MyBrokerImplementation), typeof(Uno.AuthenticationBroker.IWebAuthenticationBrokerProvider))] public class MyBrokerImplementation : Uno.AuthenticationBroker.IWebAuthenticationBrokerProvider @@ -74,7 +74,7 @@ On WebAssembly, it is possible to use an in-application ` - +> [!Video https://www.youtube-nocookie.com/embed/sK9IbkBAXIo] ## Platform-specific diff --git a/doc/articles/features/working-with-themes.md b/doc/articles/features/working-with-themes.md index 64407bac84a8..6b1f2acd42ea 100644 --- a/doc/articles/features/working-with-themes.md +++ b/doc/articles/features/working-with-themes.md @@ -8,16 +8,7 @@ Uno Platform offers fine-grained customization of typography, corner radius, and These themes affect both the `Background` and `Foreground` colors to accommodate user preferences. All of the color modes mentioned above are available for use in your app. This guide will detail how to change the system theme setting, make your app receive change notifications for it, and react to those changes at runtime. -
- -
+> [!Video https://www.youtube-nocookie.com/embed/FXHUiHjgAQ4] ## Enable dark mode diff --git a/doc/articles/features/working-with-xaml-hot-reload.md b/doc/articles/features/working-with-xaml-hot-reload.md index bbecb9475325..370ddc6b1b2e 100644 --- a/doc/articles/features/working-with-xaml-hot-reload.md +++ b/doc/articles/features/working-with-xaml-hot-reload.md @@ -40,7 +40,7 @@ Hot Reload features vary between platforms and IDE, you can check below the list - Wait a few seconds for the hot reload engine to become available (see our troubleshooting tips below) - Make changes to your XAML or C# code, then save your file -*** +--- > [!IMPORTANT] > Using [.NET 8](https://dotnet.microsoft.com/download/dotnet/8.0) or later (`net8.0` in the `TargetFrameworks` property) is required for Hot Reload to be available when your solution contains iOS, Android, Mac Catalyst, or WebAssembly project heads. On Windows, [Visual Studio 17.8](https://visualstudio.microsoft.com/vs) or later is required. @@ -85,7 +85,7 @@ Mobile targets are currently using a limited version of XAML Hot Reload and do n Hot Reload is supported by Visual Studio for WinAppSDK and provides support in unpackaged deployment mode. -*** +--- ## Troubleshooting diff --git a/doc/articles/get-started-rider.md b/doc/articles/get-started-rider.md index 2aff868fb5c1..a249a85c9c61 100644 --- a/doc/articles/get-started-rider.md +++ b/doc/articles/get-started-rider.md @@ -48,7 +48,7 @@ You may need to follow additional directions, depending on your development envi [!include[linux-setup](includes/additional-linux-setup-inline.md)] -*** +--- ## Next Steps diff --git a/doc/articles/get-started-vs-2022.md b/doc/articles/get-started-vs-2022.md index 68159fbee7ca..efae38b38c7e 100644 --- a/doc/articles/get-started-vs-2022.md +++ b/doc/articles/get-started-vs-2022.md @@ -59,7 +59,7 @@ To setup your environment for WSL: [!include[linux-setup](includes/additional-linux-setup-inline.md)] -*** +--- ## Next Steps diff --git a/doc/articles/get-started-vscode.md b/doc/articles/get-started-vscode.md index 3364de7f8277..b0789c6e12cb 100644 --- a/doc/articles/get-started-vscode.md +++ b/doc/articles/get-started-vscode.md @@ -49,7 +49,7 @@ You may need to follow additional directions, depending on your development envi [!include[linux-setup](includes/additional-linux-setup-inline.md)] -*** +--- ## Next Steps diff --git a/doc/articles/get-started.md b/doc/articles/get-started.md index e0146735d4f7..3913d4c9557a 100644 --- a/doc/articles/get-started.md +++ b/doc/articles/get-started.md @@ -88,7 +88,7 @@ To help you choose the appropriate IDE, the following table shows the compatibil - † Rider [does not support .NET Android](https://rider-support.jetbrains.com/hc/en-us/articles/360000557259--Obsolete-How-to-develop-Xamarin-Android-applications-on-Linux-with-Rider) on Linux at this time. - †† `net8.0-browserwasm` and `net8.0-desktop` are not available in Rider yet (Please [upvote this issue](https://aka.platform.uno/rider-desktop-wasm-support)). -*** +--- ## Questions diff --git a/doc/articles/getting-started/counterapp/get-started-counter.md b/doc/articles/getting-started/counterapp/get-started-counter.md index ba5cc0e39d97..1bb70ef56c98 100644 --- a/doc/articles/getting-started/counterapp/get-started-counter.md +++ b/doc/articles/getting-started/counterapp/get-started-counter.md @@ -68,4 +68,4 @@ Use C# Markup for layout and MVVM for state management
-*** +--- diff --git a/doc/articles/getting-started/getting-started-tests.md b/doc/articles/getting-started/getting-started-tests.md index 0bd96437b9d1..f2e6198f3345 100644 --- a/doc/articles/getting-started/getting-started-tests.md +++ b/doc/articles/getting-started/getting-started-tests.md @@ -6,7 +6,7 @@ uid: Uno.Authoring.Tests This tutorial will guide you through the process of creating an [Uno application along with tests](xref:Uno.GettingStarted.UsingWizard#10-testing). > [!NOTE] -> Make sure to setup your environment first by [following our instructions](xref:Uno.GetStarted.vs2022). +> Make sure to setup your environment first by [following our instructions](xref:Uno.GetStarted). ## 1. Exploring the Solution diff --git a/doc/articles/getting-started/wizard/using-wizard.md b/doc/articles/getting-started/wizard/using-wizard.md index ecc8dd44b62b..65b8cc49b0c5 100644 --- a/doc/articles/getting-started/wizard/using-wizard.md +++ b/doc/articles/getting-started/wizard/using-wizard.md @@ -4,16 +4,7 @@ uid: Uno.GettingStarted.UsingWizard # The Uno Platform Solution Template -
- -
+> [!Video https://www.youtube-nocookie.com/embed/s_QbZbPIeWY] ## Solution Structure diff --git a/doc/articles/guides/hotswap-app-language.md b/doc/articles/guides/hotswap-app-language.md index 242d55088170..83e2b4d8e109 100644 --- a/doc/articles/guides/hotswap-app-language.md +++ b/doc/articles/guides/hotswap-app-language.md @@ -11,7 +11,7 @@ This guide will walk you through the necessary steps for changing app language a ## Prerequisites -Make sure to setup your environment for Uno Platform. Follow [Get Started on Visual Studio 2022](../../articles/get-started-vs-2022.md), [Get Started on VS Code](../../articles/get-started-vscode.md), or [Get Started on JetBrains Rider](../../articles/get-started-rider.md). +Make sure to setup your environment first by [following our instructions](xref:Uno.GetStarted). ## Steps to change application language at runtime @@ -133,6 +133,6 @@ See the completed sample on GitHub: [RuntimeCultureSwitching](https://github.com * [Globalization and localization](https://learn.microsoft.com/windows/uwp/design/globalizing/globalizing-portal) -*** +--- [!include[getting-help](../includes/getting-help.md)] diff --git a/doc/articles/guides/open-id-connect.md b/doc/articles/guides/open-id-connect.md index 4ca07c581889..cd3cd0139f22 100644 --- a/doc/articles/guides/open-id-connect.md +++ b/doc/articles/guides/open-id-connect.md @@ -220,7 +220,7 @@ private async void SignOut_Clicked(object sender, RoutedEventArgs e) > On WebAssembly, it's important to configure the linker to prevent the removal of some important part of the *OIDC Connect* client library: > `LinkerConfig.xml`: > -> ``` xml +> ```xml > > > diff --git a/doc/articles/guides/raspberry-pi/raspberry-pi-intro.md b/doc/articles/guides/raspberry-pi/raspberry-pi-intro.md index ce09adb87f7e..96ca2700203b 100644 --- a/doc/articles/guides/raspberry-pi/raspberry-pi-intro.md +++ b/doc/articles/guides/raspberry-pi/raspberry-pi-intro.md @@ -82,7 +82,9 @@ However, I've created a single line install script for .NET 7 on the Raspberry P Run the following command; -`wget -O - https://raw.githubusercontent.com/pjgpetecodes/dotnet7pi/main/install.sh | sudo bash` +```bash +wget -O - https://raw.githubusercontent.com/pjgpetecodes/dotnet7pi/main/install.sh | sudo bash +``` You can see the contents of this .NET installation script in [install.sh on GitHub](https://github.com/pjgpetecodes/dotnet7pi/blob/main/install.sh) diff --git a/doc/articles/includes/additional-linux-setup-inline.md b/doc/articles/includes/additional-linux-setup-inline.md index e3f157d8e591..6ec3e77c4993 100644 --- a/doc/articles/includes/additional-linux-setup-inline.md +++ b/doc/articles/includes/additional-linux-setup-inline.md @@ -30,21 +30,10 @@ sudo pacman -S dotnet-targeting-pack dotnet-sdk dotnet-host dotnet-runtime python ninja gn aspnet-runtime dbus libxrandr ``` -*** +--- You may also need to [install the Microsoft fonts](https://wiki.archlinux.org/title/Microsoft_fonts) manually. If you are using Windows Subsystem for Linux (WSL), you can find specific instructions in the following video: -
- -
- -*** +> [!Video https://www.youtube-nocookie.com/embed/GGszH8PDf-w] diff --git a/doc/articles/includes/use-uno-check-inline-noheader.md b/doc/articles/includes/use-uno-check-inline-noheader.md index d56ede3d7b38..5fa0f0bdd44a 100644 --- a/doc/articles/includes/use-uno-check-inline-noheader.md +++ b/doc/articles/includes/use-uno-check-inline-noheader.md @@ -10,6 +10,6 @@ [!include[use-uno-check](use-uno-check-inline-linux-noheader.md)] -*** +--- You can find additional information about [**uno-check here**](xref:UnoCheck.UsingUnoCheck). diff --git a/doc/articles/interop/MSAL.md b/doc/articles/interop/MSAL.md index 42d809a98155..f8de291fb168 100644 --- a/doc/articles/interop/MSAL.md +++ b/doc/articles/interop/MSAL.md @@ -20,7 +20,7 @@ To use MSAL into an Uno project, follow the following steps: 3. Change the `IPublicCLientApplication` initialization to add a call to `.WithUnoHelpers()` like this: - ``` csharp + ```csharp IPublicClientApplication _app = PublicClientApplicationBuilder.Create(clientId) [...] .WithUnoHelpers() // Add this line before the .Build() @@ -29,7 +29,7 @@ To use MSAL into an Uno project, follow the following steps: 4. Where you are using the *Interactive* mode (`_app.AcquireTokenInteractive`), add another call to `.WithUnoHelpers()` like this: - ``` csharp + ```csharp var authResult = await _app.AcquireTokenInteractive(scopes) .WithPrompt(Prompt.SelectAccount) [...] diff --git a/doc/articles/interop/wasm-javascript-1.md b/doc/articles/interop/wasm-javascript-1.md index 7873f755154a..5813ca76cc68 100644 --- a/doc/articles/interop/wasm-javascript-1.md +++ b/doc/articles/interop/wasm-javascript-1.md @@ -22,7 +22,7 @@ The Uno Bootstrapper can automatically embed any asset and deploy them with the 1. **JavaScript files** should be in the `WasmScripts` folder: they will be copied to the output folder and loaded automatically by the bootstrapper when the page loads. **They must be marked with the `EmbeddedResources` build action**: - ``` xml + ```xml @@ -32,7 +32,7 @@ The Uno Bootstrapper can automatically embed any asset and deploy them with the 2. **CSS Style files** should be in the `WasmCSS` folder: they will be copied to the output folder and referenced in the *HTML head* of the application. **They must be marked with the `EmbeddedResources` build action**. - ``` xml + ```xml @@ -42,7 +42,7 @@ The Uno Bootstrapper can automatically embed any asset and deploy them with the 3. **Asset files** should be marked with the `Content` build action in the app. The file will be copied to the output folder and will preserve the same relative path. - ``` xml + ```xml @@ -60,7 +60,7 @@ The [philosophy of Uno](../concepts/overview/philosophy-of-uno.md) is to rely on That also means that it is possible to control how this element is created. By default it is a `
`, but it can be changed in the constructor by providing the `htmlTag` parameter to the one required. For example: -``` csharp +```csharp public sealed partial class MyDivControl : FrameworkElement { public MyDivControl() // will create a
HTML element (by default) @@ -94,7 +94,7 @@ Here is a list of helper methods used to facilitate the integration with the HTM * The extension method `element.SetCssStyle()` can be used to set a CSS Style on the HTML element. Example: - ``` csharp + ```csharp // Setting only one CSS style this.SetCssStyle("text-shadow", "2px 2px red"); @@ -104,7 +104,7 @@ Here is a list of helper methods used to facilitate the integration with the HTM * The `element.ClearCssStyle()` extension method can be used to set CSS styles to their default values. Example: - ``` csharp + ```csharp // Reset text-shadow style to its default value this.ClearCssStyle("text-shadow"); @@ -114,7 +114,7 @@ Here is a list of helper methods used to facilitate the integration with the HTM * The `element.SetHtmlAttribute()` and `element.ClearHtmlAttribute()` extension methods can be used to set HTML attributes on the element: - ``` csharp + ```csharp // Set the "href" attribute of an element this.SetHtmlAttribute("href", "#section2"); @@ -130,7 +130,7 @@ Here is a list of helper methods used to facilitate the integration with the HTM * The `element.SetCssClass()` and `element.UnsetCssClass()` extension methods can be used to add or remove CSS classes to the HTML Element: - ``` csharp + ```csharp // Add the class to element this.SetCssClass("warning"); @@ -148,7 +148,7 @@ Here is a list of helper methods used to facilitate the integration with the HTM * The `element.SetHtmlContent()` extension method can be used to set arbitrary HTML content as child of the control. - ``` csharp + ```csharp this.SetHtmlContent("

Welcome to Uno Platform!

"); ``` @@ -160,7 +160,7 @@ Here is a list of helper methods used to facilitate the integration with the HTM Whenever there's a need to invoke a JavaScript code in the browser, the `Uno.Foundation.WebAssemblyRuntime` static class should be used. There is also helpers you can call as *extension methods* on the elements. -``` csharp +```csharp // Invoke javascript synchronously WebAssemblyRuntime.InvokeJS("alert(\"It works!\");"); @@ -196,7 +196,7 @@ There's 2 ways to *callback* to managed C# code from JavaScript: 1. Use Mono to wrap a dotnet static method into a JavaScript function like this:JavaScript_: - ``` javascript + ```javascript // Register the method wrapper (should be cached) const sumMethod = Module.mono_bind_static_method( "[Assembly.Name] Fully.Qualified.ClassType:SumMethod"); @@ -206,7 +206,7 @@ There's 2 ways to *callback* to managed C# code from JavaScript: *C#*: - ``` csharp + ```csharp // In assembly "Assembly.Name" namespace Fully.Qualified { diff --git a/doc/articles/interop/wasm-javascript-2.md b/doc/articles/interop/wasm-javascript-2.md index 5970495d1f44..5a3ec3722a1f 100644 --- a/doc/articles/interop/wasm-javascript-2.md +++ b/doc/articles/interop/wasm-javascript-2.md @@ -201,7 +201,7 @@ Let's create an app to integrate a Syntax Highlighter named [`PrismJS`](https:// 1. First, there is a requirement for _PrismJS_ to set the `white-space` style at a specific value, as [documented here](https://github.com/PrismJS/prism/issues/1237#issuecomment-369846817). An easy way to do this is to set in directly in the constructor like this: - ``` csharp + ```csharp public PrismJsView() { // This is required to set to style for PrismJS to works well @@ -212,7 +212,7 @@ Let's create an app to integrate a Syntax Highlighter named [`PrismJS`](https:// 2. Now, we need to create an `UpdateDisplay()` method, used to generate HTML each time there's a new version to update. Here's the code for the method to add in the `PrismJsView` class: - ``` csharp + ```csharp private void UpdateDisplay(string oldLanguage = null, string newLanguage = null) { string javascript = $@" @@ -246,7 +246,7 @@ Let's create an app to integrate a Syntax Highlighter named [`PrismJS`](https:// 3. Change `CodeChanged()` and `LanguageChanged()` to call the new `UpdateDisplay()` method: - ``` csharp + ```csharp private static void CodeChanged(DependencyObject dependencyobject, DependencyPropertyChangedEventArgs args) { (dependencyobject as PrismJsView)?.UpdateDisplay(); @@ -259,7 +259,7 @@ Let's create an app to integrate a Syntax Highlighter named [`PrismJS`](https:// 4. We also need to update the result when the control is loaded in the DOM. So we need to change the constructor again like this: - ``` csharp + ```csharp public PrismJsView() { // This is required to set to style for PrismJS to works well diff --git a/doc/articles/interop/wasm-javascript-3.md b/doc/articles/interop/wasm-javascript-3.md index 121513d8f25e..a979348a7ba6 100644 --- a/doc/articles/interop/wasm-javascript-3.md +++ b/doc/articles/interop/wasm-javascript-3.md @@ -33,7 +33,7 @@ An easy way to achieve this is to add JavaScript code to load the CSS file direc 1. Create a new _JavaScript_ file `flatpickrloader.js` in the `WasmScripts` folder of the `.Wasm` project: - ``` javascript + ```javascript (function () { const head = document.getElementsByTagName("head")[0]; @@ -49,7 +49,7 @@ An easy way to achieve this is to add JavaScript code to load the CSS file direc 2. Set the file as `Embedded Resource`: - ``` xml + ```xml @@ -63,7 +63,7 @@ An easy way to achieve this is to add JavaScript code to load the CSS file direc 1. Create a `FlatpickrView.cs` class in the `[MyApp]` project like this: - ``` csharp + ```csharp using System; using System.Globalization; using Windows.UI; @@ -134,7 +134,7 @@ An easy way to achieve this is to add JavaScript code to load the CSS file direc 2. Change the `MainPage.xaml` in the `[MyApp]` project like this: - ``` xml + ```xml
-*** +--- diff --git a/doc/articles/net-version-support.md b/doc/articles/net-version-support.md index cd779f7529c3..371c2cc36fe8 100644 --- a/doc/articles/net-version-support.md +++ b/doc/articles/net-version-support.md @@ -43,4 +43,4 @@ For Xamarin.Android, Xamarin.iOS, and Xamarin.macOS, the supported versions depe For UWP, it is possible force a higher version of C# using `LangVersion` in the platform `csproj` (eg `12.0`), but some language features may not work properly, such as those that depend on compiler-checked types (eg array slicing, `init`-only properties) or on runtime support (eg default interface implementations). Using [PolySharp](https://www.nuget.org/packages/PolySharp) can help enabling some more recent C# features. -*** +--- diff --git a/doc/articles/platform-specific-csharp.md b/doc/articles/platform-specific-csharp.md index 8f92fc6544fc..cefc551a979c 100644 --- a/doc/articles/platform-specific-csharp.md +++ b/doc/articles/platform-specific-csharp.md @@ -6,16 +6,7 @@ uid: Uno.Development.PlatformSpecificCSharp Uno Platform allows you to reuse views and business logic across platforms. Sometimes though, you may want to write different code per platform. You may need to access platform-specific native APIs and 3rd-party libraries, or want your app to look and behave differently depending on the platform. -
- -
+> [!Video https://www.youtube-nocookie.com/embed/WgKNG8Yjbc4] This guide covers multiple approaches to managing per-platform code in C#. See [this guide for managing per-platform XAML](xref:Uno.Development.PlatformSpecificXaml). diff --git a/doc/articles/platform-specific-xaml.md b/doc/articles/platform-specific-xaml.md index 695135f4e02e..d550b544b799 100644 --- a/doc/articles/platform-specific-xaml.md +++ b/doc/articles/platform-specific-xaml.md @@ -6,16 +6,7 @@ uid: Uno.Development.PlatformSpecificXaml Uno allows you to reuse views and business logic across platforms. Sometimes though you may want to write different code per platform, either because you need to access platform-specific native APIs and 3rd-party libraries, or because you want your app to look and behave differently depending on the platform. -
- -
+> [!Video https://www.youtube-nocookie.com/embed/IZt-ymNZpZw] This guide covers multiple approaches to managing per-platform markup in XAML. See [this guide for managing per-platform C#](platform-specific-csharp.md). diff --git a/doc/articles/signalr.md b/doc/articles/signalr.md index 12d960f7a7c7..8935eb232150 100644 --- a/doc/articles/signalr.md +++ b/doc/articles/signalr.md @@ -21,7 +21,7 @@ uid: Uno.Development.SignalR 3. In your `Startup.cs` file, add your `SignalR` service and a `CORS policy` to the `ConfigureServices` method. - ``` csharp + ```csharp public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); @@ -39,7 +39,7 @@ uid: Uno.Development.SignalR 4. In your `Configure` method, add your CORS policy and `Hubs` endpoint - ``` csharp + ```csharp app.UseCors("CorsPolicy"); app.UseEndpoints(endpoints => diff --git a/doc/articles/splash-screen.md b/doc/articles/splash-screen.md index bf1576534ada..d16d9dd5b3a6 100644 --- a/doc/articles/splash-screen.md +++ b/doc/articles/splash-screen.md @@ -137,7 +137,7 @@ While the new templates simplify adding a splash screen, this article covers how * Add your image path to the `Image View` - ``` xml + ```xml ``` diff --git a/doc/articles/uno-development/Uno-UI-Debugging-Android-Studio.md b/doc/articles/uno-development/Uno-UI-Debugging-Android-Studio.md index 8939d0a8a8ce..eeab223d069a 100644 --- a/doc/articles/uno-development/Uno-UI-Debugging-Android-Studio.md +++ b/doc/articles/uno-development/Uno-UI-Debugging-Android-Studio.md @@ -15,25 +15,25 @@ The vast majority of the time, development in Uno.UI should be done in C#. Howev * Open the build.gradle file located in the 'app' folder. (Note there are two build.gradle files.) * Add the following lines to the build file: -```gradle -sourceSets { - main.java.srcDirs += 'C://Uno.UI.BindingHelper.Android/Uno/UI' - } -``` + ```gradle + sourceSets { + main.java.srcDirs += 'C://Uno.UI.BindingHelper.Android/Uno/UI' + } + ``` -![gradle](assets/debugging-android-studio/Gradle-changes.png) + ![gradle](assets/debugging-android-studio/Gradle-changes.png) * Press 'Sync Now' to update the project. * You should now see Uno.UI files in the Project tab. (Don't worry about red squiggles.) -![Project-files](assets/debugging-android-studio/Project-files.png) + ![Project-files](assets/debugging-android-studio/Project-files.png) ## Debugging * Run the app you wish to debug, which should be using a local debug build of Uno.UI. * In Android Studio, select Run->Attach debugger to Android process. Select your app. (Toggle on 'Show all processes' if it's not visible.) -![Attach-to-process](assets/debugging-android-studio/Attach-to-process.png) + ![Attach-to-process](assets/debugging-android-studio/Attach-to-process.png) * You should now be able to debug and place breakpoints in Uno.UI code. * Android Studio supports a similar feature set to Visual Studio. Here are some of the basics: @@ -42,7 +42,7 @@ sourceSets { * Add 'watch' values. * Add conditions and logging to breakpoints. -![Debugging](assets/debugging-android-studio/Debugging.png) + ![Debugging](assets/debugging-android-studio/Debugging.png) * One powerful feature of debugging Android code is the level of integration with framework code. You should be able to see not only the native stack trace, but even local variable values in framework methods (e.g. ViewGroup.dispatchTouchEvent().) * Note that Android Studio may prompt you to download source code and debug symbols: this will fail unless you started Android Studio with Administrator privileges (right-click in Start menu + 'Run as Administrator'). diff --git a/doc/articles/uno-development/Uno-UI-Layouting-Android.md b/doc/articles/uno-development/Uno-UI-Layouting-Android.md index 970d1becd822..c49d2901c751 100644 --- a/doc/articles/uno-development/Uno-UI-Layouting-Android.md +++ b/doc/articles/uno-development/Uno-UI-Layouting-Android.md @@ -8,7 +8,7 @@ The layouting cycle (measure and arrange) in Uno on Android involves a complex i methods. These interactions are summarized in the diagram below. This information is primarily intended to help when debugging Uno, but may be interesting to anyone curious as to how native Android methods are connected to the UWP contract exposed by Uno. -``` mermaid +```mermaid flowchart TD %% Android layout flow diff --git a/doc/articles/uno-development/Uno-UI-Layouting-iOS.md b/doc/articles/uno-development/Uno-UI-Layouting-iOS.md index 8fa49c7b92a9..1c2d94c2b1b9 100644 --- a/doc/articles/uno-development/Uno-UI-Layouting-iOS.md +++ b/doc/articles/uno-development/Uno-UI-Layouting-iOS.md @@ -6,7 +6,7 @@ uid: Uno.Contributing.LayoutingiOS The layouting cycle (measure and arrange) in Uno on iOS is a mingling of native layouting logic and logic in managed code. These interactions are summarized in the diagram below. This information is primarily intended to help when debugging Uno, but may also be useful when attempting to incorporate non-Uno views into the visual tree. -``` mermaid +```mermaid flowchart TD %% ios layout flow @@ -97,5 +97,4 @@ flowchart TD native-legend{{"Native (iOS) methods"}} application-legend[["Application/Framework implementation"]] end - ``` diff --git a/doc/articles/uno-development/building-uno-macos.md b/doc/articles/uno-development/building-uno-macos.md index d6600c4d2eb8..72c3be78041d 100644 --- a/doc/articles/uno-development/building-uno-macos.md +++ b/doc/articles/uno-development/building-uno-macos.md @@ -22,7 +22,7 @@ Support for building the `Uno.UI` solution is still somewhat unstable, this is a * If NuGet restore fails when building from the IDE, or if it gets stuck for some other reason, try building from the command line. Open a terminal session in the `uno/src` folder and use the following command: - ``` shell + ```shell msbuild /m /r SamplesApp/SamplesApp.macOS/SamplesApp.macOS.csproj ``` diff --git a/doc/articles/uno-development/docfx.md b/doc/articles/uno-development/docfx.md index 813f42b602d0..bb3e2cb37ada 100644 --- a/doc/articles/uno-development/docfx.md +++ b/doc/articles/uno-development/docfx.md @@ -69,7 +69,7 @@ Markdown: `Windows.UI.Xaml.FrameworkElement` -*** +--- ``` Html output: @@ -82,7 +82,7 @@ Html output: `Windows.UI.Xaml.FrameworkElement` -*** +--- ### TOC checker script diff --git a/doc/articles/uno-development/listviewbase-internals.md b/doc/articles/uno-development/listviewbase-internals.md index a259ca3511b1..13b8221e3f09 100644 --- a/doc/articles/uno-development/listviewbase-internals.md +++ b/doc/articles/uno-development/listviewbase-internals.md @@ -16,10 +16,10 @@ Before reading it, you should first read the documentation of [ListViewBase aime Other important features of `ListView`: - * selection, including multiple selection - * support for 'observable' collections, allowing items to be inserted and deleted without completely resetting the state of the list, and (on some platforms) with an animation of the item being added or removed - * item groups (with optional 'sticky' group headers) - * drag and drop to reorder items in the list +- selection, including multiple selection +- support for 'observable' collections, allowing items to be inserted and deleted without completely resetting the state of the list, and (on some platforms) with an animation of the item being added or removed +- item groups (with optional 'sticky' group headers) +- drag and drop to reorder items in the list ## Platform-specific implementations of `ListView` @@ -33,12 +33,12 @@ The managed ListView implementation is newer and lacks some features that are su `ListView` can scroll either vertically or horizontally, and the layouting logic is written as much as possible to reuse the same code for both orientations. Accordingly, certain terms are used throughout the code to avoid using orientation-specific terms like 'width' and 'height'. (These usages are probably unique to the Uno codebase.) The main terms are the following: -* Extent: Size along the dimension parallel to scrolling. The equivalent of 'Height' if scrolling is vertical, or 'Width' otherwise. -* Breadth: Size along the dimension orthogonal to scrolling. The equivalent of 'Width' if scrolling is vertical, or 'Height' otherwise. -* Start: The edge of the element nearest to the top of the content panel, ie 'Top' or 'Left' depending whether scrolling is vertical or horizontal. -* End: The edge of the element nearest to the bottom of the content panel, ie 'Bottom' or 'Right' depending whether scrolling is vertical or horizontal. -* Leading: When scrolling, the edge that is coming into view. ie, if the scrolling forward in a vertical orientation, the bottom edge. -* Trailing: When scrolling, the edge that is disappearing from view. +- Extent: Size along the dimension parallel to scrolling. The equivalent of 'Height' if scrolling is vertical, or 'Width' otherwise. +- Breadth: Size along the dimension orthogonal to scrolling. The equivalent of 'Width' if scrolling is vertical, or 'Height' otherwise. +- Start: The edge of the element nearest to the top of the content panel, ie 'Top' or 'Left' depending whether scrolling is vertical or horizontal. +- End: The edge of the element nearest to the bottom of the content panel, ie 'Bottom' or 'Right' depending whether scrolling is vertical or horizontal. +- Leading: When scrolling, the edge that is coming into view. ie, if the scrolling forward in a vertical orientation, the bottom edge. +- Trailing: When scrolling, the edge that is disappearing from view. ### Android and iOS ListViews in detail @@ -50,9 +50,9 @@ Architecturally, the Android and iOS implementations share a similar high-level [This diagram](../controls/ListViewBase.md#difference-in-the-visual-tree) shows how the `NativeListViewBase` view is incorporated into the visual tree, and the resulting difference from UWP. The key differences are: -* the scrolling container is the `NativeListViewBase` itself, not the `ScrollViewer`. Thus the `ItemsPresenter` is **outside** the scrollable region. Additionally, there's no ScrollContentPresenter; instead there's a ListViewBaseScrollContentPresenter. (It was implemented this way back when ScrollContentPresenter inherited directly from the native scroll container.) -* the `ItemsStackPanel` (or `ItemsWrapGrid`) is not actually present in the visual tree. These items panels are created, and their configured values (eg `Orientation`) are used to set the behavior of the list, but they are not actually loaded into the visual hierarchy or measured and arranged. They just act as a facade for the native layouter. -* the Header and Footer, if present, are managed by the native list on Android and iOS, whereas on UWP they're outside the ItemsStackPanel/ItemsWrapGrid. +- the scrolling container is the `NativeListViewBase` itself, not the `ScrollViewer`. Thus the `ItemsPresenter` is **outside** the scrollable region. Additionally, there's no ScrollContentPresenter; instead there's a ListViewBaseScrollContentPresenter. (It was implemented this way back when ScrollContentPresenter inherited directly from the native scroll container.) +- the `ItemsStackPanel` (or `ItemsWrapGrid`) is not actually present in the visual tree. These items panels are created, and their configured values (eg `Orientation`) are used to set the behavior of the list, but they are not actually loaded into the visual hierarchy or measured and arranged. They just act as a facade for the native layouter. +- the Header and Footer, if present, are managed by the native list on Android and iOS, whereas on UWP they're outside the ItemsStackPanel/ItemsWrapGrid. Much of the time, these are implementation details that are invisible to the end user. In certain cases they can have a visible impact. They're useful to be aware of when working on `ListView` bugs. @@ -117,8 +117,8 @@ The measuring logic for iOS' `ListView` makes an initial guess for the size of e On WASM, Skia, and macOS, `ListViewBase` uses a shared implementation that's dubbed 'managed' because it doesn't rely upon an external native control. The visible implementation details of the managed `ListView` are much closer to UWP. Specifically: -* the items panel is a 'real' panel which hosts the ListViewItems as its children. The size of the panel reflects the estimated total size based on the number of items, as determined by the list. -* the `ScrollViewer` in the ListView's control template is a 'real' `ScrollViewer`, ie it is in fact responsible for scrolling. +- the items panel is a 'real' panel which hosts the ListViewItems as its children. The size of the panel reflects the estimated total size based on the number of items, as determined by the list. +- the `ScrollViewer` in the ListView's control template is a 'real' `ScrollViewer`, ie it is in fact responsible for scrolling. The internals of the managed `ListView` were originally implemented independently of the UWP source, but have been gradually converging on the internals of UWP. diff --git a/doc/articles/uno-development/troubleshooting-memory-issues.md b/doc/articles/uno-development/troubleshooting-memory-issues.md index f8c8de84fe11..3fa2f4016df0 100644 --- a/doc/articles/uno-development/troubleshooting-memory-issues.md +++ b/doc/articles/uno-development/troubleshooting-memory-issues.md @@ -16,66 +16,66 @@ Starting from [Uno.Wasm.Bootstrap](https://github.com/unoplatform/Uno.Wasm.Boots 1. Install the `Uno.Core` NuGet package; 2. In your application, as early as possible in the initialization (generally in the `App.cs` or `App.xaml.cs` constructor), add and call the following method: -``` csharp -using Uno.UI.DataBinding; -using Uno.UI.DataBinding; -using System.Threading.Tasks; -using Uno.Extensions; -using Uno.Logging; - -// .... -private void EnableViewsMemoryStatistics() -{ - // - // Call this method to enable Views memory tracking. - // Make sure that you've added the following : - // - // builder.AddFilter("Uno.UI.DataBinding", LogLevel.Information ); - // - // in the logger settings, so that the statistics are showing up. - // - - var unused = Windows.UI.Xaml.Window.Current.Dispatcher.RunAsync( - CoreDispatcherPriority.Normal, - async () => - { - BinderReferenceHolder.IsEnabled = true; - - while (true) - { - await Task.Delay(1500); - - try + ```csharp + using Uno.UI.DataBinding; + using Uno.UI.DataBinding; + using System.Threading.Tasks; + using Uno.Extensions; + using Uno.Logging; + + // .... + private void EnableViewsMemoryStatistics() { - BinderReferenceHolder.LogReport(); - - var inactiveInstances = BinderReferenceHolder.GetInactiveViewBinders(); - - // Force the variable to be kept by the linker so we can see it with the debugger. - // Put a breakpoint on this line to dig into the inactive views. - inactiveInstances.ToString(); - } - catch (Exception ex) - { - this.Log().Error("Report generation failed", ex); + // + // Call this method to enable Views memory tracking. + // Make sure that you've added the following : + // + // builder.AddFilter("Uno.UI.DataBinding", LogLevel.Information ); + // + // in the logger settings, so that the statistics are showing up. + // + + var unused = Windows.UI.Xaml.Window.Current.Dispatcher.RunAsync( + CoreDispatcherPriority.Normal, + async () => + { + BinderReferenceHolder.IsEnabled = true; + + while (true) + { + await Task.Delay(1500); + + try + { + BinderReferenceHolder.LogReport(); + + var inactiveInstances = BinderReferenceHolder.GetInactiveViewBinders(); + + // Force the variable to be kept by the linker so we can see it with the debugger. + // Put a breakpoint on this line to dig into the inactive views. + inactiveInstances.ToString(); + } + catch (Exception ex) + { + this.Log().Error("Report generation failed", ex); + } + } + } + ); } - } - } - ); -} -``` + ``` - You'll also need to add the following logger filter: + You'll also need to add the following logger filter: -```csharp -builder.AddFilter("Uno.UI.DataBinding.BinderReferenceHolder", LogLevel.Information ); -``` + ```csharp + builder.AddFilter("Uno.UI.DataBinding.BinderReferenceHolder", LogLevel.Information ); + ``` - As well as this package NuGet (you will need to update to the latest Uno.UI nuget version): + As well as this package NuGet (you will need to update to the latest Uno.UI nuget version): -```xaml - -``` + ```xaml + + ``` ## Interpreting the statistics output diff --git a/doc/articles/uno-howto-create-a-repro.md b/doc/articles/uno-howto-create-a-repro.md index 696f36a27502..fe4d2fd3771d 100644 --- a/doc/articles/uno-howto-create-a-repro.md +++ b/doc/articles/uno-howto-create-a-repro.md @@ -91,4 +91,4 @@ Using a terminal: Once done, you can zip the folder and send it to github in your issue or discussion. -*** +--- diff --git a/doc/articles/wasm-custom-events.md b/doc/articles/wasm-custom-events.md index 568d0b530126..b0e286475d33 100644 --- a/doc/articles/wasm-custom-events.md +++ b/doc/articles/wasm-custom-events.md @@ -14,7 +14,7 @@ To reach this, you need to register to those events. In javascript (or Typescript), you can send a custom event using the following code: -``` javascript +```javascript // Generate a custom generic event from JavaScript/Typescript htmlElement.dispatchEvent(new Event("simpleEvent")); @@ -29,7 +29,7 @@ using the following code: ## Registering an event handler in C# for those events -``` csharp +```csharp protected override void OnLoaded() { // Note: following extensions are in the namespace "Uno.Extensions" diff --git a/doc/blog/201808-UnoUnderTheHoodButton.md b/doc/blog/201808-UnoUnderTheHoodButton.md index d5a84b2de389..f883f9960f29 100644 --- a/doc/blog/201808-UnoUnderTheHoodButton.md +++ b/doc/blog/201808-UnoUnderTheHoodButton.md @@ -20,7 +20,7 @@ I present the simplest interactive application imaginable, one step above 'Hello XAML: -```` xml +```xml -```` +``` code-behind: -```` csharp +```csharp using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; @@ -61,7 +61,7 @@ namespace UnoExtTestbed } } } -```` +``` I made a blank app using the [Uno Solution template](https://marketplace.visualstudio.com/items?itemName=unoplatform.uno-platform-addin-2022) and put this code on the main page. Whenever the [Button](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.button) is clicked, the number goes up. Add a bit more chrome and we could have a [viral hit](https://en.wikipedia.org/wiki/Cow_Clicker). @@ -95,7 +95,7 @@ On UWP, `UIElement` inherits from [DependencyObject](https://learn.microsoft.com In Uno.Android and Uno.iOS, any `UIElement` is an instance of the native base view type ([Android.Views.View](https://developer.android.com/reference/android/view/View) and [UIKit.UIView](https://developer.apple.com/documentation/uikit/uiview) respectively, mapped to managed types via the magic of [Xamarin](https://visualstudio.microsoft.com/xamarin/)). So views defined in XAML are also native views. This means, for example, that it's possible to incorporate native views that know nothing about Uno directly into your app's XAML. The following works on iOS: -```` xml +```xml @@ -104,7 +104,7 @@ In Uno.Android and Uno.iOS, any `UIElement` is an instance of the native base vi -```` +``` This is uniquely easy to do in Uno. We talk about 'leaving an escape hatch': the goal is 100% code reuse, but if you positively have to use a platform-specific feature or view library, the flexibility is there. @@ -124,11 +124,11 @@ A number of controls implemented by Uno, `Button` included, support the concept It's supported by setting a pre-defined [Style](https://learn.microsoft.com/windows/uwp/design/controls-and-patterns/xaml-styles) that puts an instance of the native control inside the XAML control. In our code above, we could have written: -```` xml +```xml