Skip to content

Commit 8cefb0e

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1245 from telerik/new-kb-displaying-radbusyindicator-over-ai-prompt-control-popup-c9aa6dc6cad145019f4905356787adff
Added new kb article displaying-radbusyindicator-over-ai-prompt-control-popup
2 parents 9660f5f + 7d533e4 commit 8cefb0e

File tree

2 files changed

+223
-0
lines changed

2 files changed

+223
-0
lines changed

‎knowledge-base/combobox-visual-states.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Setting the Visual States of the ComboBox
33
page_title: Configure the Visual States of the ComboBox Component - .NET MAUI Knowledge Base
44
description: Learn how to define the visual states of the Telerik UI for .NET MAUI ComboBox control.
55
type: how-to
6+
slug: combobox-visual-states-kb
67
tags: maui, combobox, visual states, .net maui combobox, focused, normal, disabled, hover, mouse over
78
res_type: kb
89
---

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

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

0 commit comments

Comments
 (0)