Load Maximized TileState info when Tile is Maximized (Tiles load slowly)

[Jonathon]

Hi,

Right now I am using RadFluidContentControl to know what to display in each tile state. What I am having problems with is performance issues. In my maximized tile state, I have multiple tabs with RadGridViews within each tab. When I take this portion of my code out, everything runs fine, however, when I put this in it loads up my tiles really slowly. I have a lot of tiles being displayed on the screen, and it would be nice if the large content of each tile was not loaded until the user clicked the maximize button. Here is my code:

<DataTemplate x:Key="ContentTemplate" telerik:ContainerBinding.ContainerBindings="{StaticResource ContainerBindingCollection}">

<telerik:RadFluidContentControl TransitionDuration="00:00:00.3" Transition="{StaticResource waveTransition}" ContentChangeMode="Manual" State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}">

<telerik:RadFluidContentControl.SmallContent>

<local:TileContentSmall />

</telerik:RadFluidContentControl.SmallContent>


<telerik:RadFluidContentControl.Content>

<local:TileContentRestored />

</telerik:RadFluidContentControl.Content>


<telerik:RadFluidContentControl.LargeContent>

<local:TileContentLarge />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</DataTemplate>

When I take out <local:TileContentLarge>, my program loads way faster.

Thanks,

Jonathon

[Zarko]

Hello Jonathon,
By design and idea the large content of the RadFluidContentControl shouldn't be loaded until it is needed. I've tested your case and I wasn't able to reproduce the issue so I'd like to ask you for some more code snippets. I've also attached the sample project that I used for testing so you could see that there's no delay on the initial loading in it.
Could you please examine this project and see if you do something differently?

Greetings,
Zarko
the Telerik team

[Jonathon]




    <UserControl.Resources>

<

FluidContentStateConverter x:Key="fluidContentStateConverter" />

 

<TileStateConverter x:Key="tileStateConverter" />

 

<telerik:ContainerBindingCollection x:Key="ContainerBindingCollection">

 

<telerik:ContainerBinding Binding="{Binding ContentState, Mode=TwoWay, Converter={StaticResource tileStateConverter}}" PropertyName="TileState" />

 

</telerik:ContainerBindingCollection>

       <SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF"/>

    <SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484"/>

    <SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF"/>

    <Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>

    <SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF"/>

    <Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>

    <SolidColorBrush x:Key="TileView_HeaderBackground" Color="White" />

    <LinearGradientBrush x:Key="TileView_ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FF282828"/>

        <GradientStop Color="#FF7C7C7C" Offset="1"/>

    </LinearGradientBrush>

    <SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF"/>

    <LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFFEEDB7" Offset="0"/>

        <GradientStop Color="#FFFACA6A" Offset="1"/>

        <GradientStop Color="#FFFFC94A" Offset="0.526"/>

        <GradientStop Color="#FFFEEDB7" Offset="0.509"/>

    </LinearGradientBrush>

    <LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFFECE95" Offset="0"/>

        <GradientStop Color="#FFFEB407" Offset="1"/>

        <GradientStop Color="#FFFEBB6E" Offset="0.517"/>

        <GradientStop Color="#FFE78318" Offset="0.539"/>

    </LinearGradientBrush>

    <CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">1</CornerRadius>

    <SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF"/>

    <LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="Black" Offset="0"/>

        <GradientStop Offset="1"/>

    </LinearGradientBrush>

    <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF"/>

    <CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>

    <CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>

    <SolidColorBrush x:Key="ControlOuterBorder_Selected" Color="#FFFFC92B"/>

    <SolidColorBrush x:Key="TileView_MaximizeArea_BorderBrush" Color="#B2FFCD27"/>

    <Thickness x:Key="TileView_MaximizeArea_BorderThickness">2</Thickness>

    <SolidColorBrush x:Key="TileView_MaximizeArea_Background" Color="#66FFF62D"/>

 

    <!--Maximize Toggle Button Style-->

    <Style x:Key="maximizeToggleStyle" TargetType="telerik:RadToggleButton">

        <Setter Property="VerticalAlignment" Value="Center"/>

        <Setter Property="HorizontalAlignment" Value="Right"/>

        <Setter Property="Width" Value="17"/>

        <Setter Property="Height" Value="17"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="telerik:RadToggleButton">

                    <Grid>

                        <VisualStateManager.VisualStateGroups>

                            <VisualStateGroup x:Name="FocusStates">

                                <VisualState x:Name="Focused"/>

                                <VisualState x:Name="Unfocused"/>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Disabled"/>

                                <VisualState x:Name="Normal"/>

                                <VisualState x:Name="MouseOver">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Pressed">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="CheckStates">

                                <VisualState x:Name="Checked">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">

                                            <DiscreteObjectKeyFrame KeyTime="0">

                                                <DiscreteObjectKeyFrame.Value>

                                                    <Visibility>Collapsed</Visibility>

                                                </DiscreteObjectKeyFrame.Value>

                                            </DiscreteObjectKeyFrame>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">

                                            <DiscreteObjectKeyFrame KeyTime="0">

                                                <DiscreteObjectKeyFrame.Value>

                                                    <Visibility>Visible</Visibility>

                                                </DiscreteObjectKeyFrame.Value>

                                            </DiscreteObjectKeyFrame>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Unchecked">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">

                                            <DiscreteObjectKeyFrame KeyTime="0">

                                                <DiscreteObjectKeyFrame.Value>

                                                    <Visibility>Visible</Visibility>

                                                </DiscreteObjectKeyFrame.Value>

                                            </DiscreteObjectKeyFrame>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">

                                            <DiscreteObjectKeyFrame KeyTime="0">

                                                <DiscreteObjectKeyFrame.Value>

                                                    <Visibility>Collapsed</Visibility>

                                                </DiscreteObjectKeyFrame.Value>

                                            </DiscreteObjectKeyFrame>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Indeterminate"/>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <Grid x:Name="Restore" Background="Transparent" Height="13" Width="13">

                            <ToolTipService.ToolTip>

                                <ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText"/>

                            </ToolTipService.ToolTip>

                            <Path x:Name="RestoreIcon" Data="M2,5 L2,8.9999999 6,8.9999999 6,5 z M0,3 L8,3 8,5 8,8.9999999 8,11 0,11 0,8.9999999 0,5 z M3,0 L11,0 11,2 11,8.9999999 9,8.9999999 9,2 3,2 z" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>

                            <Path Data="M1,12 L9,12 9,13 1,13 z M3.9999999,7 L3.9999999,9 6,9 6,7 z M3,6 L7,6 7,7 7,9 7,10 3,10 3,9 3,7 z M0,4 L1,4 1,12 0,12 z M12,1 L13,1 13,10 12,10 z M3,1 L3.9999999,1 3.9999999,3 10,3 10,4 10,10 12,10 12,11 10,11 10,12 9,12 9,4 1,4 1,3 3,3 z M3.9999999,0 L12,0 12,1 3.9999999,1 z" Fill="{StaticResource TileView_ButtonOuterBorder}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>

                        </Grid>

                        <Grid x:Name="Collapse" Background="Transparent" Height="5" Visibility="Collapsed" Width="12">

                            <ToolTipService.ToolTip>

                                <ToolTip telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText"/>

                            </ToolTipService.ToolTip>

                            <Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}" Stroke="{x:Null}" StrokeThickness="0.5"/>

                            <Rectangle x:Name="CollapseIcon" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stroke="{x:Null}" StrokeThickness="0.5"/>

                        </Grid>

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

<ControlTemplate x:Key="headerTemplate" TargetType="telerik:RadTileViewItem">   

        <Grid>

            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup x:Name="CommonStates">

                    <VisualState x:Name="Normal"/>

                    <VisualState x:Name="Disabled">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="MouseOver"/>

                </VisualStateGroup>

                <VisualStateGroup x:Name="TileStates">

                    <VisualState x:Name="Maximized">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">

                                <DiscreteObjectKeyFrame KeyTime="0">

                                    <DiscreteObjectKeyFrame.Value>

                                        <System:Boolean>True</System:Boolean>

                                    </DiscreteObjectKeyFrame.Value>

                                </DiscreteObjectKeyFrame>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="Restored">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">

                                <DiscreteObjectKeyFrame KeyTime="0">

                                    <DiscreteObjectKeyFrame.Value>

                                        <System:Boolean>False</System:Boolean>

                                    </DiscreteObjectKeyFrame.Value>

                                </DiscreteObjectKeyFrame>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

                <VisualStateGroup x:Name="SelectionStates">

                    <VisualState x:Name="Selected">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedItem">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="Unselected"/>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

            <Border x:Name="outerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}">

                <Border x:Name="outerContainer" BorderBrush="{StaticResource TileView_InneBorder}" BorderThickness="{StaticResource TileView_InneBorder_Thickness}" Background="Transparent" CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <StackPanel >

                            <Border BorderBrush="{StaticResource TileView_HeaderBorder}" BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"  CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0">

                                <Grid MinHeight="28">

                                    <Border x:Name="GripBarElement" Background="Transparent" />

                                   <telerik:RadToggleButton x:Name="MaximizeToggleButton" Cursor="Hand" Command="tileView:TileViewCommands.ToggleTileState" Style="{StaticResource maximizeToggleStyle}" Margin="0,6,25,0" VerticalAlignment="Top"/>

                                    <Button Cursor="Hand" Height="18" VerticalAlignment="Top" Width="18" HorizontalAlignment="Right" Margin="0,5,0,0"/>

                                </Grid>

                            </Border>

                        </StackPanel>

                        <Grid Background="Transparent" Grid.Row="1">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="0.919*"/>

                                <ColumnDefinition Width="0.081*"/>

                            </Grid.ColumnDefinitions>

                            <ContentPresenter x:Name="ContentElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.ColumnSpan="2" />

                        </Grid>

                        <Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" RadiusY="4" RadiusX="4" Grid.RowSpan="2" Visibility="Collapsed"/>

                    </Grid>

                </Border>

            </Border>

            <Grid x:Name="SelectedItem" Margin="-1" Visibility="Collapsed">

                <Border BorderBrush="{StaticResource ControlOuterBorder_Selected}" BorderThickness="2" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}"/>

            </Grid>

        </Grid>

    </ControlTemplate>

 

    <DataTemplate x:Key="ContentTemplate">

        <telerik:RadFluidContentControl Transition="{x:Null}" ContentChangeMode="Manual" State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}">

            <telerik:RadFluidContentControl.SmallContent>

                    <local:TileContentSmall />

            </telerik:RadFluidContentControl.SmallContent>

            <telerik:RadFluidContentControl.Content>

                    <local:TileContentRestored />

            </telerik:RadFluidContentControl.Content>

            <telerik:RadFluidContentControl.LargeContent>

                        <local:TileContentLarge  />

            </telerik:RadFluidContentControl.LargeContent>

        </telerik:RadFluidContentControl>

    </DataTemplate>

 

    <ControlTemplate x:Key="radTileViewTemplate" TargetType="telerik:RadTileView">

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup x:Name="CommonStates">

                    <VisualState x:Name="Normal"/>

                    <VisualState x:Name="Disabled">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="MouseOver"/>

                </VisualStateGroup>

                <VisualStateGroup x:Name="Docking">

                    <VisualState x:Name="DockTop">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaTop">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaBottom">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaLeft">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaRight">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="DockLeft">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaTop">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaBottom">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaLeft">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaRight">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="DockRight">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaTop">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaBottom">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaLeft">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaRight">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="DockBottom">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaTop">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaBottom">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaLeft">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaRight">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <VisualState x:Name="HideMaximizeArea">

                        <Storyboard>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaTop">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaBottom">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaLeft">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximizeAreaRight">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.RowSpan="2">

                <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Background="Transparent" HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ScrollViewerStyle1}" VerticalScrollBarVisibility="{Binding (ScrollViewer.VerticalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">

                    <ItemsPresenter/>

                </ScrollViewer>

            </Border>

            <Rectangle x:Name="DisabledVisual" Grid.ColumnSpan="2" Fill="{StaticResource DisabledBrush}" Grid.RowSpan="2" Visibility="Collapsed"/>

            <Border x:Name="MaximizeAreaTop" BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}" BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}" Background="{StaticResource TileView_MaximizeArea_Background}" Grid.ColumnSpan="2" Grid.Row="0" Visibility="Collapsed"/>

            <Border x:Name="MaximizeAreaBottom" BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}" BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}" Background="{StaticResource TileView_MaximizeArea_Background}" Grid.ColumnSpan="2" Grid.Row="1" Visibility="Collapsed"/>

            <Border x:Name="MaximizeAreaLeft" BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}" BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}" Background="{StaticResource TileView_MaximizeArea_Background}" Grid.Column="0" Grid.RowSpan="2" Visibility="Collapsed"/>

            <Border x:Name="MaximizeAreaRight" BorderBrush="{StaticResource TileView_MaximizeArea_BorderBrush}" BorderThickness="{StaticResource TileView_MaximizeArea_BorderThickness}" Background="{StaticResource TileView_MaximizeArea_Background}" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed"/>

        </Grid>

    </ControlTemplate>

 

    <!--Style for each of the tiles and also the content displayed in each tile-->

    <Style x:Key="RadTileStyle"  TargetType="telerik:RadTileViewItem">

        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

        <Setter Property="VerticalContentAlignment" Value="Stretch"/>

        <Setter Property="Background" Value="{StaticResource TileView_Background}"/>

        <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}"/>

        <Setter Property="BorderThickness" Value="1"/>

        <Setter Property="Padding" Value="7"/>

        <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplate}" />

        <Setter Property="Template" Value="{StaticResource headerTemplate}" />

    </Style>

 

    <DataTemplate x:Key="template" telerik:ContainerBinding.ContainerBindings="{StaticResource ContainerBindingCollection}" />

     

    <!--Style for all of RadTileView-->

    <Style x:Key="RadTileViewStyle1" TargetType="telerik:RadTileView">

        <Setter Property="PreservePositionWhenMaximized" Value="True" />

        <Setter Property="Background" Value="Transparent"/>

        <Setter Property="ScrollBarVisibility" Value="Auto"/>

        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

        <Setter Property="Padding" Value="7"/>

        <Setter Property="ItemTemplate" Value="{StaticResource template}" />

        <Setter Property="Template" Value="{StaticResource radTileViewTemplate}" />

        <Setter Property="ItemsPanel">

            <Setter.Value>

                <ItemsPanelTemplate>

                    <telerik:TileViewPanel/>

                </ItemsPanelTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    </UserControl.Resources> 

 

<telerik:RadTileView Grid.Row="0"

                             IsItemsAnimationEnabled="False"

                             Style="{StaticResource RadTileViewStyle1}"

                             RowHeight="308" MinimizedColumnWidth="275"

                             MinimizedRowHeight="195"

                             ColumnsCount="{Binding NumberOfColumns, Mode=TwoWay}"

                             x:Name="MyTileView" ItemsSource="{Binding Cases}"

                             ItemContainerStyle="{StaticResource RadTileStyle}"

Hi Zarko,

Thank you for the response. However, I am still unable to figure out what is going wrong even with your code. Here is my code:

[Jonathon]

Hi Zarko,

I edited my code down to this:

<UserControl.Resources>
<FluidContentStateConverter x:Key="fluidContentStateConverter" />
        <TileStateConverter x:Key="tileStateConverter" />
        <telerik:ContainerBindingCollection x:Key="ContainerBindingCollection">
            <telerik:ContainerBinding Binding="{Binding ContentState, Mode=TwoWay, Converter={StaticResource tileStateConverter}}" PropertyName="TileState" />
        </telerik:ContainerBindingCollection>
        <DataTemplate x:Key="ContentTemplate">
            <telerik:RadFluidContentControl Transition="{x:Null}" ContentChangeMode="Manual" State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}">
                <telerik:RadFluidContentControl.SmallContent>
                    <my:TileContentSmall />
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <my:TileContentRestored />
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <my:TileContentLarge />
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
        <DataTemplate x:Key="headerTemplate" telerik:ContainerBinding.ContainerBindings="{StaticResource ContainerBindingCollection}" />
    </UserControl.Resources>


    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <SolidColorBrush Color="#48ACC6"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <telerik:RadTileView Grid.Row="0"
                             IsItemsAnimationEnabled="False"
                             ContentTemplate="{StaticResource ContentTemplate}"
                             ItemTemplate="{StaticResource headerTemplate}"
                             RowHeight="308" MinimizedColumnWidth="275"
                             MinimizedRowHeight="195"
                             ColumnsCount="{Binding NumberOfColumns, Mode=TwoWay}"
                             x:Name="MyTileView" ItemsSource="{Binding Cases}" />
    </Grid>

And when I take out <my:TileContentLarge />, it still loads way faster, and then when I put it back in, it loads 4 times slower.

Jonathon

[Jonathon]

Hi Zarko,

I copied your files in your project to my project and tried loading and everything ran fine. It most likely is because the data that is being loaded into my tiles is loaded asynchronously, but the data loaded in the tiles in your project is static data. Something we are loading into the large tile view must be causing it to slow down because when I comment out the TileContentLarge, everything loads pretty fast.

Thanks,

Jonathon

[Petar Mladenov]

Hello Jonathon,

 In our project we set the ItemsSource of the GridViews in the constructor "TileContentLarge", do you call your services in this constructor too ? It basically fires for execustes for every RadTileView item, instead you can use the Loaded event like so:

public TileContentLarge()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(TileContentLarge_Loaded);
        }

        void TileContentLarge_Loaded(object sender, RoutedEventArgs e)
        {
            var items = new List<MyItem>();
            for (int i = 0; i < 50; i++)
            {
                items.Add(new MyItem() { Header = i.ToString() });
            }

            this.One.ItemsSource = items;
            this.One2.ItemsSource = items;
            this.Two.ItemsSource = items;
            this.Two2.ItemsSource = items;
            this.Three.ItemsSource = items;
            this.Three2.ItemsSource = items;
        }

This way you will load the ItemsSource of the GridViews only when a Tile is Maximized.
Please let us know if this helps you. 

Kind regards,
Petar Mladenov
the Telerik team

[Jonathon]

Hi Petar,

Thank you for the response. We do not call the services when it is loaded unfortunately because some of the values are used in TileContentRestored view since we have a small grid in the TileContentRestored view. We are testing to see if it is just the way we are loading the data we use.

Thanks,

Jonathon

[Jonathon]

Hi Petar,

Thanks for the great idea. This is what we did:

public TileContentLarge()

{

 this.Loaded += new RoutedEventHandler(TileContentLarge_Loaded);

}

void TileContentLarge_Loaded(object sender, RoutedEventArgs e)

{

 InitializeComponent();
 }

Thanks a lot. It's still not instant on load but it is about 4 times faster.

Jonathon