RadFluidContentControl & Performance

[Christophe]

Hi,

I'm using the RadTileView with the RadFluidContentControl as explained in this article by telerik. It works fine on my dev computer and another computer that is supposed to be pretty slow.
When I try it onto the latest MS Surface Pro3 (i3, 64GB ssd) the animation in my TileView is lagging a lot, and I only display 4 items !!!!
Am I doing something wrong ?

Here is my XAML code below:

001.<Style x:Key="RadTileViewItemStyle" TargetType="{x:Type telerik:RadTileViewItem}">
002.    <Setter Property="TileState" Value="{Binding ContentState, Mode=TwoWay, Converter={StaticResource tileStateConverter}}" />
003.    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
004.    <Setter Property="VerticalContentAlignment" Value="Stretch" />
005.    <Setter Property="SnapsToDevicePixels" Value="True" />
006.    <Setter Property="Template">
007.        <Setter.Value>
008.            <ControlTemplate TargetType="{x:Type telerik:RadTileViewItem}">
009.                <Grid>
010.                    <Border x:Name="outerBorder"
011.                        Margin="{TemplateBinding Padding}"
012.
013.                        BorderBrush="{TemplateBinding BorderBrush}"
014.                        BorderThickness="{TemplateBinding BorderThickness}"
015.                        CornerRadius="7">
016.                        <Border.Background>
017.                            <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.5,0.5" Opacity="0.75">
018.                                <GradientStop Color="White" Offset="0" ></GradientStop>
019.                                <GradientStop Color="Gray" Offset="1" ></GradientStop>
020.                            </RadialGradientBrush>
021.                        </Border.Background>
022.                        <Border.Effect>
023.                            <DropShadowEffect BlurRadius="2" Color="#888" Direction="-45" ShadowDepth="2" />
024.                        </Border.Effect>
025.                        <Border x:Name="outerContainer"
026.                            Background="Transparent">
027.                            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}">
028.                                <telerik:RadFluidContentControl.SmallContent>
029.                                    <telerik:RadButton Command="tileView:TileViewCommands.ToggleTileState" OverridesDefaultStyle="False">
030.                                        <Button.Template>
031.                                            <ControlTemplate TargetType="{x:Type Button}">
032.                                                <Grid>
033.                                                    <Image Stretch="Uniform" Cursor="Hand">
034.                                                        <Image.Style>
035.                                                            <Style>
036.                                                                <Setter Property="Image.Source" Value="{Binding SetupImage}" />
037.                                                                <Setter Property="UIElement.Opacity" Value=".4"/>
038.                                                                <Style.Triggers>
039.                                                                    <Trigger Property="UIElement.IsMouseOver" Value="True">
040.                                                                        <Setter Property="Image.Source" Value="{Binding SetupImage}" />
041.                                                                        <Setter Property="UIElement.Opacity" Value="1"/>
042.                                                                    </Trigger>
043.                                                                </Style.Triggers>
044.                                                            </Style>
045.                                                        </Image.Style>
046.                                                    </Image>
047.                                                    <Viewbox Margin="20">
048.                                                        <TextBlock Text="{Binding Name}" FontFamily="Calibri" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center">
049.                                                            <TextBlock.Effect>
050.                                                                <DropShadowEffect BlurRadius="2" Color="#FFF" Direction="-45" ShadowDepth=".5" />
051.                                                            </TextBlock.Effect>
052.                                                        </TextBlock>
053.                                                    </Viewbox>
054.                                                </Grid>
055.                                            </ControlTemplate>
056.                                        </Button.Template>
057.                                    </telerik:RadButton>
058.                                </telerik:RadFluidContentControl.SmallContent>
059.                                <telerik:RadFluidContentControl.Content>
060.                                    <telerik:RadButton Command="tileView:TileViewCommands.ToggleTileState" OverridesDefaultStyle="False">
061.                                        <Button.Template>
062.                                            <ControlTemplate TargetType="{x:Type Button}">
063.                                                <Grid Cursor="Hand">
064.                                                    <Image >
065.                                                        <Image.Style>
066.                                                            <Style>
067.                                                                <Setter Property="Image.Source" Value="{Binding SetupImage}" />
068.                                                                <Setter Property="UIElement.Opacity" Value=".4"/>
069.                                                                <Style.Triggers>
070.                                                                    <Trigger Property="UIElement.IsMouseOver" Value="True">
071.                                                                        <Setter Property="Image.Source" Value="{Binding SetupImage}" />
072.                                                                        <Setter Property="UIElement.Opacity" Value="1"/>
073.                                                                    </Trigger>
074.                                                                </Style.Triggers>
075.                                                            </Style>
076.                                                        </Image.Style>
077.                                                    </Image>
078.                                                    <Viewbox Margin="40">
079.                                                        <TextBlock Text="{Binding Name}" FontFamily="Calibri" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center">
080.                                                            <TextBlock.Effect>
081.                                                                <DropShadowEffect BlurRadius="4" Color="#FFF" Direction="-45" ShadowDepth=".5" />
082.                                                            </TextBlock.Effect>
083.                                                        </TextBlock>
084.                                                    </Viewbox>
085.                                                </Grid>
086.                                            </ControlTemplate>
087.                                        </Button.Template>
088.                                    </telerik:RadButton>
089.                                </telerik:RadFluidContentControl.Content>
090.                                <telerik:RadFluidContentControl.LargeContent>
091.                                    <Grid>
092.                                        <Grid.Background>
093.                                            <ImageBrush ImageSource="{Binding SetupImage}" Opacity="0.35" Stretch="UniformToFill" TileMode="None"></ImageBrush>
094.                                        </Grid.Background>
095.                                        <Grid.RowDefinitions>
096.                                            <RowDefinition Height="Auto"></RowDefinition>
097.                                            <RowDefinition Height="*"></RowDefinition>
098.                                            <RowDefinition Height="Auto"></RowDefinition>
099.                                        </Grid.RowDefinitions>
100.                                        <TextBlock Grid.Row="0" Padding="10" Text="{Binding Version}" HorizontalAlignment="Right" VerticalAlignment="Top"></TextBlock>
101.                                        <TextBlock Grid.Row="0" Padding="10" FontFamily="Calibri" FontSize="20" FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Left"></TextBlock>
102.                                        <telerik:RadButton Grid.Row="1" Command="tileView:TileViewCommands.ToggleTileState" OverridesDefaultStyle="False" Cursor="Hand">
103.                                            <Button.Template>
104.                                                <ControlTemplate TargetType="{x:Type Button}">
105.                                                    <TextBlock Padding="10" TextWrapping="Wrap" Text="{Binding Description}" FontFamily="Calibri" Foreground="Black" FontSize="12pt">
106.                                                    </TextBlock>
107.                                                </ControlTemplate>
108.                                            </Button.Template>
109.                                        </telerik:RadButton>
110.                                        <Border Grid.Row="2" BorderBrush="White" BorderThickness="2" CornerRadius="6" Cursor="Hand" Width="120" Height="60" Margin="0,0,0,10">
111.                                            <Border.Style>
112.                                                <Style>
113.                                                    <Setter Property="Border.Background" Value="LightGray"></Setter>
114.                                                    <Setter Property="UIElement.Opacity" Value="0.7"></Setter>
115.                                                    <Style.Triggers>
116.                                                        <Trigger Property="UIElement.IsMouseOver" Value="True">
117.                                                            <Setter Property="UIElement.Opacity" Value="1"/>
118.                                                        </Trigger>
119.                                                    </Style.Triggers>
120.                                                </Style>
121.                                            </Border.Style>
122.                                            <Button Height="Auto" Width="Auto" OverridesDefaultStyle="False" ClickMode="Release" Command="{Binding DebugCommand}" CommandParameter="{Binding}">
123.                                                <Button.Template>
124.                                                    <ControlTemplate TargetType="{x:Type Button}">
125.                                                        <Viewbox>
126.                                                            <TextBlock Text="Run"></TextBlock>
127.                                                        </Viewbox>
128.                                                    </ControlTemplate>
129.                                                </Button.Template>
130.                                            </Button>
131.                                        </Border>
132.                                    </Grid>
133.                                </telerik:RadFluidContentControl.LargeContent>
134.                            </telerik:RadFluidContentControl>
135.                        </Border>
136.                    </Border>
137.                </Grid>
138.            </ControlTemplate>
139.        </Setter.Value>
140.    </Setter>
141.</Style>

And my RadTileView:

01.<telerik:RadTileView x:Name="taskTileList" Grid.Row="1" VerticalAlignment="Top" ColumnsCount="2" ColumnWidth=".5*" IsAutoScrollingEnabled="False" IsDockingEnabled="False" Padding="30"
02.                     ItemsSource="{Binding Tasks}"
03.                     ItemTemplate="{StaticResource taskHeaderTemplate}"
04.                     ItemContainerStyle="{StaticResource RadTileViewItemStyle}"
05.                     IsItemDraggingEnabled="False"
06.                     MinimizedColumnWidth="210"
07.                     MinimizedRowHeight="140"
08.                     MinimizedItemsPosition="Right"
09.                     TileStateChangeTrigger="SingleClick"
10.                     PreservePositionWhenMaximized="True">
11.</telerik:RadTileView>

What can I do to improve those performance ? Should I give up on the opacity < 1 and gradients ?

Cheers,

Chris

 

[Kiril Vandov]

Hello Chris,

Unfortunately some complex animations in WPF are not so smooth when executed on Tablet devices. I have tested the TileView on a computer with 2GB of ram and it still performed better than the test made on the Table with better parameters.
We could suggest you to disable the animation by setting the "telerik:AnimationManager.IsAnimationEnabled="False"" attached property of the RadTileView. If you make the template more "light weight" with less borders and UIElement you may have a little improvement but the animation will still not be smooth like the one on PC.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik