|
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