How can I restyle the RadBusyIndicator to remove all Telerik content

[Paul]

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]

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.

[Martin Ivanov]

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

[Psyduck]

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.