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

Performance problems

5 Answers 168 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Daniel Ruehle
Top achievements
Rank 1
Daniel Ruehle asked on 19 Jul 2010, 09:29 AM
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

5 Answers, 1 is accepted

Sort by
0
Milan
Telerik team
answered on 19 Jul 2010, 09:39 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Daniel Ruehle
Top achievements
Rank 1
answered on 19 Jul 2010, 09:56 AM
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>



0
Milan
Telerik team
answered on 22 Jul 2010, 02:52 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Daniel Ruehle
Top achievements
Rank 1
answered on 23 Jul 2010, 12:18 PM
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

0
Milan
Telerik team
answered on 23 Jul 2010, 12:54 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Carousel
Asked by
Daniel Ruehle
Top achievements
Rank 1
Answers by
Milan
Telerik team
Daniel Ruehle
Top achievements
Rank 1
Share this question
or