Skip to content

Commit ca5eb50

Browse files
author
KB Bot
committed
Added new kb article displaying-radbusyindicator-over-ai-prompt-control-popup
1 parent acd3b9a commit ca5eb50

File tree

1 file changed

+233
-0
lines changed

1 file changed

+233
-0
lines changed

‎knowledge-base/displaying-radbusyindicator-over-ai-prompt-control-popup.md‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
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.
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
9+
res_type: kb
10+
ticketid: 1697962
11+
---
12+
13+
## Environment
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>
30+
31+
## Description
32+
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.
34+
35+
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?
39+
40+
## Solution
41+
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.
43+
44+
### Steps to Resolve
45+
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.
48+
3. Update the `ControlTemplate` in your project.
49+
50+
### Example Code
51+
52+
Below is an adjusted `MainPage.xaml` that ensures the BusyIndicator is part of the AI Prompt Control's popup:
53+
54+
```xml
55+
<?xml version="1.0" encoding="utf-8" ?>
56+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
57+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
58+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
59+
xmlns:vm="clr-namespace:AIPromptDemo"
60+
x:Class="AIPromptDemo.MainPage"
61+
x:Name="ThisPage">
62+
63+
<Grid x:DataType="vm:MainPageViewModel"
64+
Padding="30,0">
65+
<telerik:RadAIPromptButton HeightRequest="25"
66+
WidthRequest="55"
67+
Content="Ask AI"
68+
...>
69+
<telerik:RadAIPrompt x:Name="aiPrompt"
70+
HeightRequest="700"
71+
...>
72+
</telerik:RadAIPrompt>
73+
</telerik:RadAIPromptButton>
74+
</Grid>
75+
76+
<ContentPage.Resources>
77+
<ControlTemplate x:Key="AIPromptPopupContentViewControlTemplate">
78+
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}" Background="{TemplateBinding Background}" BorderColor="{TemplateBinding BorderColor}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding ContentPadding}" Shadow="{StaticResource AIPromptPopupContentViewShadow}">
79+
<Grid RowDefinitions="48, *">
80+
<ContentPresenter Grid.RowSpan="2" />
81+
<Grid Padding="8" Margin="8" HorizontalOptions="End" VerticalOptions="Center">
82+
<View.GestureRecognizers>
83+
<TapGestureRecognizer Command="{TemplateBinding ActualClosePopupCommand}" />
84+
</View.GestureRecognizers>
85+
<telerik:RadTemplatedButton Style="{TemplateBinding ActualClosePopupButtonStyle}" />
86+
</Grid>
87+
88+
<!-- CUSTOMIZATION
89+
Adding this RadBusyIndicator to the default ControlTemplate
90+
It is important to recognize that we are binding the control's properties to the page view model properties by setting the BindingContext -->
91+
<telerik:RadBusyIndicator x:Name="loadingIndicatorHeat"
92+
IsVisible="{Binding ShowBusyIndicator}"
93+
IsBusy="{Binding ShowBusyIndicator}"
94+
BindingContext="{Binding BindingContext, Source={x:Reference ThisPage}}"
95+
Grid.Row="0" Grid.RowSpan="2" AnimationType="Animation9" AnimationContentColor="White" AnimationContentHeightRequest="50" AnimationContentWidthRequest="50" BackgroundColor="#AA000000" >
96+
<telerik:RadBusyIndicator.BusyContent>
97+
<Label Text="Loading Data..." TextColor="White" FontSize="16" />
98+
</telerik:RadBusyIndicator.BusyContent>
99+
<telerik:RadBusyIndicator.BusyContentTemplate>
100+
<ControlTemplate>
101+
<Grid RowDefinitions="*,*,*">
102+
<Border Grid.Row="0" Stroke="Black" StrokeThickness="4" Background="Black" Padding="16,7,16,14" HorizontalOptions="Center" VerticalOptions="End">
103+
<Border.StrokeShape>
104+
<RoundRectangle CornerRadius="5,5,5,5" />
105+
</Border.StrokeShape>
106+
<Grid RowSpacing="5">
107+
<Grid.RowDefinitions>
108+
<RowDefinition Height="Auto" />
109+
<RowDefinition Height="Auto" />
110+
<RowDefinition Height="*" />
111+
</Grid.RowDefinitions>
112+
<ContentPresenter Content="{TemplateBinding Path=AnimationContent}" />
113+
<ContentPresenter Grid.Row="1" Content="{TemplateBinding Path=BusyContent}" HorizontalOptions="Center" />
114+
</Grid>
115+
</Border>
116+
</Grid>
117+
</ControlTemplate>
118+
</telerik:RadBusyIndicator.BusyContentTemplate>
119+
</telerik:RadBusyIndicator>
120+
</Grid>
121+
</telerik:RadBorder>
122+
</ControlTemplate>
123+
124+
<Shadow x:Key="AIPromptPopupContentViewShadow"
125+
Offset="{OnPlatform Default='0, 0', MacCatalyst='0, 8', WinUI='0, 8'}"
126+
Radius="{OnPlatform Default=0, MacCatalyst=40, WinUI=16}"
127+
Brush="{OnPlatform Default=Transparent, MacCatalyst=#40000000, WinUI=#24000000}" />
128+
129+
<Style x:Key="RadTemplatedButtonStyle" TargetType="telerik:RadTemplatedButton">
130+
<Setter Property="TextColor" Value="{DynamicResource RadOnBaseColor}" />
131+
<Setter Property="Background" Value="{DynamicResource RadBaseBrush}" />
132+
<Setter Property="BorderBrush" Value="{DynamicResource RadBorderColor}" />
133+
<Setter Property="BorderThickness" Value="1" />
134+
<Setter Property="Padding" Value="{OnPlatform Android='9, 11', iOS='9, 12.5', MacCatalyst='9, 6.5', WinUI='9, 5'}" />
135+
<Setter Property="CornerRadius" Value="4" />
136+
<Setter Property="Shadow" Value="{x:Null}" />
137+
<Setter Property="VisualStateManager.VisualStateGroups">
138+
<VisualStateGroupList>
139+
<VisualStateGroup x:Name="CommonStates">
140+
<VisualState x:Name="Normal">
141+
<VisualState.Setters>
142+
<Setter Property="telerik:RadTemplatedButton.Background" Value="{DynamicResource RadBaseBrush}" />
143+
</VisualState.Setters>
144+
</VisualState>
145+
<VisualState x:Name="PointerOver">
146+
<VisualState.Setters>
147+
<Setter Property="telerik:RadTemplatedButton.Background" Value="{DynamicResource RadBaseHoverBrush}" />
148+
</VisualState.Setters>
149+
</VisualState>
150+
<VisualState x:Name="Pressed">
151+
<VisualState.Setters>
152+
<Setter Property="telerik:RadTemplatedButton.Background" Value="{DynamicResource RadBaseActiveBrush}" />
153+
</VisualState.Setters>
154+
</VisualState>
155+
<VisualState x:Name="Disabled">
156+
<VisualState.Setters>
157+
<Setter Property="telerik:RadTemplatedButton.Background" Value="{DynamicResource RadBaseBrush}" />
158+
<Setter Property="Opacity" Value="0.6" />
159+
</VisualState.Setters>
160+
</VisualState>
161+
</VisualStateGroup>
162+
</VisualStateGroupList>
163+
</Setter>
164+
</Style>
165+
166+
<Style x:Key="RadAIPromptClosePopupButtonStyle" TargetType="telerik:RadTemplatedButton" BasedOn="{StaticResource RadTemplatedButtonStyle}">
167+
<Setter Property="BorderThickness" Value="0" />
168+
<Setter Property="Padding" Value="0" />
169+
</Style>
170+
171+
<Style x:Key="RadAIPromptPopupContentViewStyle" TargetType="telerik:AIPromptPopupContentView">
172+
<Setter Property="ControlTemplate" Value="{StaticResource AIPromptPopupContentViewControlTemplate}" />
173+
<Setter Property="BackgroundColor" Value="{DynamicResource RadSurfaceAltColor}" />
174+
<Setter Property="ClosePopupButtonStyle" Value="{StaticResource RadAIPromptClosePopupButtonStyle}" />
175+
<Setter Property="CornerRadius" Value="0" />
176+
</Style>
177+
178+
<Style x:Key="RadAIPromptButtonStyle" TargetType="telerik:RadAIPromptButton">
179+
<Setter Property="WidthRequest" Value="36" />
180+
<Setter Property="HeightRequest" Value="36" />
181+
<Setter Property="FontFamily" Value="{x:Static telerik:TelerikFont.Name}" />
182+
<Setter Property="FontSize" Value="16" />
183+
<Setter Property="TextColor" Value="{DynamicResource RadOnPrimaryColor}" />
184+
<Setter Property="Background" Value="{DynamicResource RadPrimaryColor}" />
185+
<Setter Property="BorderBrush" Value="Transparent" />
186+
<Setter Property="Content" Value="{x:Static telerik:TelerikFont.IconSparkle}" />
187+
<Setter Property="CornerRadius" Value="18" />
188+
<Setter Property="Padding" Value="0" />
189+
<Setter Property="HorizontalTextAlignment" Value="Center" />
190+
<Setter Property="VerticalTextAlignment" Value="Center" />
191+
<Setter Property="PopupContentViewStyle" Value="{StaticResource RadAIPromptPopupContentViewStyle}" />
192+
<Setter Property="VisualStateManager.VisualStateGroups">
193+
<VisualStateGroupList>
194+
<VisualStateGroup x:Name="CommonStates">
195+
<VisualState x:Name="Normal">
196+
<VisualState.Setters>
197+
<Setter Property="Background" Value="{DynamicResource RadPrimaryColor}" />
198+
</VisualState.Setters>
199+
</VisualState>
200+
<VisualState x:Name="PointerOver">
201+
<VisualState.Setters>
202+
<Setter Property="Background" Value="{DynamicResource RadPrimaryHoverColor}" />
203+
</VisualState.Setters>
204+
</VisualState>
205+
<VisualState x:Name="Pressed">
206+
<VisualState.Setters>
207+
<Setter Property="Background" Value="{DynamicResource RadPrimaryActiveColor}" />
208+
</VisualState.Setters>
209+
</VisualState>
210+
<VisualState x:Name="Disabled">
211+
<VisualState.Setters>
212+
<Setter Property="Background" Value="{DynamicResource RadPrimaryColor}" />
213+
<Setter Property="Opacity" Value="0.6" />
214+
</VisualState.Setters>
215+
</VisualState>
216+
</VisualStateGroup>
217+
</VisualStateGroupList>
218+
</Setter>
219+
</Style>
220+
221+
<Style TargetType="telerik:RadAIPromptButton" BasedOn="{StaticResource RadAIPromptButtonStyle}" />
222+
</ContentPage.Resources>
223+
</ContentPage>
224+
```
225+
226+
>note Important: ControlTemplates change over time as the control itself evolves and his example was built using v11.1.0. If you need help locating this, please open a Support Ticket. While Technical Support is unable to assist with your customizations, they can provide you with a copy of the XAML.
227+
228+
## See Also
229+
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)
233+

0 commit comments

Comments
 (0)