Silverlight BusyIndicator background color for the message box

Question

In Silverlight, I need the message box of a BusyIndicator to be transparent. I found a question asking the same but without any solution:

Silverlight BusyIndicator Background Colour

Part of the code I have is as follows:

<toolkit:BusyIndicator x:Name="WorkingLayout" Height="80">
        <toolkit:BusyIndicator.BusyContent>
            <StackPanel>
                <TextBlock Text="Wait please..." HorizontalAlignment="Center"></TextBlock>
                <Button x:Name="CancelButton" HorizontalAlignment="Center" Content="Cancel" Width="100" Click="CancelButton_Click" />
            </StackPanel>
        </toolkit:BusyIndicator.BusyContent>
        <!-- Rest of component code -->
</toolkit:BusyIndicator>

Is there a way to make all the content background transparent, including the box containing the message, not in grey gradient as it comes as default?

I tried to set the property Background to transparent like that:

<toolkit:BusyIndicator x:Name="WorkingLayout" Height="80" Background="Transparent">

But it didn't work.

Answer 1

You can get what you want, you just have to edit the template to suit your needs. In expression blend,

1. Right click the busy indicator, select edit template, edit a copy
2. Inside the template, find the progress bar, and delete it

3. If you want to remove the gray box, move the Content presenter up to a higher grid, and delete the border objects here is one sample busyindicator i made,

           <Setter Property="HorizontalAlignment" Value="Stretch"/>
           <Setter Property="VerticalAlignment" Value="Stretch"/>
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Stretch"/>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="toolkit:BusyIndicator">
                       <Grid>
                           <VisualStateManager.VisualStateGroups>
                               <VisualStateGroup x:Name="VisibilityStates">
                                  <VisualState x:Name="Hidden">
                                       <Storyboard>
                                         <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="busycontent" 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="busycontent" 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>
                                          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever">
                                              <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                               <EasingDoubleKeyFrame KeyTime="00:00:01" Value="360"/>
                                           </DoubleAnimationUsingKeyFrames>
                                       </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>
                                                       <System:Boolean>True</System: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>
                                                       <System:Boolean>False</System:Boolean>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                          </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                 </VisualState>
                               </VisualStateGroup>
                           </VisualStateManager.VisualStateGroups>
                           <ContentControl x:Name="content" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                           <Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/>
                           <ContentPresenter x:Name="busycontent">
                               <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                   <Ellipse x:Name="ellipse" Margin="-13,-46,-15,-44" StrokeThickness="15" RenderTransformOrigin="0.5,0.5">
                                       <Ellipse.RenderTransform>
                                           <TransformGroup>
                                               <ScaleTransform/>
                                               <SkewTransform/>
                                               <RotateTransform/>
                                               <TranslateTransform/>
                                           </TransformGroup>
                                       </Ellipse.RenderTransform>
                                       <Ellipse.Stroke>
                                           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                              <GradientStop Color="Black" Offset="0"/>
                                               <GradientStop Color="Transparent" Offset="0.94"/>
                                           </LinearGradientBrush>
                                       </Ellipse.Stroke>
                                   </Ellipse>
                                   <ContentPresenter Margin="8,8,12,8" Content="{TemplateBinding BusyContent}" ContentTemplate="{TemplateBinding BusyContentTemplate}"/>
                               </Grid>
                           </ContentPresenter>
                       </Grid>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
   </UserControl.Resources>
   <Grid x:Name="LayoutRoot" Background="White">
       <toolkit:BusyIndicator Background="Transparent" Style="{StaticResource BusyIndicatorStyle1}" BorderThickness="0" x:Name="WorkingLayout" Height="80" Margin="65,110,123,110">
           <!--<toolkit:BusyIndicator.OverlayStyle>
               <Style TargetType="Rectangle">
                   <Setter Property="Fill" Value="White"/>
                   <Setter Property="Opacity" Value="0.5"/>
               </Style>
           </toolkit:BusyIndicator.OverlayStyle>-->
           <toolkit:BusyIndicator.BusyContent>
               <StackPanel>
                   <TextBlock Text="Wait please..." HorizontalAlignment="Center"></TextBlock>
                   <Button x:Name="CancelButton" HorizontalAlignment="Center" Content="Cancel" Width="100"  />
               </StackPanel>
           </toolkit:BusyIndicator.BusyContent>
           <!-- Rest of component code -->
       </toolkit:BusyIndicator>
   
   
   </Grid>
   

Answer 2

Change the stackpanel background to transparent.