user2455111 user2455111 - 15 days ago 6
C# Question

Transparent busy indicator

I'm using busy indicator from wpftoolkit library. This is my code:

<Window x:Class="BusyControl.MainWindow"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<xctk:BusyIndicator Name="ProgressIndicator" IsBusy="False" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
<xctk:BusyIndicator.BusyContentTemplate>
<DataTemplate>
<StackPanel>
<Image gif:ImageBehavior.AnimatedSource="Resources/loading.gif" Width="150" Height="50" />
<TextBlock Text="{Binding ElementName=ProgressIndicator, Path=BusyContent}" HorizontalAlignment="Center" Margin="3"></TextBlock>
</StackPanel>
</DataTemplate>
</xctk:BusyIndicator.BusyContentTemplate>
<xctk:BusyIndicator.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</xctk:BusyIndicator.ProgressBarStyle>
<Grid>
<Button Content="Click me" Click="ButtonBase_OnClick" Width="100" Height="50"></Button>
</Grid>
</xctk:BusyIndicator>
</Grid>
</Window>


But my busy indicator looks like

before

but I need transparent busy indicator like this

After

How can I do that?

Answer

The answer will be either styling or changing the template. Here is a question with an answer that shows changing the Template and Styling of that control.

Of course the devil is in the detail... you'll need to do some research to find out specifically what the structure of the control is, to work out how you want to style it. And if you haven't done this kind of thing, I should manage your expectations that it may take a little time to work out what you need to do.