This is a migrated thread and some comments may be shown as answers.

Extremely slow when having DropShadow

2 Answers 308 Views

BusyIndicator

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Marc Roussel asked on 15 Nov 2013, 01:00 PM

Hi,

Who can explain to me why my application is very slow when I set a DropShadow to the RadBusyIndicator ?
As soon as I remove the effect, everything is absolutely speedy !

Telerik : 2013.3.1016.1050
Silverlight 5 of course

Here's the xaml (Style followed by the declaration)

Style :

<LinearGradientBrush x:Key="BusyIndicatorBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="White" Offset="0"/>

<GradientStop Color="#A9DCDADA" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="BusyIndicatorBorderBrush" Color="#FFD0D0D0"/>

<LinearGradientBrush x:Key="BusyIndicatorIndeterminateBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFC92B" Offset="0"/>

<GradientStop Color="#FFFFF7A9" Offset="1"/>

<GradientStop Color="#FFFFFBCD" Offset="0.254"/>

<GradientStop Color="#FFFFC92B" Offset="0.5"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="BusyIndicatorIndeterminateBorderBrush" Color="#FFFFC92B"/>

<RadialGradientBrush x:Key="BusyIndicatorIndeterminateCommetFill" Center="0.5,-0.23" GradientOrigin="0.8,0.25" RadiusY="0.68" RadiusX="0.68">

<GradientStop Color="#BFFFFFFF" Offset="0"/>

<GradientStop Color="#00FFFFFF" Offset="1"/>

<GradientStop Color="#21FFFFFF" Offset="0.65"/>

</RadialGradientBrush>

<SolidColorBrush x:Key="BusyIndicatorProgressBackground" Color="#FFFEE05E"/>

<Style x:Key="BusyIndicatorProgressBarStyle" TargetType="telerik:RadProgressBar">

<Setter Property="Margin" Value="15 15 15 5"/>

<Setter Property="Maximum" Value="100"/>

<Setter Property="Orientation" Value="Horizontal"/>

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadProgressBar">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Determinate"/>

<VisualState x:Name="Indeterminate">

<Storyboard RepeatBehavior="Forever">

<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="IndeterminateDonut">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="IndeterminateDonut">

<SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Path x:Name="IndeterminateBackgroundDonut" Fill="{StaticResource BusyIndicatorIndeterminateBackground}" Height="44" RenderTransformOrigin="0.5 0.5" Stroke="{StaticResource BusyIndicatorIndeterminateBorderBrush}" Width="44">

<Path.Data>

<GeometryGroup FillRule="EvenOdd">

<EllipseGeometry Center="22 22" RadiusY="20" RadiusX="20"/>

<EllipseGeometry Center="22 22" RadiusY="14" RadiusX="14"/>

</GeometryGroup>

</Path.Data>

</Path>

<Path x:Name="IndeterminateDonut" Fill="{StaticResource BusyIndicatorIndeterminateCommetFill}" Height="44" RenderTransformOrigin="0.5 0.5" Visibility="Collapsed" Width="44">

<Path.Data>

<GeometryGroup FillRule="EvenOdd">

<EllipseGeometry Center="22 22" RadiusY="20" RadiusX="20"/>

<EllipseGeometry Center="22 22" RadiusY="14" RadiusX="14"/>

</GeometryGroup>

</Path.Data>

<Path.RenderTransform>

<TransformGroup>

<RotateTransform/>

</TransformGroup>

</Path.RenderTransform>

</Path>

<Grid x:Name="ProgressBarTrack" Height="24" RenderTransformOrigin="0.5 0.5" Width="24">

<Grid.Clip>

<EllipseGeometry Center="12 12" RadiusY="12" RadiusX="12"/>

</Grid.Clip>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Grid.RenderTransform>

<RotateTransform Angle="-90"/>

</Grid.RenderTransform>

<Rectangle x:Name="SkipValueSpacer"/>

<Rectangle x:Name="ProgressBarIndicator" Grid.Column="1" Fill="{StaticResource BusyIndicatorProgressBackground}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<SolidColorBrush x:Key="BusyIndicatorBusyOverlayBrush" Color="#88FFFFFF"/>

<Style x:Key="RadBusyIndicatorStyle" TargetType="telerik:RadBusyIndicator">

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="DisplayAfter" Value="00:00:00.1"/>

<Setter Property="Background" Value="{StaticResource BusyIndicatorBackground}"/>

<Setter Property="BorderBrush" Value="{StaticResource BusyIndicatorBorderBrush}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="VerticalContentAlignment" Value="Stretch"/>

<Setter Property="ProgressBarStyle" Value="{StaticResource BusyIndicatorProgressBarStyle}"/>

<Setter Property="telerik:AnimationManager.AnimationSelector">

<Setter.Value>

<telerik:AnimationSelector>

<telerik:FadeAnimation AnimationName="Hide" Direction="Out" TargetElementName="Indicator"/>

<telerik:FadeAnimation AnimationName="Show" Direction="In" TargetElementName="Indicator"/>

</telerik:AnimationSelector>

</Setter.Value>

</Setter>

<Setter Property="OverlayStyle">

<Setter.Value>

<Style TargetType="Rectangle">

<Setter Property="Fill" Value="{StaticResource BusyIndicatorBusyOverlayBrush}"/>

</Style>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadBusyIndicator">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="VisibilityStates">

<VisualState x:Name="Hidden">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Indicator">

<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.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay">

<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.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Indicator">

<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.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Overlay">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="BusyStatusStates">

<VisualState x:Name="Idle">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="Content">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<System:Boolean>True</System:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ProgressBar">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="0" Storyboard.TargetProperty="IsIndeterminate" Storyboard.TargetName="ProgressBar">

<DiscreteObjectKeyFrame KeyTime="00:00:00">

<DiscreteObjectKeyFrame.Value>

<System:Boolean>False</System:Boolean>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Busy">

<Storyboard>

<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="Content">

<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" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" IsEnabled="False" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Rectangle x:Name="Overlay" Style="{TemplateBinding OverlayStyle}" Fill="#68000000"/>

<Border x:Name="Indicator" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2" HorizontalAlignment="Center" MinWidth="180" VerticalAlignment="Center" BorderThickness="1">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF083161" Offset="0"/>

<GradientStop Color="#FF335F93" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<StackPanel Height="154" Width="236">

<telerik:RadProgressBar x:Name="ProgressBar" IsIndeterminate="{TemplateBinding IsIndeterminate}" Style="{TemplateBinding ProgressBarStyle}" Value="{TemplateBinding ProgressValue}" RenderTransformOrigin="0.5,0.5" Margin="15,30,15,5">

<telerik:RadProgressBar.RenderTransform>

<CompositeTransform ScaleX="2" ScaleY="2"/>

</telerik:RadProgressBar.RenderTransform>

</telerik:RadProgressBar>

<TextBlock TextWrapping="Wrap" Text="Un moment s.v.p..." Foreground="White" FontWeight="Bold" FontSize="13.333" TextAlignment="Center" Margin="0,27,0,0"/>

</StackPanel>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Declaration :

<telerik:RadBusyIndicator x:Name="BusyIndicator" BusyContent="Un moment s.v.p..." Style="{StaticResource RadBusyIndicatorStyle}" Foreground="Black" d:IsHidden="True" >

<telerik:RadBusyIndicator.Effect>

<DropShadowEffect BlurRadius="30" ShadowDepth="15"/>

</telerik:RadBusyIndicator.Effect>

</telerik:RadBusyIndicator>

id>

2 Answers, 1 is accepted

answered on 20 Nov 2013, 12:13 PM

Hi Marc,

The issue is caused by the DropShadowEffect in Silverlight. There are various resources over the net which describe the same issue. Our recommendation is to use Border around the item for which you want to show DropShadowEffect and style the border this way:

<Style x:Key="DropShadow" TargetType="Border">

<Setter Property="Background" Value="WhiteSmoke" />

<Setter Property="CornerRadius" Value="5" />

<Setter Property="BorderThickness" Value="1,1,4,4" />

<Setter Property="Margin" Value="10" />

<Setter Property="Padding" Value="6" />

<Setter Property="BorderBrush">

<Setter.Value>

<LinearGradientBrush>

<GradientStop Color="#ccc" Offset="0" />

<GradientStop Color="#ddd" Offset="1" />

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

This way you will not hit performance issues. Hopefully this helps. Feel free to contact us in case you have any problems or concerns.

Regards,
Rosen Vladimirov
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>