How can I restyle the RadBusyIndicator to remove all Telerik content

2 Answers 31 Views
BusyIndicator Styling
Paul
Top achievements
Rank 1
Veteran
Paul asked on 02 Aug 2021, 06:32 PM

This XAML provides the following image.
<telerik:RadBusyIndicator IsBusy="True" BusyContent="This is all I want to see">

However I actually have my own content to see here. I don't want anything baked in. So I override the BusyContentTemplate:
<telerik:RadBusyIndicator.BusyContentTemplate>
   <DataTemplate>
      <Border Background="Red">
         <TextBlock Text="This is all I want to see" />
      </Border>
   </DataTemplate>
</telerik:RadBusyIndicator.BusyContentTemplate>

Swing and a miss. All I want is my text. Technically a lot of content that I don't need to replicate here. Ok, now let's override the progress bar.
<telerik:RadBusyIndicator.ProgressBarStyle>
   <Style TargetType="telerik:RadProgressBar">
      <Setter Property="Visibility" Value="Collapsed" />
   </Style>
</telerik:RadBusyIndicator.ProgressBarStyle>

Closer but Telerik still has some content around mine. One more try:
<telerik:RadBusyIndicator.OverlayStyle>
   <Style TargetType="Rectangle">
      <Setter Property="Visibility" Value="Collapsed" />
   </Style>
</telerik:RadBusyIndicator.OverlayStyle>

No changes at all from this. How can I simply make my own busy indicator?

Paul
Top achievements
Rank 1
Veteran
commented on 02 Aug 2021, 11:26 PM

I don't care for this solution but the following hacky code added to the Grid in my DataTemplate works:

Margin="-30,-6,-30,-32"

If anyone knows a better way I'd appreciate it.

2 Answers, 1 is accepted

Sort by
1
Accepted
Martin Ivanov
Telerik team
answered on 03 Aug 2021, 11:53 AM

Hello Paul,

To achieve your requirement, you can use your current ProgressBarStyle and BusyContentTemplate settings along with Transparent BorderBrush and Background.

<telerik:RadBusyIndicator IsBusy="True" Background="Transparent" BorderBrush="Transparent">
	<telerik:RadBusyIndicator.ProgressBarStyle>
		<Style TargetType="telerik:RadProgressBar">
			<Setter Property="Visibility" Value="Collapsed" />
		</Style>
	</telerik:RadBusyIndicator.ProgressBarStyle>
	<telerik:RadBusyIndicator.BusyContentTemplate>
		<DataTemplate>
			<Border Background="Red">
				<TextBlock Text="This is all I want to see" />
			</Border>
		</DataTemplate>
	</telerik:RadBusyIndicator.BusyContentTemplate>	
</telerik:RadBusyIndicator>

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
answered on 03 Aug 2021, 07:55 AM

Hello.

Isn't it that you don't like gray borders and round progress bars?
If so, I recommend changing your style. There are different styles of progress bars.

If you just want text instead of that, you need to customize the Template.

You can check the busyindicator creation structure in implicit no xaml.

 

xmlns:sys="clr-namespace:System;assembly=mscorlib"
<telerik:RadBusyIndicator IsBusy="True" >
	<telerik:RadBusyIndicator.Template>
		<ControlTemplate TargetType="telerik:RadBusyIndicator">
			<Grid>
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="VisibilityStates">
						<VisualState x:Name="Hidden">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Indicator" Storyboard.TargetProperty="(UIElement.Visibility)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Collapsed</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(UIElement.Visibility)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Collapsed</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Visible">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Indicator" Storyboard.TargetProperty="(UIElement.Visibility)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(UIElement.Visibility)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Visible</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
					<VisualStateGroup x:Name="BusyStatusStates">
						<VisualState x:Name="Idle">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Content" Storyboard.TargetProperty="(Control.IsEnabled)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<sys:Boolean>True</sys:Boolean>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="ProgressBar" Storyboard.TargetProperty="(UIElement.Visibility)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<Visibility>Collapsed</Visibility>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="0" Storyboard.TargetName="ProgressBar" Storyboard.TargetProperty="IsIndeterminate">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<sys:Boolean>False</sys:Boolean>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Busy">
							<Storyboard>
								<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Content" Storyboard.TargetProperty="(Control.IsEnabled)">
									<DiscreteObjectKeyFrame KeyTime="00:00:00">
										<DiscreteObjectKeyFrame.Value>
											<sys:Boolean>False</sys:Boolean>
										</DiscreteObjectKeyFrame.Value>
									</DiscreteObjectKeyFrame>
								</ObjectAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<ContentControl x:Name="Content"
                                Foreground="{TemplateBinding Foreground}"
                                IsEnabled="False"
                                IsTabStop="False"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
				<Rectangle x:Name="Overlay" Style="{TemplateBinding OverlayStyle}"/>
				<Border x:Name="Indicator"
                                MinWidth="180"
                                CornerRadius="2"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                BorderBrush="Transparent"
                                BorderThickness="0">
					<StackPanel>
						<telerik:RadProgressBar x:Name="ProgressBar" 
                                        AutomationProperties.Name="progress bar"
                                        IsIndeterminate="{TemplateBinding IsIndeterminate}"
                                        Value="{TemplateBinding ProgressValue}"
                                        Style="{TemplateBinding ProgressBarStyle}"
										Visibility="Collapsed"/>
						<ContentPresenter Margin="15 5 15 15" HorizontalAlignment="Center" ContentTemplate="{TemplateBinding BusyContentTemplate}"
												  Content="Hello Custom BusyIndicator Text."/>
					</StackPanel>
				</Border>
			</Grid>
		</ControlTemplate>
	</telerik:RadBusyIndicator.Template>
</telerik:RadBusyIndicator>

Bringing up the basic structure, the yellow pen is the modified part.

 

I hope I can be of any help to you.

Tags
BusyIndicator Styling
Asked by
Paul
Top achievements
Rank 1
Veteran
Answers by
Martin Ivanov
Telerik team
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Bronze
Share this question
or