Extremely slow when having DropShadow

3 posts, 0 answers
  1. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 15 Nov 2013 Link to this post

    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="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>
                    </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. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 20 Nov 2013 Link to this post

    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 >>
  3. DevCraft banner
  4. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 22 Nov 2013 Link to this post

    Gorgeous

    Thank you :)
Back to Top