问题
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.
回答1:
You can get what you want, you just have to edit the template to suit your needs. In expression blend,
- Right click the busy indicator, select edit template, edit a copy
- Inside the template, find the progress bar, and delete it
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>
回答2:
Change the stackpanel background to transparent.
来源：https://stackoverflow.com/questions/18984371/silverlight-busyindicator-background-color-for-the-message-box