This project has moved. For the latest updates, please go here.

BusyIndicator transparent backgound

Nov 24, 2016 at 8:46 AM
Edited Nov 24, 2016 at 8:51 AM
I pasted transparent gif into busy indicator
My code is
<xctk:BusyIndicator Name="ProgressIndicator" IsBusy="False">
            <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>
The loading gif also transparent. But when busy indicator is running it has gradient background from white to gray. I download source files and change Content Presenter code block to this code block. I made changes in file WPF.Toolkit > BusyIndicator > Themes > Generic.xaml
 <ContentPresenter x:Name="busycontent">
                     <ContentPresenter.Content>
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                           <Border Background="Transparent" BorderThickness="1" CornerRadius="2">
                              <Border CornerRadius="1.5" Margin="1" Background="Transparent">
                                 <Grid x:Name="_grid" 
                                       MinWidth="150">
                                    <Grid.RowDefinitions>
                                       <RowDefinition />
                                       <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <ContentPresenter x:Name="busyContent"
                                                      Content="{TemplateBinding BusyContent}"
                                                      ContentTemplate="{TemplateBinding BusyContentTemplate}"
                                                      HorizontalAlignment="Center"
                                                      Margin="8" />
                                    <ProgressBar Grid.Row="1" Style="{TemplateBinding ProgressBarStyle}" >
                                       <ProgressBar.Width>
                                          <MultiBinding Converter="{StaticResource ProgressBarWidthConverter}">
                                             <Binding Path="ActualWidth"
                                                      ElementName="busyContent" />
                                             <Binding Path="MinWidth"
                                                      ElementName="_grid" />
                                          </MultiBinding>
                                       </ProgressBar.Width>
                                    </ProgressBar>
                                 </Grid>
                              </Border>
                           </Border>
                        </Grid>
                     </ContentPresenter.Content>
                  </ContentPresenter>
Thereafter the transparency is worked correctly. Is there another way to set transparency without changing source files?
Nov 24, 2016 at 9:01 AM
Before editing sources
Image

After editing sources
Image
Nov 24, 2016 at 10:09 AM
I just needed to overwrite style xctk:BusyIndicator Style="{StaticResource MyStyle}"
Marked as answer by vgogi on 11/24/2016 at 3:09 AM