Performance problems

6 posts, 0 answers
  1. Daniel Ruehle
    Daniel Ruehle avatar
    19 posts
    Member since:
    May 2010

    Posted 19 Jul 2010 Link to this post

    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
  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 19 Jul 2010 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Daniel Ruehle
    Daniel Ruehle avatar
    19 posts
    Member since:
    May 2010

    Posted 19 Jul 2010 Link to this post

    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>



  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 22 Jul 2010 Link to this post

    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
  6. Daniel Ruehle
    Daniel Ruehle avatar
    19 posts
    Member since:
    May 2010

    Posted 23 Jul 2010 Link to this post

    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

  7. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 23 Jul 2010 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready