|
1 | 1 | ---
|
2 |
| -title: Displaying RadBusyIndicator In AI Prompt Control Popup |
3 |
| -description: Learn how to ensure RadBusyIndicator displays correctly over the AI Prompt Control popup in a UI for .NET MAUI application. |
| 2 | +title: Displaying BusyIndicator In AIPrompt Control Popup |
| 3 | +description: Learn how to ensure BusyIndicator displays correctly over the AIPrompt Control popup in a UI for .NET MAUI application. |
4 | 4 | type: how-to
|
5 |
| -page_title: Adding Custom RadBusyIndicator In AI Prompt Popup |
6 |
| -meta_title: Adding Custom RadBusyIndicator In AI Prompt Popup |
7 |
| -slug: displaying-radbusyindicator-over-ai-prompt-control-popup |
8 |
| -tags: radbusyindicator, ai prompt, popup, threading, controltemplate, ui-for-net-maui |
| 5 | +page_title: Adding Custom BusyIndicator In AI Prompt Popup |
| 6 | +meta_title: Adding Custom BusyIndicator In AI Prompt Popup |
| 7 | +slug: displaying-busyindicator-over-ai-prompt-control-popup |
| 8 | +tags: busyindicator, ai prompt, popup, threading, controltemplate, ui-for-net-maui |
9 | 9 | res_type: kb
|
10 | 10 | ticketid: 1697962
|
11 | 11 | ---
|
12 | 12 |
|
13 | 13 | ## Environment
|
14 | 14 |
|
15 |
| -<table> |
16 |
| -<tbody> |
17 |
| -<tr> |
18 |
| -<td> Product </td> |
19 |
| -<td> |
20 |
| -UI for .NET MAUI RadBusyIndicator, <br/> |
21 |
| -UI for .NET MAUI AI Prompt Control |
22 |
| -</td> |
23 |
| -</tr> |
24 |
| -<tr> |
25 |
| -<td> Version </td> |
26 |
| -<td> 10.1.0 </td> |
27 |
| -</tr> |
28 |
| -</tbody> |
29 |
| -</table> |
| 15 | +| Version | Product | |
| 16 | +| --- | --- | |
| 17 | +| 11.1.0 | BusyIndicator for .NET MAUI | |
| 18 | +| 11.1.0 | AIPrompt for .NET MAUI | |
30 | 19 |
|
31 | 20 | ## Description
|
32 | 21 |
|
33 |
| -When using the [RadBusyIndicator](https://docs.telerik.com/devtools/maui/controls/busyindicator/overview) in a UI for .NET MAUI application, it may fail to display over the AI Prompt Control popup. The issue occurs because the AI Prompt Control's popup has a higher Z-index, which causes the BusyIndicator to appear behind the popup. |
| 22 | +When using the [`RadBusyIndicator`](https://docs.telerik.com/devtools/maui/controls/busyindicator/overview) in a UI for .NET MAUI application, it may fail to display over the AIPrompt Control popup. The issue occurs because the AIPrompt Control's popup has a higher Z-index, which causes the BusyIndicator to appear behind the popup. |
34 | 23 |
|
35 | 24 | This knowledge base article also answers the following questions:
|
36 |
| -- How to display RadBusyIndicator inside AI Prompt Control popup? |
37 |
| -- Why does RadBusyIndicator appear behind AI Prompt Control popup? |
38 |
| -- How to fix Z-index issues with RadBusyIndicator and AI Prompt popup? |
| 25 | +- How to display BusyIndicator inside AIPrompt Control popup? |
| 26 | +- Why does BusyIndicator appear behind AIPrompt Control popup? |
| 27 | +- How to fix Z-index issues with BusyIndicator and AIPrompt popup? |
39 | 28 |
|
40 | 29 | ## Solution
|
41 | 30 |
|
42 |
| -To ensure the RadBusyIndicator displays correctly over the AI Prompt Control popup, customize the `ControlTemplate` of the AI Prompt Control and embed the BusyIndicator directly within the popup's layout. |
| 31 | +To ensure the `RadBusyIndicator` displays correctly over the AIPrompt Control popup, customize the `ControlTemplate` of the AIPrompt Control and embed the BusyIndicator directly within the popup's layout. |
43 | 32 |
|
44 | 33 | ### Steps to Resolve
|
45 | 34 |
|
46 |
| -1. Copy the `ControlTemplate` of the AI Prompt Control (see below). |
47 |
| -2. Insert the RadBusyIndicator into the visual tree of the AI Prompt Control's popup area. |
| 35 | +1. Copy the `ControlTemplate` of the AIPrompt Control (see below). |
| 36 | +2. Insert the BusyIndicator into the visual tree of the AIPrompt Control's popup area. |
48 | 37 | 3. Update the `ControlTemplate` in your project.
|
49 | 38 |
|
50 | 39 | ### Example Code
|
51 | 40 |
|
52 |
| -Below is an adjusted `MainPage.xaml` that ensures the BusyIndicator is part of the AI Prompt Control's popup: |
| 41 | +Below is an adjusted `MainPage.xaml` that ensures the BusyIndicator is part of the AIPrompt Control's popup: |
53 | 42 |
|
54 | 43 | ```xml
|
55 | 44 | <?xml version="1.0" encoding="utf-8" ?>
|
@@ -227,7 +216,7 @@ Below is an adjusted `MainPage.xaml` that ensures the BusyIndicator is part of t
|
227 | 216 |
|
228 | 217 | ## See Also
|
229 | 218 |
|
230 |
| -- [RadBusyIndicator Documentation](https://docs.telerik.com/devtools/maui/controls/busyindicator/overview) |
231 |
| -- [AI Prompt Control Overview](https://docs.telerik.com/devtools/maui/controls/ai-prompt/overview) |
232 |
| -- [Customizing Control Templates in .NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/templates/control-template) |
| 219 | +- [`RadBusyIndicator` Documentation](https://docs.telerik.com/devtools/maui/controls/busyindicator/overview) |
| 220 | +- [AIPrompt Control Overview](https://docs.telerik.com/devtools/maui/controls/aiprompt/overview) |
| 221 | +- [Customizing Control Templates in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate) |
233 | 222 |
|
0 commit comments