Performance problems

[Daniel Ruehle]

Hello everyone,

I am using WPF App with carousel on an IPC with Windows 7 Embedded and 1GB RAM and Intel Atom 1,6 GHz. I have the Q1 Version of telerik controls. Carousel has shadow, scalling and opacity on.

My problem is that the performance is to bad, the scrolling of the carousel isn't fluid.

My question is what are the minimum requirements concering RAM, CPU for carousel control ?
How far performance depends on graphic chip ? 
Have somebody faced the same problems ?
How can I increase performance generally ?

It will be very pity to remove carousel from my application.

Thank you.

Daniel

[Milan]

Hello Daniel Ruehle,

Could you please give us more information about the application itself and data that is presented with RadCarousel. Performance can degrade when multiple effects are applied and the carousel items contain many visual elements like TextBlock, TextBox, etc. Reflection could also have a huge negative impact on performance. If we can have a better look at the application we might be able to find a way to improve performance.

Kind regards,
Milan
the Telerik team

[Daniel Ruehle]

Hello,

I use the carousel control as menu. I have put it into a usercontrol and control is added to content of a frame. pleas see screenshot.
The XAML Code is almost the same like example in demos. Carousel is bind to an xml file. Additionaly I have a timer running that updates my clock on the top right edge, but I don't think that timer cause the problem. 

Note: there is no problems on computers whith 3 GHz and 2 GB RAM.

Do you need more infos ?

Thank you

Daniel

XAML:

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <XmlDataProvider x:Key="CarouselItems" Source="/WpfHMIApp;Component/Model/ModulCollection.xml" XPath="ModulCollection/Modul" />
        <carousel:ArithmeticValueConverter x:Key="ArithmeticValueConverter" />
        <local:SizeConverter x:Key="SizeConverter"/>

        <Style TargetType="{x:Type telerik:CarouselItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
                        <Grid x:Name="grid" ClipToBounds="False"
                            Height="{Binding ActualHeight, Converter={StaticResource SizeConverter}, ConverterParameter=266, ElementName=CarouselControl}"
                            Width="{Binding ActualWidth, Converter={StaticResource SizeConverter}, ConverterParameter=250, ElementName=CarouselControl}"
                            SnapsToDevicePixels="True" d:DesignWidth="152" d:DesignHeight="112.96">
                            <Border RenderTransformOrigin="0.5, 1" ClipToBounds="False"
                                    Width="{Binding ElementName=CarouselItemInnerGrid, Path=ActualWidth}"
                                    Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Opacity}"
                                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Visibility}"
                                    BorderBrush="White" BorderThickness="0">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                    Path=ReflectionSettings.WidthOffset,
                                                    Converter={StaticResource ArithmeticValueConverter},
                                                    ConverterParameter=1}" ScaleY="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                    Path=ReflectionSettings.HeightOffset,
                                                    Converter={StaticResource ArithmeticValueConverter},
                                                    ConverterParameter=-1}"
                                                CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetY}" />
                                        <TranslateTransform
                                                X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetX}" />
                                        <SkewTransform
                                                AngleX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Angle}" />
                                    </TransformGroup>
                                </Border.RenderTransform>
                                <Border.OpacityMask>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop
                                                    Offset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.HiddenPercentage}"
                                                    Color="Transparent" />
                                            <GradientStop Offset="1" Color="Black" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.OpacityMask>
                                <Border.Background>
                                    <VisualBrush
                                            Visual="{Binding ElementName=CarouselItemInnerGrid}">
                                    </VisualBrush>
                                </Border.Background>
                            </Border>
                            <Grid x:Name="CarouselItemInnerGrid">
                                <Border x:Name="CarouselItemMainBorder" Opacity="0.5"
                                        BorderBrush="{x:Null}" BorderThickness="1,1,1,1"
                                        CornerRadius="5,5,5,5" SnapsToDevicePixels="True">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="108,472"
                                                StartPoint="108,23" MappingMode="Absolute">
                                            <GradientStop Color="Black" Offset="0.332" />
                                            <GradientStop Color="White" Offset="0.692" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border Opacity="1" BorderBrush="#3F000000"
                                        BorderThickness="1,1,1,1" CornerRadius="5,5,5,5"
                                        Margin="10,10,10,10" x:Name="CarouselItemInnerBorder"
                                        SnapsToDevicePixels="True">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="101,462"
                                                StartPoint="101,13" MappingMode="Absolute">
                                            <GradientStop Color="Orange" Offset="0.028" />
                                            <GradientStop Color="Black" Offset="0.15"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <ContentPresenter IsHitTestVisible="True" />
                                </Border>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="CarouselItemInnerBorder"
                                        Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="101,462"
                                                StartPoint="101,13" MappingMode="Absolute">
                                            <GradientStop Color="Orange" Offset="0" />
                                            <GradientStop Color="Black" Offset="0.22"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Background" TargetName="CarouselItemMainBorder" Value="Red"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsSelected" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter TargetName="CarouselItemInnerBorder"
                                    Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="101,462"
                                            StartPoint="101,13" MappingMode="Absolute">
                                            <GradientStop Color="White" Offset="0" />
                                            <GradientStop Color="Black" Offset="0.164"/>
                                            <GradientStop Color="White" Offset="1"/>
                                            <GradientStop Color="Black" Offset="0.5"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Background" TargetName="CarouselItemMainBorder">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="Black" Offset="0.692"/>
                                            <GradientStop Color="White" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
                        <Grid SnapsToDevicePixels="True">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="0.6*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label Content="{Binding Mode=Default, XPath=Name}"
                                Foreground="Black" FontSize="{Binding ActualHeight, Converter={StaticResource SizeConverter}, ConverterParameter=19, ElementName=CarouselControl}" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="/WpfHMIApp;Component/Fonts/#Comic Sans MS" Height="Auto" />
                            <Image Source="{Binding Mode=Default, XPath=Thumbnail}" Grid.RowSpan="1" Grid.Row="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <telerik:RadCarousel x:Name="mainMenuRadCarousel" ItemsSource="{Binding Source={StaticResource CarouselItems}}" Background="{x:Null}" HorizontalScrollBarVisibility="Hidden" Loaded="MainMenuCarouselLoaded">
        <telerik:RadCarousel.ReflectionSettings>
            <telerik:ReflectionSettings Visibility="Visible"/>
        </telerik:RadCarousel.ReflectionSettings>
        <telerik:RadCarousel.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadCarouselPanel x:Name="mainMenuRadCarouselPanel" IsPathVisible ="False" ItemsPerPage="5" PathPadding="0,0,0,100">
                </telerik:RadCarouselPanel>
            </ItemsPanelTemplate>
        </telerik:RadCarousel.ItemsPanel>
    </telerik:RadCarousel>
</Grid>

XML-File for Binding:

<?xml version="1.0" encoding="UTF-8" ?>
<ModulCollection>
  <Modul MainMenuVisible="true" SettingsVisible="true">
    <ViewPath>/View/DashBoardView.xaml</ViewPath>
    <SettingsViewPath>DashBoardSettingsView.xaml</SettingsViewPath>
    <Name>Dashboard</Name>
    <Thumbnail>/Icons/CarouselIcons/gauge.png</Thumbnail>
  </Modul>
  <Modul MainMenuVisible="true" SettingsVisible="false">
    <ViewPath>/View/WebBrowserView.xaml</ViewPath>
    <Name>Web Browser</Name>
    <Thumbnail>/Icons/CarouselIcons/Browser.png</Thumbnail>
  </Modul>
  <Modul MainMenuVisible="true" SettingsVisible="false">
    <ViewPath>/View/MediaPlayerView.xaml</ViewPath>
    <Name>Media Player</Name>
    <Thumbnail>/Icons/CarouselIcons/MediaPlayer.png</Thumbnail>
  </Modul>
  <Modul MainMenuVisible="true" SettingsVisible="true">
    <ViewPath>/View/SettingsView.xaml</ViewPath>
    <SettingsViewPath>/View/CommonSettingsView.xaml</SettingsViewPath>
    <Name>Settings</Name>
    <Thumbnail>/Icons/CarouselIcons/Settings.png</Thumbnail>
  </Modul>
  <Modul MainMenuVisible="true" SettingsVisible="false">
    <ViewPath>/View/CameraView.xaml</ViewPath>
    <Name>Camera</Name>
    <Thumbnail>/Icons/CarouselIcons/camera.png</Thumbnail>
  </Modul>
</ModulCollection>

[Milan]

Hi Daniel Ruehle,

I have tested this setup on my machine and as expected the carousel ran smoothly. What happens when you disable all effects (scaling, reflection, etc)

<telerik:RadCarousel x:Name="mainMenuRadCarousel" Background="{x:Null}">
    <telerik:RadCarousel.ReflectionSettings>
        <telerik:ReflectionSettings Visibility="Collapsed"/>
    </telerik:RadCarousel.ReflectionSettings>
    <telerik:RadCarousel.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadCarouselPanel x:Name="mainMenuRadCarouselPanel"
                                        IsOpacityEnabled="False" IsScalingEnabled="False"
                                      IsPathVisible ="False" ItemsPerPage="5" PathPadding="0,0,0,100">
            </telerik:RadCarouselPanel>
        </ItemsPanelTemplate>
    </telerik:RadCarousel.ItemsPanel>
</telerik:RadCarousel>

Regards,
Milan
the Telerik team

[Daniel Ruehle]

Hello Milan,

Whe I disable effects, performance is pretty good.

Another question, does Carousel explicit require DirectX  ?
I have found that there is no DirectX on the mashine installed.

BR,

Daniel

[Milan]

Hello Daniel Ruehle,

The WPF framework, by default, utilizes the DirectX framework but this utilization is done transparently and you shouldn't worry about it. 

Best wishes,
Milan
the Telerik team