diff --git a/controls/button/getting-started.md b/controls/button/getting-started.md index f748e4568..6c0fdec20 100644 --- a/controls/button/getting-started.md +++ b/controls/button/getting-started.md @@ -10,9 +10,13 @@ slug: button-getting-started This guide provides the information you need to start using the Telerik UI for .NET MAUI Button by adding the control to your project. +This is the default look of the `RadButton` control: + +![.NET MAUI Button Default Look](images/button-default-look.png) + At the end, you will achieve the following result. -![Button Getting Started](images/button-getting-started.png) +![.NET MAUI Button Getting Started](images/button-getting-started.png) ## Prerequisites @@ -42,11 +46,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" **4.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project: - ```C# - using Telerik.Maui.Controls.Compatibility; - - public static class MauiProgram - { +```C# +using Telerik.Maui.Controls.Compatibility; +public static class MauiProgram +{ public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); @@ -57,11 +60,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }); - return builder.Build(); } - } - ``` +} +``` > For a runnable example with the Button Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Button > Getting Started**. diff --git a/controls/button/images/button-default-look.png b/controls/button/images/button-default-look.png new file mode 100644 index 000000000..d296fef17 Binary files /dev/null and b/controls/button/images/button-default-look.png differ diff --git a/controls/button/images/button-getting-started.png b/controls/button/images/button-getting-started.png index 8634327c0..98abc663a 100644 Binary files a/controls/button/images/button-getting-started.png and b/controls/button/images/button-getting-started.png differ diff --git a/controls/button/images/button-overview.png b/controls/button/images/button-overview.png index da1b4e477..2edcecb74 100644 Binary files a/controls/button/images/button-overview.png and b/controls/button/images/button-overview.png differ diff --git a/controls/button/overview.md b/controls/button/overview.md index 0afdc7611..e36b21cde 100644 --- a/controls/button/overview.md +++ b/controls/button/overview.md @@ -12,7 +12,7 @@ slug: button-overview The Telerik UI for .NET MAUI Button control enhances the functionality of the standard .NET MAUI Button by providing options for customizing its look and feel. Additionally, it enables you to add borders, set its transparency, align its content, define backgrounds, and render images. -![Button Overview](images/button-overview.png "Button for .NET MAUI") +![.NET MAUI Button Overview](images/button-overview.png "Button for .NET MAUI") ## Key Features diff --git a/controls/chat/styling.md b/controls/chat/styling.md index 9f070265c..4775cd550 100644 --- a/controls/chat/styling.md +++ b/controls/chat/styling.md @@ -25,6 +25,11 @@ To customize the different parts of the control, you can use the following built - `OutgoingLabelStyle` (target type `Label`)—Defines the style of the label of the outgoing message. +In addition, the following properties set the background of the Chat: + +* `BackgroundColor`(`Color`)—Defines the background color of the Chat control. +* `InputAreaBackgroundColor`(`Color`)—Defines the bacgkround color of the area that the input elements (entry and button) reside. + ## Customize the Chat Entry You can customize the `ChatEntry` with an implicit style. The example below shows how to customize the chat entry in your Chat control. The `ChatEntry` represents the entry used for writing messages in the Telerik UI for .NET MAUI Chat control. diff --git a/controls/checkbox/xamarin-migration.md b/controls/checkbox/xamarin-migration.md index 03a0a531d..97081b2e5 100644 --- a/controls/checkbox/xamarin-migration.md +++ b/controls/checkbox/xamarin-migration.md @@ -28,6 +28,8 @@ The tables in the following sections list any differences between the APIs of th | N/A | `CornerRadius` | | `CheckBoxUserCommand` | N/A | +Review the [Implementing the CheckBoxUserCommand Behavior When Migrating from Xamarin CheckBox to MAUI CheckBox]({%slug migrating-xamarin-checkbox-maui-checkbox%}) how-to article for more details how to define a command when the Telerik .NET MAUI CheckBox state changes. + ## See Also * [Migrating from Xamarin.Forms to .NET MAUI]({% slug migrate-to-net-maui %}) diff --git a/controls/datagrid/columns/images/datagrid-columns.png b/controls/datagrid/columns/images/datagrid-columns.png new file mode 100644 index 000000000..f313195a3 Binary files /dev/null and b/controls/datagrid/columns/images/datagrid-columns.png differ diff --git a/controls/datagrid/columns/overview.md b/controls/datagrid/columns/overview.md index 447557654..ad3cd7263 100644 --- a/controls/datagrid/columns/overview.md +++ b/controls/datagrid/columns/overview.md @@ -84,6 +84,10 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +Check the result in the image below: + +![Telerik .NET MAUI DataGrid Defining Columns](images/datagrid-columns.png) + ## Columns Features Find below a quick overview of the DataGrid's Columns features. diff --git a/controls/datagrid/filtering/control-template.md b/controls/datagrid/filtering/control-template.md deleted file mode 100644 index dc82937dd..000000000 --- a/controls/datagrid/filtering/control-template.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Control Template -page_title: .NET MAUI DataGrid Documentation - Control Template -description: "Review the Telerik .NET MAUI DataGrid Control Template documentation article to learn more about applying custom filter to the DataGrid using FilterControlTemplate property." -position: 2 -slug: datagrid-control-template ---- - -# Filter Control Template - -The Telerik DataGrid allows you to have a built-in filtering UI. To customize it, use the `FilterControlTemplate` property. In addition, you can apply filtering to the template column using the `FilterControlTemplate` property. - -* `FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.Compatibility.DataGrid.DataGridFilterControlBase` class. - diff --git a/controls/datagrid/filtering/filter-control-template.md b/controls/datagrid/filtering/filter-control-template.md new file mode 100644 index 000000000..20802a27c --- /dev/null +++ b/controls/datagrid/filtering/filter-control-template.md @@ -0,0 +1,39 @@ +--- +title: Filter Control Template +page_title: .NET MAUI DataGrid Documentation - Filter Control Template +description: "Review the Telerik .NET MAUI DataGrid Filter Control Template documentation article to learn more about applying custom filter to the DataGrid using FilterControlTemplate property." +position: 2 +slug: datagrid-filter-control-template +--- + +# Filter Control Template + +The Telerik DataGrid provides a built-in filtering UI which enables users to quickly filter the displayed data. To customize the built-in filtering UI for a concrete column, use the `FilterControlTemplate` property of the typed columns (text, boolean, numeric, date, time, and picker columns). + +In addition, as the [template column]({%slug datagrid-columns-template-column%}) does not provide a default filtering UI, with the `FilterControlTemplate` property you can allow users to filter data in template columns as well. + +* `FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.Compatibility.DataGrid.DataGridFilterControlBase` class. + +Check a quick example on how to create a custom `FilterControlTemplate` below. + +**1.** Add the following snippet to declare a sample CityFilterControl - it should inherit from `Telerik.Maui.Controls.Compatibility.DataGrid.DataGridFilterControlBase`: + + + +**2.** Here is the code behind of the CityFilterControl: + + + +**3.** Add the `RadDataGrid` instance - you'd need to manually define the columns and apply the custom Filter Control Template through the `FilterTemplate` property: + + + +Check the result below: + +![Telerik .NET MAUI DataGrid Custom Filter Control Template](images/datagrid-customfiltertemplate.gif) + +## See Also + +- [Columns Overview]({%slug datagrid-columns-overview%}) +- [Filtering UI]({%slug datagrid-filtering-ui%}) +- [Programmatic Filtering]({%slug datagrid-programmatic-filtering%}) diff --git a/controls/datagrid/filtering/images/datagrid-customfiltertemplate.gif b/controls/datagrid/filtering/images/datagrid-customfiltertemplate.gif new file mode 100644 index 000000000..6acb36519 Binary files /dev/null and b/controls/datagrid/filtering/images/datagrid-customfiltertemplate.gif differ diff --git a/controls/imageeditor/commands.md b/controls/imageeditor/commands.md index 3e68d94d1..6ac1cf6f6 100644 --- a/controls/imageeditor/commands.md +++ b/controls/imageeditor/commands.md @@ -116,7 +116,7 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" **3.** Rotate Commands set on a Button - + **4.** Hue Command Executed on a Button click and a Slider for changing the Hue Value: diff --git a/controls/imageeditor/migrate-from-xamarin.md b/controls/imageeditor/migrate-from-xamarin.md index 58e2b582d..627ba7693 100644 --- a/controls/imageeditor/migrate-from-xamarin.md +++ b/controls/imageeditor/migrate-from-xamarin.md @@ -15,24 +15,66 @@ Telerik .NET MAUI ImageEditor control preserves the same API as Xamarin.Forms Im | Control | Control name | XAML Namespcace | C# Namespace| | --------------- | --------------- | --------------- | --------------- | | Xamarin ImageEditor | `RadImageEditor` | xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor" | using Telerik.XamarinForms.ImageEditor; | +| Xamarin ImageEditorToolbar | `RadImageEditorToolbar` | xmlns:telerikImageEditor="clr-namespace:Telerik.XamarinForms.ImageEditor;assembly=Telerik.XamarinForms.ImageEditor" | using Telerik.XamarinForms.ImageEditor; | | .NET MAUI ImageEditor | `RadImageEditor` | xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" | using Telerik.Maui.Controls; | +| .NET MAUI ImageEditorToolbar | `RadImageEditorToolbar` | xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" | using Telerik.Maui.Controls; | ## Modifying the API +When migrating the ImageEditor from Xamarin to .NET MAUI, consider the following differences in the API: + | Xamarin ImageEditor | .NET MAUI ImageEditor | | ------------- | --------------- | -| - | support for exporting images as `Gif` | -| - | support for exporting images as `Bmp` | -| - | `UndoCommand` | -| - | `RedoCommand` | -| - | `RotateBackwardCommand` | -| - | `SaturationInteractiveCommand` | -| - | `BrightnessInteractiveCommand` | -| - | `BlurInteractiveCommand` | -| - | `ContrastInteractiveCommand` | -| - | `HueInteractiveCommand` | -| - | `SharpenInteractiveCommand` | +| N/A | support for exporting images as `Gif` | +| N/A | support for exporting images as `Bmp` | +| N/A | `UndoCommand` | +| N/A | `RedoCommand` | +| N/A | `RotateBackwardCommand` | +| N/A | `SaturationInteractiveCommand` | +| N/A | `BrightnessInteractiveCommand` | +| N/A | `BlurInteractiveCommand` | +| N/A | `ContrastInteractiveCommand` | +| N/A | `HueInteractiveCommand` | +| N/A | `SharpenInteractiveCommand` | + +When migrating the ImageEditorToolbar from Xamarin to .NET MAUI, consider the following differences in the API: + +| Xamarin ImageEditorToolbar | .NET MAUI ImageEditorToolbar | +| ------------- | --------------- | +| `IsMultiLine` with `true` and `false` values | `OverflowMode` with `DropDown`, `Scroll` and `Wrap`(multiline) values | +| N/A | `OverflowMenuButtonVisibility` | +| `OverflowButtonTemplate` | `OverflowMenuButtonTemplate` | +| `OverflowButtonText`, `OverflowButtonTextColor` and `OverflowButtonFontFamily` | `OverflowMenuButtonStyle` - Style the overflow button | +| `TransformsToolbarItem` | `ImageEditorTransformationsToolbarItem` | +| `CropToolbarItem` for mobile and desktop | `ImageEditorCropToolbarItem` | +| N/A | `ImageEditorCropOptionsToolbarItem` | +| `ResizeToolbarItem` | `ImageEditorResizeOptionsToolbarItem` | +| `RotateLeftToolbarItem` | `ImageEditorRotateLeftToolbarItem` | +| `RotateRightToolbarItem` | `ImageEditorRotateRightToolbarItem` | +| `FlipHorizontalToolbarItem` | `ImageEditorFlipHorizontalToolbarItem` | +| `FlipVerticalToolbarItem` | `ImageEditorFlipVerticalToolbarItem` | +| `EffectsToolbarItem` for mobile and desktop | `ImageEditorFiltersToolbarItem` for mobile | +| N/A | `ImageEditorFilterOptionsToolbarItem` for desktop | +| `TransformsToolbarItem` | `ImageEditorTransformationsToolbarItem` | +| `HueToolbarItem` | `ImageEditorHueToolbarItem` | +| `SaturationToolbarItem` | `ImageEditorSaturationToolbarItem` | +| `BrightnessToolbarItem` | `ImageEditorBrightnessToolbarItem` | +| `ContrastToolbarItem` | `ImageEditorContrastToolbarItem` | +| `BlurToolbarItem` | `ImageEditorBlurToolbarItem` | +| `SharpenToolbarItem` | `ImageEditorSharpenToolbarItem` | +| `UndoToolbarItem` | `ImageEditorUndoToolbarItem` | +| `RedoToolbarItem` | `ImageEditorRedoToolbarItem` | +| `ResetToolbarItem` | `ImageEditorResetToolbarItem` | +| `ApplyToolbarItem` | `ImageEditorApplyToolbarItem` | +| `CancelToolbarItem` | `ImageEditorCancelToolbarItem` | +| `TemplateToolbarItem` | Review the [toolbar items]({%slug toolbar-items%}) `RadToolbar` control provides | +| `CommandToolbarItem` | Review the [toolbar items]({%slug toolbar-items%}) `RadToolbar` control provides | +| `ZoomToFitToolbarItem` | `ImageEditorZoomToFitToolbarItem` | +| N/A | `ImageEditorZoomInToolbarItem` | +| N/A | `ImageEditorZoomOutToolbarItem` | +| N/A | `ImageEditorZoomToolbarItem` | +| N/A | `ImageEditorZoomToOriginalToolbarItem` | ## See Also diff --git a/controls/imageeditor/toolbar/items.md b/controls/imageeditor/toolbar/items.md index 1a7f9febd..b68eb04c5 100644 --- a/controls/imageeditor/toolbar/items.md +++ b/controls/imageeditor/toolbar/items.md @@ -54,7 +54,7 @@ The table below shows the built-in toolbar items available for desktop - `WinUI` Review all properties available for toolbar items configuration. -### Properties for All Toolbar Items** +### Properties for All Toolbar Items The properties described bellow apply to all toolbar items available in the `ImageEditorToolbar`: @@ -65,7 +65,7 @@ The properties described bellow apply to all toolbar items available in the `Ima * `ToolStrip`—The toolbar item appears in the main tool strip area of the toolbar. * `DropDown`—The toolbar item appears in the overflow drop-down menu of the toolbar. -### Properties for Specific Toolbar Items** +### Properties for Specific Toolbar Items The properties described below apply to `blur`, `hue`, `saturation`, `brightness`, `sharpen`, `contrast`, `flip`, `resize`, `undo`, `redo`, `crop`, `rotate`, `button` toolbar items: @@ -76,13 +76,13 @@ The properties described below apply to `blur`, `hue`, `saturation`, `brightness * `CommandParameter`(`object`)—Defines the parameter of the command, which is executed when the button is clicked. * `Clicked` event—Raised when the button is clicked. -### Properties for Filter Toolbar Items - `blur`, `hue`, `saturation`, `brightness`, `sharpen`, `contrast`** +### Properties for Filter Toolbar Items - `blur`, `hue`, `saturation`, `brightness`, `sharpen`, `contrast` * `Value`(`double`)—Defines the current value, when using an auto-generated slider content. Default value is`0`. * `MinimumProperty`(`double`)—Defines the minimum value, when using an auto-generated slider content. Default value is `-100`. * `MaximumProperty`(`double`)—Defines the maximum value, when using an auto-generated slider content. Default value is `100`. -### Properties for Navigation Toolbar Item** +### Properties for Navigation Toolbar Item * `AutoGenerateItems`(`bool`)—Specifies a value indicating whether to auto-generate all child items by default. The default value is `true`. * `Items`(`IList`)—Read-only collection of `Telerik.Maui.Controls.ToolbarItems`. diff --git a/controls/scheduler/built-in-dialogs.md b/controls/scheduler/built-in-dialogs.md index ea1a96163..817a014d3 100644 --- a/controls/scheduler/built-in-dialogs.md +++ b/controls/scheduler/built-in-dialogs.md @@ -102,13 +102,13 @@ You can style the visual appearance of each dialog by creating the corresponding * `EditAppointmentDialogStyle`—Defines the `Style` that will be applied on the Edit Appointment dialog. * `EditRecurrenceDialogStyle`—Defines the `Style` that will be applied on the Edit Recurrence dialog. * `EditRecurrenceChoiceDialogStyle`—Defines the `Style` that will be applied on the Edit Recurrence Choice dialog. -* `DeleteAppointmentChoiceDialogStyle`—Defines the `Style` that will be applied on the Delete Appointment Choice dialog. +* `DeleteAppointmentChoiceDialogStyle`—(Desktop-only)Defines the `Style` that will be applied on the Delete Appointment Choice dialog. * `DeleteRecurrenceChoiceDialogStyle`—Defines the `Style` that will be applied on the Delete Recurrence Choice dialog. * `PreviewAppointmentDialogStyle`—(Android- and iOS-only)Defines the `Style` for the Preview Appointment dialog. ## See Also -- [Appointments]({% slug appointments-overview %}) -- [Recurrence Pattern](% slug recurrence-pattern %}) -- [Recurrence Rule](% slug recurrence-rule %}) -- [Views]({%slug scheduler-views-overview %}) +- [Appointments]({%slug appointments-overview %}) +- [Recurrence Pattern]({%slug scheduler-recurrence-pattern %}) +- [Recurrence Rule]({%slug scheduler-recurrence-rule %}) +- [Views]({%slug scheduler-views-overview %}) \ No newline at end of file diff --git a/controls/sidedrawer/transitions.md b/controls/sidedrawer/transitions.md index 039917558..7524c92a6 100644 --- a/controls/sidedrawer/transitions.md +++ b/controls/sidedrawer/transitions.md @@ -14,7 +14,7 @@ Transitions are the animation effects applied to the side drawer while being ope * `DrawerTransitionType`(enum of type `Telerik.Maui.Controls.SideDrawerTransitionType`)—Defines the transition of the component. This property can be set to one of the following values: * `Fade`, `Push`, `Reveal`, `ReverseSlideOut`, `ScaleUp`, `SlideAling`, `SlideInOnTop`, `Custom` -* `DrawerTransitionFadeOpacity`(`double`)—Defines the opacity of the fade layer of the component. This controls the fade layer opacity on Android or the dim opacity on iOS. +* `DrawerTransitionFadeOpacity`(`double`)—Defines the opacity of the fade layer of the component. This controls the fade layer opacity on Android and WinUI or the dim opacity on iOS and MacCatalyst. The opacity value is different on different platforms. Review the [Making SideDrawer Opacity Consistent across Platforms]({%slug make-sidedrawer-opacity-consistent-across-platforms-net-maui%}) how-to article for more details. ## Built-in Transitions diff --git a/controls/slideview/navigation-buttons.md b/controls/slideview/navigation-buttons.md index 085a8d449..8319e41f5 100644 --- a/controls/slideview/navigation-buttons.md +++ b/controls/slideview/navigation-buttons.md @@ -12,7 +12,7 @@ To switch through the different views of the SlideView, you van use Navigation B The SlideView exposes a `NavigationButtonVisibility` property that allows you to control the visibility options of the Navigation Buttons: -* `Visisble`—The buttons are visible. +* `Visible`—The buttons are visible. * `HiddenWhenDisabled`—The buttons are visible when enabled and hidden when disabled. @@ -24,4 +24,4 @@ The SlideView exposes a `NavigationButtonVisibility` property that allows you to - [Handling the SlideView Events]({%slug slideview-events%}) - [Using an Item Template in SlideView]({%slug slideview-item-template%}) - [Styling the SlideView Component]({%slug slideview-navigation-buttons-styling%}) -- [Styling the SlideView Indicators]({%slug indicators-styling%}) \ No newline at end of file +- [Styling the SlideView Indicators]({%slug indicators-styling%}) diff --git a/controls/toolbar/items/overview.md b/controls/toolbar/items/overview.md index 7e72c4d53..572824d91 100644 --- a/controls/toolbar/items/overview.md +++ b/controls/toolbar/items/overview.md @@ -10,7 +10,7 @@ slug: toolbar-items ![.NET MAUI Toolbar Visual Structure](../images/toolbar-visual-structure.png "Visual elements of Toolbar") -The Telerik .NET MAUI Toolbar provides a built-in toolbar items. The available items are described in the table below: +The Telerik .NET MAUI Toolbar provides built-in toolbar items. The available items are described in the table below: | Toolbar Item | Description | | ------------ | ------- | diff --git a/demos-and-sample-apps/controls-showcase-app.md b/demos-and-sample-apps/controls-showcase-app.md index 842762688..cd6abb5bb 100644 --- a/demos-and-sample-apps/controls-showcase-app.md +++ b/demos-and-sample-apps/controls-showcase-app.md @@ -49,9 +49,9 @@ You can access the Controls Samples application in the following ways: `dotnet build -t:Run -f net8.0-maccatalyst` - * ControlsSamples application on MacOS. + * ControlsSamples application on MacOS. - ![Telerik UI for .NET MAUI ControlsSamples App MacCatalyst](images/controlssamples-macos.png) + ![Telerik UI for .NET MAUI ControlsSamples App MacCatalyst](images/controlssamples-mac.png) 1. Run on iOS using the following command: @@ -63,9 +63,9 @@ You can access the Controls Samples application in the following ways: 3. Select Connected device. 4. Under Device Information, you will get an identifier, or UDID, of the device. - * ControlsSamples application on iOS. + * ControlsSamples application on iOS. - ![Telerik UI for .NET MAUI ControlsSamples App iOS](images/controlssamples-iphone.png) + ![Telerik UI for .NET MAUI ControlsSamples App iOS](images/controlssamples-iphone.png) >tip Check the [.NET MAUI Examples, Demos, and Sample Apps Overview]({%slug sampleapps-overview%}) topic which lists all the sample applications built with Telerik UI for .NET MAUI. diff --git a/demos-and-sample-apps/crypto-app.md b/demos-and-sample-apps/crypto-app.md index 207f62aa1..efba4e692 100644 --- a/demos-and-sample-apps/crypto-app.md +++ b/demos-and-sample-apps/crypto-app.md @@ -11,8 +11,6 @@ position: 3 Crypto Tracker demo is a real-case crypto application that shows changes in cryptocurrency prices, built with the Telerik UI for .NET MAUI controls. -![Telerik UI for .NET MAUI CryptoTracker App](../images/crypto-app.png) - You can start using the Crypto Tracker application in the following ways: You can access the SDKBrowser application in the following ways: diff --git a/demos-and-sample-apps/images/controlssamples-iphone.png b/demos-and-sample-apps/images/controlssamples-iphone.png index 2f7b0a37f..108a31c19 100644 Binary files a/demos-and-sample-apps/images/controlssamples-iphone.png and b/demos-and-sample-apps/images/controlssamples-iphone.png differ diff --git a/demos-and-sample-apps/images/controlssamples-mac.png b/demos-and-sample-apps/images/controlssamples-mac.png new file mode 100644 index 000000000..96677e01a Binary files /dev/null and b/demos-and-sample-apps/images/controlssamples-mac.png differ diff --git a/demos-and-sample-apps/images/controlssamples-macos.png b/demos-and-sample-apps/images/controlssamples-macos.png deleted file mode 100644 index a8f9e123b..000000000 Binary files a/demos-and-sample-apps/images/controlssamples-macos.png and /dev/null differ diff --git a/demos-and-sample-apps/images/controlssamples-winui.png b/demos-and-sample-apps/images/controlssamples-winui.png index c40275414..72dd44598 100644 Binary files a/demos-and-sample-apps/images/controlssamples-winui.png and b/demos-and-sample-apps/images/controlssamples-winui.png differ diff --git a/demos-and-sample-apps/images/controlssamples_all.png b/demos-and-sample-apps/images/controlssamples_all.png deleted file mode 100644 index f7405e833..000000000 Binary files a/demos-and-sample-apps/images/controlssamples_all.png and /dev/null differ diff --git a/demos-and-sample-apps/images/controlssamples_android.png b/demos-and-sample-apps/images/controlssamples_android.png index 80f4a7d67..dfbfad24f 100644 Binary files a/demos-and-sample-apps/images/controlssamples_android.png and b/demos-and-sample-apps/images/controlssamples_android.png differ diff --git a/demos-and-sample-apps/images/demo-macos.png b/demos-and-sample-apps/images/demo-macos.png index c031b7fe2..c27d40ec6 100644 Binary files a/demos-and-sample-apps/images/demo-macos.png and b/demos-and-sample-apps/images/demo-macos.png differ diff --git a/demos-and-sample-apps/images/sdk-mobile.png b/demos-and-sample-apps/images/sdk-mobile.png new file mode 100644 index 000000000..456d1474c Binary files /dev/null and b/demos-and-sample-apps/images/sdk-mobile.png differ diff --git a/demos-and-sample-apps/images/sdkbrowser-winui.png b/demos-and-sample-apps/images/sdkbrowser-winui.png index 2e2b21c8c..01127eef9 100644 Binary files a/demos-and-sample-apps/images/sdkbrowser-winui.png and b/demos-and-sample-apps/images/sdkbrowser-winui.png differ diff --git a/demos-and-sample-apps/images/sdkbrowser_all.png b/demos-and-sample-apps/images/sdkbrowser_all.png deleted file mode 100644 index dcf9cb01a..000000000 Binary files a/demos-and-sample-apps/images/sdkbrowser_all.png and /dev/null differ diff --git a/demos-and-sample-apps/overview.md b/demos-and-sample-apps/overview.md index d46ff70a1..3313f980e 100644 --- a/demos-and-sample-apps/overview.md +++ b/demos-and-sample-apps/overview.md @@ -22,7 +22,7 @@ The Telerik .NET MAUI library has a few fully-featured [demo applications](https The Telerik UI for .NET MAUI Controls Samples is a highly polished application offering many scenario-specific use cases designed to show off a subset of features for each component. The app provides various .NET MAUI examples for many of the 60+ .NET MAUI controls included in the library. -![.NET MAUI examples and controls samples](images/controlssamples_all.png) +![Telerik UI for .NET MAUI ControlsSamples App WinUI](images/controlssamples-winui.png) For more information on it, refer to [Controls Samples App]({%slug controls-samples-app%}). @@ -30,6 +30,8 @@ For more information on it, refer to [Controls Samples App]({%slug controls-samp The SDKBrowser is a set of .NET MAUI examples that explain how to use the features of a control. Contrary to the Controls Samples application, the SDKBrowser shows the components in their pure form without adding extra styling and polishing. It's the go-to source for "how do I use X in Y control". Most of the code snippets available in the documentation are directly generated from the examples in the SDKBrowser (you can see special comments in the code for this). +![.NET MAUI examples and controls samples](images/sdk-mobile.png) + For more information on it, refer to [SDKBrowser App]({%slug sdkbrowser-app%}). ## Crypto Tracker App diff --git a/demos-and-sample-apps/sdkbrowser-app.md b/demos-and-sample-apps/sdkbrowser-app.md index 60c855453..f8a88e5ba 100644 --- a/demos-and-sample-apps/sdkbrowser-app.md +++ b/demos-and-sample-apps/sdkbrowser-app.md @@ -12,8 +12,6 @@ position: 2 **Telerik UI for .NET MAUI SDKBrowser** is a set of examples that explain how to use the features of a control. The SDKBrowser shows the components in their pure form without adding extra styling and polishing. It's the go-to source for "how do I use X in Y control". Most of the code snippets available in the documentation are directly generated from the examples in the SDKBrowser (you can see special comments in the code for this). -![Telerik UI for .NET MAUI SDKBrowserMaui App](images/sdkbrowser_all.png) - You can access the SDKBrowser application in the following ways: * If you have already installed Telerik UI for .NET MAUI, navigate to the **/[installation-path]/Telerik UI for .NET MAUI [version]/Examples/SdkBrowser** folder and open the `SdkBrowserMaui.sln` file; @@ -32,6 +30,10 @@ You can access the SDKBrowser application in the following ways: ![Telerik UI .NET MAUI SdkBrowserMaui App](images/sampleapps-visual-studio.png) 1. Select the emulator or device on which you want to run the application. + + * SDKBrowser application on WinUI. + + ![Telerik UI for .NET MAUI SDKBrowser App WinUI](images/sdkbrowser-winui.png) ## Install and Run SDKBrowser on macOS @@ -52,6 +54,14 @@ You can access the SDKBrowser application in the following ways: 2. Click Devices from the Window menu. 3. Select Connected device. 4. Under Device Information, you will get an identifier, or UDID, of the device. + + * SDKBrowser application on MacCatalyst. + + ![Telerik UI for .NET MAUI SDKBrowser App MacCatalyst](images/demo-macos.png) + + * SDKBrowser application on Android and iOS. + + ![Telerik UI for .NET MAUI SDKBrowser App Android iOS](images/sdk-mobile.png) >tip Check the [.NET MAUI Examples, Demos, and Sample Apps Overview]({%slug sampleapps-overview%}) topic which lists all the sample applications built with Telerik UI for .NET MAUI. diff --git a/get-started/mac/first-steps-nuget.md b/get-started/mac/first-steps-nuget.md index 0c5296503..f057c248b 100644 --- a/get-started/mac/first-steps-nuget.md +++ b/get-started/mac/first-steps-nuget.md @@ -17,7 +17,7 @@ While installing Telerik UI for .NET MAUI with NuGet works both for Windows and Before you start with the installation of Telerik UI for .NET MAUI, make sure you have a running .NET MAUI application. For more information on the required steps and system requirements, refer to the [Microsoft .NET MAUI official documentation](https://docs.microsoft.com/en-us/dotnet/maui/get-started/installation). -## Step 2: Download Telerik UI for .NET MAUI +## Step 2: Download Telerik UI for .NET MAUI NuGet Package Telerik UI for .NET MAUI enables you to download the suite either from the Telerik UI for .NET MAUI product page or through your Telerik account. For the purposes of this tutorial, let's download the batch from your Telerik account: @@ -31,7 +31,7 @@ Telerik UI for .NET MAUI enables you to download the suite either from the Teler ![Telerik UI for .NET MAUI Search field in your account](../../images/search-for-maui.png) -1. On the next page, download the `.msi` and `.pkg` automatic installation files, and the Telerik .NET MAUI NuGet Package. +1. On the next page, download the `.nupkg` or `.zip` files. The `.zip` file contains the Telerik .NET MAUI NuGet Package. ![Telerik UI for .NET MAUI available product files in your account](../../images/product-files.png) @@ -51,7 +51,7 @@ Now, let's add the Telerik UI for .NET MAUI package through the Telerik NuGet fe ![Package Sources dialog with the Available package sources field](../../installation/images/getting-started-add-package-source.png) -1. In the **Location** field, add the Telerik server by filling in its [`https://nuget.telerik.com/v3/index.json`](https://nuget.telerik.com/v3/index.json) URL. Click **Add Source**. +1. In the **Location** field, add the Telerik server URL: `https://nuget.telerik.com/v3/index.json`. If you use a locally available NuGet package downloaded from [your account](https://www.telerik.com/account/), add the path to the local package instead of the URL. Finally, click **Add Source**. ![Package Sources field with the checked Telerik NuGet option](../../installation/images/getting-started-add-telerk-server.png) diff --git a/get-started/windows/first-steps-nuget.md b/get-started/windows/first-steps-nuget.md index 418f5611d..4b26eb394 100644 --- a/get-started/windows/first-steps-nuget.md +++ b/get-started/windows/first-steps-nuget.md @@ -38,7 +38,7 @@ Telerik UI for .NET MAUI enables you to download the suite either from the Teler ![Telerik UI for .NET MAUI Search field in your account](../../images/search-for-maui.png) -1. On the next page, download the `.msi` and `.pkg` automatic installation files, and the Telerik .NET MAUI NuGet Package. +1. On the next page, download the `.nupkg` or `.zip` files. The `.zip` file contains the Telerik .NET MAUI NuGet Package. ![Telerik UI for .NET MAUI available product files in your account](../../images/product-files.png) @@ -54,7 +54,7 @@ Now, let's add the Telerik UI for .NET MAUI package through the Telerik NuGet fe ![Package Sources dialog with the Available package sources field](../../installation/images/nuget-vs-add-source.png) -1. In the **Source** field, add the Telerik server by filling in its [`https://nuget.telerik.com/v3/index.json`](https://nuget.telerik.com/v3/index.json) URL. Click **Update**. +1. In the **Source** field, add the Telerik server URL: `https://nuget.telerik.com/v3/index.json`. If you use a locally available NuGet package downloaded from [your account](https://www.telerik.com/account/), add the path to the local package instead of the URL. Finally, click **Update**. ![Package Sources field with the checked Telerik NuGet option](../../installation/images/nuget-vs-telerik-server.png) diff --git a/installation/approaches.md b/installation/approaches.md index 961667937..979a51ec9 100644 --- a/installation/approaches.md +++ b/installation/approaches.md @@ -60,32 +60,91 @@ No matter whether you've used the `.msi` automatic installation or the `zip` fil To manually reference the assembly references, create a `libs` folder in your solution folder. Then, copy the content from the desired .NET folder into your "libs" folder (e.g. `Binaries/NET7` copyto-> `libs`). You can now directly reference the DLLs in that `libs` folder instead of the installation folder. -Note that *Visual Studio 2022 does not have support for differentiating DLL references for each target platform*, you must manually edit the csproj file and add conditions for each target platform. +> Visual Studio 2022 does not support differentiating DLL references for each target platform. You must manually edit the `.csproj` file and add conditions for each platform. The `Telerik.Maui.Controls.dll`, `Telerik.Maui.Controls.Compatibility.dll`, and `Telerik.Maui.Core.dll` must be referenced from the platform-specific folders. ``` - + - + + "The dlls location"\WinUI\Telerik.WinUI.Controls.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.Compatibility.dll + + + "The dlls location"\WinUI\Telerik.Maui.Core.dll + - + + "The dlls location"\iOS\Telerik.iOS.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.Compatibility.dll + + + "The dlls location"\WinUI\Telerik.Maui.Core.dll + - + + "The dlls location"\MacCatalyst\Telerik.MacCatalyst.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.Compatibility.dll + + + "The dlls location"\WinUI\Telerik.Maui.Core.dll + - + + "The dlls location"\Android\Telerik.Android.Chart.dll + + + "The dlls location"\Android\Telerik.Android.Common.dll + + + "The dlls location"\Android\Telerik.Android.Data.dll + + + "The dlls location"\Android\Telerik.Android.Input.dll + + + "The dlls location"\Android\Telerik.Android.List.dll + + + "The dlls location"\Android\Telerik.Android.Primitives.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.dll + + + "The dlls location"\WinUI\Telerik.Maui.Controls.Compatibility.dll + + + "The dlls location"\WinUI\Telerik.Maui.Core.dll + ``` diff --git a/knowledge-base/adding-select-all-option-combobox-dropdown-net-maui.md b/knowledge-base/adding-select-all-option-combobox-dropdown-net-maui.md index f10fe1f70..40fc0d141 100644 --- a/knowledge-base/adding-select-all-option-combobox-dropdown-net-maui.md +++ b/knowledge-base/adding-select-all-option-combobox-dropdown-net-maui.md @@ -81,6 +81,8 @@ That's it! You have successfully added a **Select All** option in the drop-down >tip Next, customize the appearance of the **Select All** option to match your application's design. +If you want to use a command when the CheckBox state changes, review the [Implementing the CheckBoxUserCommand Behavior When Migrating from Xamarin CheckBox to MAUI CheckBox]({%slug migrating-xamarin-checkbox-maui-checkbox%}) how-to article. + ## See Also - [ComboBox Documentation]({%slug combobox-overview%}) \ No newline at end of file diff --git a/knowledge-base/hide-no-result-message-autocomplete-net-maui.md b/knowledge-base/hide-no-result-message-autocomplete-net-maui.md new file mode 100644 index 000000000..e8bb3b34d --- /dev/null +++ b/knowledge-base/hide-no-result-message-autocomplete-net-maui.md @@ -0,0 +1,58 @@ +--- +title: How to Hide the No Result Message in the AutoComplete for .NET MAUI +description: Learn how to hide the "No result" message popup in the AutoComplete control for .NET MAUI +type: how-to +page_title: How to Hide the No Result Message in the AutoComplete for .NET MAUI +slug: hide-no-result-message-autocomplete-net-maui +tags: autocomplete, .net maui, hide, no result message +res_type: kb +--- +# Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 6.7.0 | Telerik UI for .NET MAUI ComboBox | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| + +## Description + +I want to hide the **No result** message window in the AutoComplete control for .NET MAUI when the entered email has not been saved in the system. + +## Solution + +To hide the **No results** message when there is nothing to show: + +**1.** Set the `NoResultsMessage` property to an empty string. + +```xml + +``` +The message won't be displayed but the Suggestion View will be visible. If you want to hide the Suggestion View: + +**2.** Set the `SuggestionViewBackgroundColor` property to a transparent color. + +```xml + +``` + +**3.** Set the `SuggestionViewBorderColor` property to a transparent color. + +```xml + +``` + +**4.** Set the `SuggestionViewBorderThickness` property to `0`. + +```xml + +``` + +**5.** Set the `SuggestionViewHeight` property to `0`. +```xml + +``` + +Note: Make sure to adjust the property values according to your specific implementation. + +## See Also + +- [AutoComplete for .NET MAUI Documentation](https://docs.telerik.com/devtools/maui/controls/autocomplete/autocomplete-overview) diff --git a/knowledge-base/make-sidedrawer-opacity-consistent-across-platforms-net-maui.md b/knowledge-base/make-sidedrawer-opacity-consistent-across-platforms-net-maui.md new file mode 100644 index 000000000..216a8caff --- /dev/null +++ b/knowledge-base/make-sidedrawer-opacity-consistent-across-platforms-net-maui.md @@ -0,0 +1,43 @@ +--- +title: Making SideDrawer Opacity Consistent across Platforms +description: Learn how to make the opacity of the .NET MAUI SideDrawer consistent across different platforms when the drawer opens. +type: how-to +page_title: How to Implement Consistent SideDrawer Opacity across Platforms in .NET MAUI +slug: make-sidedrawer-opacity-consistent-across-platforms-net-maui +tags: xamarin, .net-maui, sidedrawer, platform-consistency +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 6.7.0 | Telerik UI for .NET MAUI SideDrawer | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| + +## Description + +I want to make the SideDrawer opacity consistent across different platforms in .NET MAUI. Currently, on iOS, a darkening mask is added over the SideDrawer `MainContent` when the drawer is extended (opened). However, on Windows, the `MainContent` appears to brighten. I would like to achieve consistency in this behavior. + +## Solution + +To achieve consistent behavior for the SideDrawer content across different platforms, you can adjust the fade opacity when the drawer opens using the `DrawerTransitionFadeOpacity` property. The fade opacity value ranges from 0 to 1, where 0 represents no opacity and 1 represents full opacity. You can specify decimal values to better fit your specific scenario (0.1, 0.2, etc.). + +Here's an example of how to set the `DrawerTransitionFadeOpacity` property. The `DrawerTransitionFadeOpacity` property is set to `0` for iOS and `1` for WinUI. This ensures that the darkening mask is not applied on iOS and the `MainContent` appears consistent across platforms. + +```xaml + +``` + +## Notes + +- The SideDrawer control has different implementations for iOS, Android, and WinUI, which is why the behavior differs across platforms. +- Adjusting the `DrawerTransitionFadeOpacity` property allows you to achieve consistency in the SideDrawer content across different platforms. +- Make sure to set the appropriate value for the desired platform, taking into account the range from 0 to 1. + +## See Also + +- [SideDrawer Transitions]({%slug sidedrawer-features-transitions%}) +- [SideDrawer Configuration]({%slug sidedrawer-features-configuration%}) diff --git a/knowledge-base/migrating-xamarin-checkbox-maui-checkbox.md b/knowledge-base/migrating-xamarin-checkbox-maui-checkbox.md new file mode 100644 index 000000000..fe4d1ea48 --- /dev/null +++ b/knowledge-base/migrating-xamarin-checkbox-maui-checkbox.md @@ -0,0 +1,48 @@ +--- +title: Implementing the CheckBoxUserCommand Behavior When Migrating from Xamarin CheckBox to MAUI CheckBox +description: Learn how to implement the Xamarin CheckBoxUserCommand behavior in MAUI when migrating from Xamarin. +type: how-to +page_title: Migrating the Xamarin Checkbox CheckBoxUserCommand to MAUI +slug: migrating-xamarin-checkbox-maui-checkbox +tags: xamarin, maui, checkbox, migration +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 6.7.0 | Telerik UI for .NET MAUI CheckBox | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| + + +## Description + +When migrating your Xamarin app to MAUI, you may notice that the CheckBoxUserCommand behavior is missing in the Telerik MAUI CheckBox control. This article will show you how to implement a similar scenario in MAUI. + +## Solution + +To achieve a similar behavior in MAUI, you can use the `IsCheckedChanged` event along with the `EventToCommandBehavior` from the Microsoft Community Toolkit for MAUI. + +**1.** Add the `EventToCommandBehavior` package to your MAUI project. You can find more information on how to do this in the [Microsoft Community Toolkit documentation](https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/behaviors/event-to-command-behavior). + +**2.** In your MAUI XAML file, add the `RadCheckBox` control and the `EventToCommandBehavior` as a behavior. + +```xaml + + + + + +``` + +By using the `IsCheckedChanged` event and the `EventToCommandBehavior`, you can achieve a similar behavior to the `CheckBoxUserCommand` in the Xamarin CheckBox control. + +## Notes + +- Make sure to add the necessary namespaces for the `RadCheckBox` and `EventToCommandBehavior` controls in your XAML file. +- You may need to adjust the event handler or command binding based on your specific implementation. + +## See Also + +- [Migrating from Xamarin Checkbox to MAUI Checkbox](https://docs.telerik.com/devtools/maui/controls/checkbox/xamarin-migration)