Silverlight BusyIndicator background color for the message box

StackOverflow https://stackoverflow.com/questions/18984371

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.

No correct solution

OTHER TIPS

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>

Change the stackpanel background to transparent.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top