From 80934d9a37591b607a3a889d7673a4a59e710e2e Mon Sep 17 00:00:00 2001 From: SrikanthSF4944 Date: Mon, 13 Jul 2026 15:24:35 +0530 Subject: [PATCH 1/2] Task 1040257: WPF Documentation Quality and Completeness Evaluation --- winui/Common/accessibility.md | 56 +++++++++++++++-- winui/Common/compact-sizing.md | 51 +++++++++++++--- winui/Common/localization.md | 106 +++++++++++++++++++++++++++------ winui/Common/right-to-left.md | 83 +++++++++++++++++++++++--- winui/Common/themes.md | 106 +++++++++++++++++++++++++++++---- 5 files changed, 353 insertions(+), 49 deletions(-) diff --git a/winui/Common/accessibility.md b/winui/Common/accessibility.md index 30e0c4064..661dc9e3f 100644 --- a/winui/Common/accessibility.md +++ b/winui/Common/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility support for Syncfusion WinUI Controls | Syncfusion -description: Learn about Accessibility in the Syncfusion WinUI controls, including UI automation, Keyboard, and HighContrast theme support. +description: Learn about accessibility in the Syncfusion WinUI controls, including UI Automation, keyboard, and high contrast theme support. platform: winui control: Accessibility documentation: ug @@ -9,28 +9,72 @@ documentation: ug # Accessibility for Syncfusion® WinUI Controls -Accessibility is about making a windows application usable in a wide range of environments for people who use technology and approach a UI with a wide range of experiences. There are many different types of disabilities in the world including mobility, vision, color perception, hearing, speech, cognition, and literacy. However, these requirements can be met by utilizing the accessibility features of Syncfusion® UI WinUI controls. The controls support assistive technologies like screen readers, which take advantage of accessibility frameworks. +Accessibility is about making a Windows application usable in a wide range of environments for people who use technology and approach a UI with a wide range of experiences. There are many different types of disabilities in the world including mobility, vision, color perception, hearing, speech, cognition, and literacy. However, these requirements can be met by using the accessibility features of Syncfusion® WinUI controls. The controls support assistive technologies like screen readers, which take advantage of accessibility frameworks. The following sections explain the accessibility features. -## UI automation +## Prerequisites -The Syncfusion® WinUI control provides accessibility for the UI automation framework as well as the support provided by base classes derived from `FrameworkElementAutomationPeer`. The control class makes use of the UI automation concepts such as automation peers and automation patterns to report the controls' role and content to UI automation clients. +To use Syncfusion® WinUI controls and their accessibility features, ensure the following prerequisites are met: -A user can use a tool like screen readers to obtain the necessary information about the controls from UI Automation. When a control receives focus, the screen reader reads the text associated with that control. +* Install [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) version 17.8 or later with the **Universal Windows Platform (UWP)** or **WinUI 3** workload. +* Install the [Syncfusion WinUI NuGet package](https://www.nuget.org/packages?q=syncfusion.winui) for the controls you are using. +* Target **Windows 10 version 1809 (build 17763)** or later for UWP projects, or **Windows 10 version 1903 (build 18362)** or later for WinUI 3 projects. + +## UI Automation + +The Syncfusion® WinUI controls provide accessibility for the UI Automation framework, building on the support provided by base classes derived from `FrameworkElementAutomationPeer`. Each control class uses UI Automation concepts such as automation peers and automation patterns to report the control's role and content to UI Automation clients. + +### Screen reader support + +A user can use a tool such as a screen reader to obtain the necessary information about the controls from UI Automation. When a control receives focus, the screen reader reads the text associated with that control. ## Keyboard support Syncfusion® WinUI controls provide keyboard support including tab navigation, text input, and control-specific support. For example, the [SfTreeView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html) control supports arrow-key navigation for item selection. +### Common keyboard shortcuts + +The following table lists keyboard shortcuts supported across most Syncfusion WinUI controls: + +| Key | Action | +|---|---| +| `Tab` | Move focus to the next control. | +| `Shift+Tab` | Move focus to the previous control. | +| `Enter` | Activate the focused control or item. | +| `Space` | Toggle check state for the focused control. | +| `Arrow Up` / `Arrow Down` | Navigate through items in list-based controls. | +| `Arrow Left` / `Arrow Right` | Expand or collapse nodes in tree-based controls. | +| `Home` / `End` | Move to the first or last item. | +| `Ctrl+Home` / `Ctrl+End` | Move to the first or last item without changing selection. | + ## High contrast themes -The Windows operating system and application supports all of the high contrast themes that users can enable. These themes make the controls easier to see and are especially useful for people with limited vision. +The Windows operating system and applications support all of the high contrast themes that users can enable. These themes make the controls easier to see and are especially useful for people with limited vision. + +### Enable high contrast on Windows + +1. Open **Settings** > **Accessibility** > **Contrast themes**. +2. Select a high contrast theme from the drop-down menu. +3. Click **Apply** to enable the selected theme. + +Syncfusion WinUI controls automatically respond to high contrast theme changes. When a high contrast theme is enabled, the controls adjust their foreground and background colors accordingly. ![HighContrast theme support in Syncfusion WinUI controls](Common-images/winui-highcontrast-controls.png) +## Limitations and troubleshooting +If accessibility features are not working as expected, check the following: +* **Screen reader does not read the control** — Ensure the control has a valid `AutomationProperties.Name` attached property set in XAML. If the name is not set, the screen reader may not announce the control. +* **Keyboard navigation does not work** — Verify that the control's `IsTabStop` property is set to `True` (the default) and that no parent container is blocking tab navigation (e.g., `TabNavigation` set to `Once` or `None`). +* **High contrast colors are not applied** — Ensure the application is not overriding the default control styles with custom styles that hard-code colors. Use theme resources such as `SystemControlBackgroundBaseHighBrush` instead. +## See also +* [Localization for Syncfusion WinUI Controls](./localization.md) +* [Themes for Syncfusion WinUI Controls](./themes.md) +* [Right-to-left support for Syncfusion WinUI Controls](./right-to-left.md) +* [Compact sizing for Syncfusion WinUI Controls](./compact-sizing.md) +* [Microsoft accessibility documentation](https://learn.microsoft.com/en-us/windows/apps/design/accessibility/accessibility) diff --git a/winui/Common/compact-sizing.md b/winui/Common/compact-sizing.md index 0b75591ca..c4c15ac59 100644 --- a/winui/Common/compact-sizing.md +++ b/winui/Common/compact-sizing.md @@ -1,7 +1,7 @@ --- layout: post title: Compact Sizing in WinUI Controls | Syncfusion -description: Learn here about Compact Sizing support in Syncfusion WinUI Project Reunion controls and more details. +description: Learn about Compact Sizing support in Syncfusion WinUI controls and more details. platform: WinUI control: Compact Sizing documentation: ug @@ -9,29 +9,47 @@ documentation: ug # Compact Sizing in WinUI Controls -There are two types of spacing support for controls in WinUI. +Compact sizing reduces the spacing and padding of controls to enable dense, information-rich layouts. It is useful for applications that target pointer (mouse) input rather than touch, where more content can fit within the same screen area. + +There are two types of spacing support for controls in WinUI: + 1. [Standard](https://docs.microsoft.com/en-us/windows/apps/design/style/spacing#fluent-standard-sizing) - to accommodate both touch and pointer input. 2. [Compact](https://docs.microsoft.com/en-us/windows/apps/design/style/spacing#fluent-compact-sizing) - designed primarily to accommodate pointer input. Compact sizing enables dense, information-rich groups of controls and can help with the following: + * Browsing large amounts of content. * Maximizing visible content on a page. * Navigating and interacting with controls and content. +## Prerequisites + +To use compact sizing with Syncfusion® WinUI controls, ensure the following prerequisites are met: + +* Install [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) version 17.8 or later with the **WinUI 3** workload. +* Install the **[Microsoft.UI.Xaml](https://www.nuget.org/packages/Microsoft.UI.Xaml)** NuGet package for base control compact styles. +* Install the **[Syncfusion.Core.WinUI](https://www.nuget.org/packages/Syncfusion.Core.WinUI)** NuGet package for Syncfusion control compact styles. +* Target **Windows 10 version 1903 (build 18362)** or later for WinUI 3 projects. + ## Examples of compact sizing -Compact sizing is implemented through a unique resource dictionary that can be specified in your application at either the page level or a specific layout. The resource dictionary is available in the WinUI Nuget package. +Compact sizing is implemented through a unique resource dictionary that can be specified in your application at either the page level or a specific layout. Two resource dictionaries are required: -The following examples show how the Compact style can be applied for the window and an individual Grid control. +* **`Microsoft.UI.Xaml`** - Provides compact styles for the built-in WinUI controls. +* **`Syncfusion.Core.WinUI`** - Provides compact styles for Syncfusion WinUI controls. + +The following examples show how the Compact style can be applied at the window level and for an individual Grid control. ### Window level +Applying compact sizing at the window level affects all controls within that window. Add the resource dictionaries to the `Window.Resources` collection. + {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} @@ -39,6 +57,8 @@ The following examples show how the Compact style can be applied for the window ### Grid level +Applying compact sizing at the grid level limits the effect to only the controls within that `Grid`. Add the resource dictionaries to the `Grid.Resources` collection. Controls outside the `Grid` continue to use standard sizing. + {% tabs %} {% highlight xaml %} @@ -50,4 +70,21 @@ The following examples show how the Compact style can be applied for the window {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## Limitations and troubleshooting + +If compact sizing is not working as expected, check the following: + +* **Controls do not appear compact** — Ensure both the `Microsoft.UI.Xaml` and `Syncfusion.Core.WinUI` compact resource dictionaries are merged in the resource scope (window, page, or layout level). +* **Resource dictionary not found** — Verify that the corresponding NuGet packages (`Microsoft.UI.Xaml` and `Syncfusion.Core.WinUI`) are installed and that the package version matches the resource path. +* **Custom styles ignore compact sizing** — Custom control styles that hard-code `Padding`, `Margin`, `Width`, or `Height` values will not respond to compact resource dictionaries. Use theme resource keys instead. +* **Compact sizing affects only the target scope** — Applying the dictionaries at the `Grid` level does not affect sibling controls outside the `Grid`. To apply compact sizing app-wide, set the dictionaries on the window or in `App.xaml`. + +## See also + +* [Themes for Syncfusion WinUI Controls](./themes.md) +* [Accessibility for Syncfusion WinUI Controls](./accessibility.md) +* [Right-to-Left (RTL) support for Syncfusion WinUI Controls](./right-to-left.md) +* [Localization for Syncfusion WinUI Controls](./localization.md) +* [Fluent spacing and sizing guidance](https://learn.microsoft.com/en-us/windows/apps/design/style/spacing) \ No newline at end of file diff --git a/winui/Common/localization.md b/winui/Common/localization.md index ccc85b610..4d9352e9d 100644 --- a/winui/Common/localization.md +++ b/winui/Common/localization.md @@ -9,8 +9,7 @@ documentation: ug # Localization of Syncfusion® WinUI controls -Localization is the process of making an application multilingual by formatting the content according to the languages. This involves configuring the application for a specific language. For example, - `en-US` is the language of English spoken in the United States, while `en-GB` is the language of English spoken in Great Britain. Syncfusion® WinUI controls can be localized by adding resource files for each language. +Localization is the process of making an application multilingual by formatting the content according to the languages. This involves configuring the application for a specific language. For example `en-US` is the language of English spoken in the United States, while `en-GB` is the language of English spoken in Great Britain. Syncfusion® WinUI controls can be localized by adding resource files for each language. ## Changing application language @@ -24,7 +23,7 @@ The application language can be changed by setting the desired language to the [ { public MainWindow() { - Microsoft.Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "de"; // Works for the both and unpack deployments. + Microsoft.Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "de"; this.InitializeComponent(); } } @@ -33,7 +32,9 @@ The application language can be changed by setting the desired language to the [ {% endtabs %} -You can use the below code for packaged deployments. But in unpackaged deployments, it may cause the app to crash. +### For packaged deployments only + +You can also use the `Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride` property. However, in unpackaged deployments, it may cause the app to crash. {% tabs %} @@ -43,7 +44,7 @@ You can use the below code for packaged deployments. But in unpackaged deploymen { public MainWindow() { - Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "de"; // This code works for packaged deployments, but in unpackaged deployments, it may cause the app to crash. + Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "de"; this.InitializeComponent(); } } @@ -52,28 +53,27 @@ You can use the below code for packaged deployments. But in unpackaged deploymen {% endtabs %} -N> We recommend setting the above code before the `InitializeComponent` method if you have added a .resw file to your project. Otherwise, it may cause the project to crash. +N> We recommend setting the `ApplicationLanguages.PrimaryLanguageOverride` property **before** the `InitializeComponent` method call if you have added a .resw file to your project. Otherwise, it may cause the app to crash. The [supported culture codes](https://docs.microsoft.com/en-us/windows/uwp/app-resources/how-rms-matches-lang-tags) can be used as the language value (e.g., `de` for German). The following screenshot illustrates how the localization is applied to the datagrid based on the defined language to the [ApplicationLanguages.PrimaryLanguageOverride](https://learn.microsoft.com/en-us/uwp/api/windows.globalization.applicationlanguages.primarylanguageoverride?view=winrt-19041) property. WinUI DataGrid Localization - ## Creating .resw files The following steps can be used to generate .resw files for any language: N> The default resource files of all Syncfusion® WinUI libraries can be obtained from [GitHub](https://github.com/syncfusion/winui-controls-localization-resource-files). -1) Right-click the project and add a New folder named as "Resources". +1) Right-click the project and add a new folder named **Resources**. -2) Add another folder and name the folder with "language name". For example, "de" for German language. Find the supported culture codes from [here](https://docs.microsoft.com/en-us/windows/uwp/app-resources/how-rms-matches-lang-tags). +2) Add another folder named with the **language name**. For example, use `de` for German. Find the supported culture codes from [here](https://docs.microsoft.com/en-us/windows/uwp/app-resources/how-rms-matches-lang-tags). -3) Add [default resource files](https://github.com/syncfusion/winui-controls-localization-resource-files) in the following structure. +3) Add the [default resource files](https://github.com/syncfusion/winui-controls-localization-resource-files) in the following structure. ![WinUI DataGrid resw file](Localization-images/resources-in-winui-project.png) -N> If the [SfDataGrid](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.html) control is used in the application, copy and paste the `Syncfusion.Grid.WinUI.resw` (SfDataGrid present in the Syncfusion.Grid.WinUI library) file into the application under Resources folder. So, now you know the key names and values of the default strings in the Syncfusion.Grid.WinUI library. +N> If the [SfDataGrid](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.html) control is used in the application, copy and paste the `Syncfusion.Grid.WinUI.resw` (SfDataGrid is present in the Syncfusion.Grid.WinUI library) file into the **Resources** folder. These default files contain the key names and values of the default strings in the Syncfusion.Grid.WinUI library. 4) Now, the key names from default resource files can be defined and assigned values based on language. @@ -85,19 +85,91 @@ N> If the [SfDataGrid](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.D The default string of any control can be changed by adding the default .resw files (from [GitHub](https://github.com/syncfusion/winui-controls-localization-resource-files)) to the Resources folder of the application. If the default string is added, Syncfusion® WinUI controls reads it from the .resw files of the application. -## Localizing without using .resw files +## Localizing without using .resw files -You can localize the WinUI controls using the [Provider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationProvider.html#Syncfusion_UI_Xaml_Core_LocalizationProvider_Provider) property of the [LocalizationProvider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationProvider.html) class. +You can localize the WinUI controls using the [Provider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationProvider.html#Syncfusion_UI_Xaml_Core_LocalizationProvider_Provider) property of the [LocalizationProvider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationProvider.html) class. -To implement localization of [Syncfusion WinUI](https://help.syncfusion.com/cr/winui) controls without using .resw files and using custom string. Follow the steps below. +To implement localization of [Syncfusion WinUI](https://help.syncfusion.com/cr/winui) controls without using `.resw` files, using a custom string, follow the steps below. **Implementation in sample:** -The following procedure that helps to localize in WinUI using String Provider +The following procedure helps you localize WinUI controls using a string provider. + +**Step 1:** Include the required namespace `using Syncfusion.UI.Xaml.Core;` at the beginning of the file. Refer to [Syncfusion.UI.Xaml.Core](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.html) for more information. + +**Step 2:** Create a class that implements the [ILocalizationProvider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.ILocalizationProvider.html) interface defined in the `Syncfusion.UI.Xaml.Core` namespace in the `Syncfusion.Core.WinUI.dll`. + +**Step 3:** In the `GetLocalizedString` method, return a custom string value for a localizable key. If the same key name exists in two different assemblies, you can retrieve the specific assembly's name along with the key to update the custom string for that key from the desired assembly by using the `ResourceAssemblyName` property of the [LocalizationInfo](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationInfo.html) parameter. + +**Step 4:** Return `null` for the rest of the localizable keys that are not involved in the localization. These keys are loaded with a resource map if available; otherwise, they fall back to the default resource map. + +**Step 5:** Assign the instance to the [Provider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationProvider.html#Syncfusion_UI_Xaml_Core_LocalizationProvider_Provider) property of the [LocalizationProvider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.LocalizationProvider.html) class, before the `InitializeComponent` call in the constructor of the application. + +**Registering the provider:** -**Step 1:** Include the required namespace [using Syncfusion.UI.Xaml.Core;](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.html) at the beginning of the file. +{% tabs %} + +{% highlight c# %} + + LocalizationProvider.Provider = new MyStringLoader(); + +{% endhighlight %} + +{% endtabs %} + +The following code example is a reference to assign a localization string to the [DataGrid control](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.DataGrid.html) in WinUI without using `.resw` files. + +**Implementing the provider:** + +{% tabs %} + +{% highlight c# %} + +using Syncfusion.UI.Xaml.Core; + +public class MyStringLoader : ILocalizationProvider +{ + public string GetLocalizedString(LocalizationInfo info) + { + if (info.ResourceAssemblyName == "Syncfusion.Grid.WinUI" && info.ResourceName == "SortDateDescending") + { + return "CustomText"; + } -**Step 2:** Create a class that implements the [ILocalizationProvider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.ILocalizationProvider.html) interface defined in the Syncfusion.UI.Xaml.Core namespace in the Syncfusion.Core.WinUI.dll + switch (info.ResourceName) + { + case "AddNewRowText": // resource key from Syncfusion.Grid.WinUI assembly + return "CustomText1"; + case "Automatic": // resource key from Syncfusion.Editors.WinUI assembly + return "CustomText2"; + default: + return null; + } + } +} + +{% endhighlight %} + +{% endtabs %} + +{% tabs %} + +{% highlight c# %} + +public partial class App : Application +{ + public App() + { + LocalizationProvider.Provider = new MyStringLoader(); + this.InitializeComponent(); + } +} + +{% endhighlight %} + +{% endtabs %} + +N> Using `Provider` (highest priority, overrides everything) - Uses your own implemented method for localization. Using a `resource map` (fallback option) - Uses your own created resource file. This file contains a table with keys values where we can set our own values. **Step 3:** In a `GetLocalizedString` method, return Custom string value for a localizable key diff --git a/winui/Common/right-to-left.md b/winui/Common/right-to-left.md index 14f496206..24522f635 100644 --- a/winui/Common/right-to-left.md +++ b/winui/Common/right-to-left.md @@ -1,19 +1,29 @@ --- layout: post -title: Right to left in WinUI Controls | Syncfusion -description: Learn here about Right to left FlowDirection support in Syncfusion WinUI Project Reunion controls and more details. +title: Right-to-Left (RTL) in WinUI Controls | Syncfusion +description: Learn about Right-to-Left (RTL) FlowDirection support in Syncfusion WinUI controls and more details. platform: WinUI control: RightToLeft documentation: ug --- -# Right to Left (RTL) in WinUI Controls +# Right-to-Left (RTL) in WinUI Controls -Right to left (RTL) support allows you to change the direction of text and other UI elements flow within the controls' layout. - -Syncfusion® WinUI controls allow you to change the flow direction and are suitable for all applications that are localized in right to left languages. The layout of the control direction can be changed by setting the [FlowDirection](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.frameworkelement.flowdirection?view=winrt-19041) to `RightToLeft`. +Right-to-Left (RTL) support allows you to change the flow direction of text and other UI elements within a control's layout. -The following example shows a [TreeView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html) control with RTL direction. +Syncfusion® WinUI controls allow you to change the flow direction and are suitable for all applications that are localized in right-to-left languages. The control's layout direction can be changed by setting the [FlowDirection](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.flowdirection) property to `RightToLeft`. + +## Prerequisites + +To use Syncfusion® WinUI controls and their RTL features, ensure the following prerequisites are met: + +* Install [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) version 17.8 or later with the **WinUI 3** workload. +* Install the [Syncfusion WinUI NuGet package](https://www.nuget.org/packages?q=syncfusion.winui) for the control you are using. +* Target **Windows 10 version 1903 (build 18362)** or later for WinUI 3 projects. + +## Enable RTL for a single control + +The following example shows a [SfTreeView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html) control with RTL direction. {% tabs %} {% highlight xaml %} @@ -23,9 +33,66 @@ The following example shows a [TreeView](https://help.syncfusion.com/cr/winui/Sy {% endhighlight %} {% highlight c# %} +using Microsoft.UI.Xaml; +using Syncfusion.UI.Xaml.TreeView; + treeView.FlowDirection = FlowDirection.RightToLeft; {% endhighlight %} {% endtabs %} -![WinUI TreeView with right-to-left flow direction](Common-images/winui-control-right-to-left-direction.png) \ No newline at end of file +![WinUI TreeView with right-to-left flow direction](Common-images/winui-control-right-to-left-direction.png) + +## Enable RTL at the application level + +To apply RTL direction to an entire page or application, set the `FlowDirection` property on the root element (such as `Page`, `Window`, or `Application`). All child controls inherit the flow direction automatically. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + +{% endhighlight %} +{% highlight c# %} + +using Microsoft.UI.Xaml; + +public MainPage() +{ + this.InitializeComponent(); + this.FlowDirection = FlowDirection.RightToLeft; +} + +{% endhighlight %} +{% endtabs %} + +## Supported controls + +Most Syncfusion® WinUI controls support RTL flow direction. + +## Limitations and troubleshooting + +If RTL is not working as expected, check the following: + +* **Control does not reflect RTL direction** — Ensure the control's `FlowDirection` property is set to `RightToLeft`, or that a parent element has the property set so that it is inherited. +* **Text alignment is not reversed** — Some controls may require explicit `TextAlignment` or `HorizontalContentAlignment` adjustments for full RTL support. +* **Images or icons do not mirror** — Use `FlowDirection` on the image container; images themselves are not automatically mirrored unless hosted in a container with `FlowDirection="RightToLeft"`. +* **Custom templates ignore RTL** — Ensure custom control templates use `FlowDirection`-aware layout panels (e.g., `StackPanel`, `Grid`) rather than hard-coded `Margin` values. + +## See also + +* [Localization for Syncfusion WinUI Controls](./localization.md) +* [Themes for Syncfusion WinUI Controls](./themes.md) +* [Accessibility for Syncfusion WinUI Controls](./accessibility.md) +* [Compact sizing for Syncfusion WinUI Controls](./compact-sizing.md) +* [FlowDirection API reference](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.flowdirection) \ No newline at end of file diff --git a/winui/Common/themes.md b/winui/Common/themes.md index e6c1956f2..ea8f73c26 100644 --- a/winui/Common/themes.md +++ b/winui/Common/themes.md @@ -7,29 +7,28 @@ control: Themes documentation: ug --- - # Themes for Syncfusion® WinUI Controls -Themes provide a sense of visual continuity for the Windows apps. -It allows you to customize the appearance of the application. -The theme affects the colors of the Controls' background, foreground, border brush, font, etc. +Themes provide a sense of visual continuity for the Windows apps. +They allow you to customize the appearance of the application. +The theme affects the colors of the controls' background, foreground, border brush, font, etc. ## Supported themes -Syncfusion® WinUI controls support Light and Dark themes. +Syncfusion® WinUI controls support Light and Dark themes. **Light theme** ![Light theme for WinUI controls](themes-images/light.png) **Dark theme** - + ![Dark theme for WinUI controls](themes-images/dark.png) ## Applying themes at the application level -The theme for the whole application can be changed using the `RequestedTheme` property available in App.xaml. -Syncfusion® control adopts to Theme settings, when it is applied using the `RequestedTheme` property. +The theme for the whole application can be changed using the `RequestedTheme` property available in App.xaml. +Syncfusion® controls adapt to the theme settings when applied using the `RequestedTheme` property. {% tabs %} {% highlight xaml %} @@ -45,6 +44,7 @@ Syncfusion® control adopts to Theme settings, when it is applied {% highlight c# %} + // In App.xaml.cs sealed partial class App : Application { @@ -62,8 +62,9 @@ N> When the `RequestedTheme` property is not set, the application will use the u ## Applying themes for controls -Themes can also be applied for each framework element individually irrespective of the application level themes. -It can be set using the `RequestedTheme` property available in UI Elements. +Themes can also be applied for each framework element individually irrespective of the application level themes. +It can be set using the `RequestedTheme` property available in UI elements. +The `ElementTheme` enum accepts `Default`, `Light`, and `Dark` values. When the `RequestedTheme` property is set to `Default`, it uses the `Application.RequestedTheme` value for the elements. {% tabs %} @@ -84,7 +85,7 @@ When the `RequestedTheme` property is set to `Default`, it uses the `Application {% endhighlight %} {% endtabs %} -N> When the RequestedTheme value is set on a FrameworkElement, it is inherited by any elements nested within the element. +N> When the `RequestedTheme` value is set on a FrameworkElement, it is inherited by any elements nested within the element. ## Theme resource @@ -92,6 +93,8 @@ Syncfusion® provides a theme resource file for all Syncfusion® WinUI controls can be referred from this [link](https://github.com/syncfusion/winui-controls-theme-resource-files). +To use the theme resource file, download it from the link above and merge it into your application's `Application.Resources` (App.xaml) using `MergedDictionaries`. + ### Modify theme resource at application level Refer to the above-mentioned theme resources to obtain the required keys for customizing the control as desired, and then define the same keys with custom colors at the application level. @@ -121,6 +124,87 @@ The following example shows how to customize the ribbon control at the applicati **Customized value** +Then, define the same keys with your custom color values: + + + + + + + + + + + + + + + + + + +
KeyValue
SyncfusionRibbonTabMenuButtonBackgroundGreen
SyncfusionRibbonTabMenuButtonForegroundWhite
SyncfusionRibbonTabBorderBrushSelectedGreen
+ +Now, add the customized values in the application's root element resources (App.xaml). + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Control with default theme resource** + +![WinUI Ribbon default theme resource](Common-images/winui-ribbon-default-theme-resource.png) + +**Control with customized theme resource** + +![WinUI Ribbon theme resource customization at the application level](Common-images/winui-theme-resource-customization.png) + +**Default theme resource values** + + + + + + + + + + + + + + + + + + +
KeyValue
SyncfusionRibbonTabMenuButtonBackgroundSystemChromeLowColor
SyncfusionRibbonTabMenuButtonForegroundSystemBaseHighColor
SyncfusionRibbonTabBorderBrushSelectedSystemAccentColor
+ +**Customized value** + From 845e2a3f24e4ca7d9a2b8ff49c6b3e731f1b1cd3 Mon Sep 17 00:00:00 2001 From: SrikanthSF4944 Date: Mon, 13 Jul 2026 18:57:20 +0530 Subject: [PATCH 2/2] Task 1040257: WPF Documentation Quality and Completeness Evaluation --- winui/Common/compact-sizing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/winui/Common/compact-sizing.md b/winui/Common/compact-sizing.md index c4c15ac59..c2c378046 100644 --- a/winui/Common/compact-sizing.md +++ b/winui/Common/compact-sizing.md @@ -1,7 +1,7 @@ --- layout: post title: Compact Sizing in WinUI Controls | Syncfusion -description: Learn about Compact Sizing support in Syncfusion WinUI controls and more details. +description: Learn about Compact Sizing support in Syncfusion WinUI controls, including layout optimization, spacing customization, and responsive UI design. platform: WinUI control: Compact Sizing documentation: ug
Key