TileViewItem.SmallContent mixed with TileViewItem.Content

[Ivan Kopcanski]

Hi,
     Bellow, you will find the user control we are trying to create using tile view.
The tile control contains five TileViewItem-s and the last two ones are commented out.

Steps to reproduce the issue:

1.) Open tileview is in its initial mode and notice that all items present their Content - properly.
2.) Double click (or click on minimize icon) at the header of any item and notice how that item shows its LargeContent while
     other ones present their SmallContent - properly.
3.) Double click (or click on minimize icon) at the header of any 'minimized' item at the right. That item will show its LargeContent
     in the middle, but the previous item that should be 'minimized' and should show its SmallContent will show its Content instead.
     That is not proper behavior.

The issue appears only when we have three items and when you uncomment the two last ones issue dissapears.
With 2, 4, and 5 items, when item is 'minimized' it will show its Content for a while and then there will be transition to its SmallContent.
With 3 items that transition is missing.

Could you please help us with this?

<UserControl x:Class="InvoiceDetailsView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikNav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerikAni="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
>

    <UserControl.Resources>
        <Style  TargetType="TextBlock" x:Key="HeaderTitle">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Padding" Value="0" />
        </Style>
        <Style  TargetType="TextBlock" x:Key="SmallBox">
            <Setter Property="Foreground" Value="#0b4366" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Padding" Value="10 0" />
        </Style>

    </UserControl.Resources>






    <telerikNav:RadTileView  x:Name="RadTileView1"
                                                 Width="950"
                                                 Height="400"
                                                 MinimizedColumnWidth="197"
                                                 Grid.Column="0"
                                                 Grid.Row="3"
                                                >

        <telerikNav:RadTileViewItem>

            <telerikNav:RadTileViewItem.Header>
                <TextBlock Text="Red Header" Style="{StaticResource HeaderTitle}" />
            </telerikNav:RadTileViewItem.Header>

            <telerikNav:RadTileViewItem.Content>

                <telerik:RadFluidContentControl telerikAni:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="291, 130"
                                                NormalToSmallThreshold="292, 131"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="731, 351">

                    <telerik:RadFluidContentControl.SmallContent>
                        <Border Width="230" Height="15" MaxHeight="15">
                            <TextBlock Text="Red Small Content" Style="{StaticResource SmallBox}" />
                        </Border>
                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>
                        <Grid HorizontalAlignment="Left" Margin="13 13 0 0" Height="130" Width="279" VerticalAlignment="Top" Background="Red">
                            <TextBlock Text="Red Content" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid Width="730" Height="350">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid  Background="Red"
                                           Height="156" Width="715" VerticalAlignment="Top"
                                           Grid.ColumnSpan="3" Margin="11 11 16 0">
                                <TextBlock Text="Red Large Content" />

                            </Grid>

                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </telerikNav:RadTileViewItem.Content>

        </telerikNav:RadTileViewItem>

        <telerikNav:RadTileViewItem >

            <telerikNav:RadTileViewItem.Header>
                <TextBlock Text="Green header" Style="{StaticResource HeaderTitle}" />
            </telerikNav:RadTileViewItem.Header>

            <telerikNav:RadTileViewItem.Content>
                <telerik:RadFluidContentControl telerikAni:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="279, 130"
                                                NormalToSmallThreshold="280, 131"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="731, 351">

                    <telerik:RadFluidContentControl.SmallContent>
                        <Border Width="230" Height="15" MaxHeight="15">
                            <TextBlock Text="Green Small Content" Style="{StaticResource SmallBox}" />
                        </Border>
                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>
                        <Grid Background="Green" HorizontalAlignment="Left" Margin="13 13 0 0" Height="130" Width="279" VerticalAlignment="Top">
                            <TextBlock Text="Green Content" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid Width="730" Height="350">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Background="Green"
                                           Height="156" Width="715" VerticalAlignment="Top"
                                           Grid.ColumnSpan="3" Margin="11 11 16 0">
                                <TextBlock Text="Green Large Content" />
                            </Grid>
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </telerikNav:RadTileViewItem.Content>

        </telerikNav:RadTileViewItem>

        <telerikNav:RadTileViewItem>

            <telerikNav:RadTileViewItem.Header>
                <TextBlock Text="Blue header" Style="{StaticResource HeaderTitle}" />
            </telerikNav:RadTileViewItem.Header>

            <telerikNav:RadTileViewItem.Content>
                <telerik:RadFluidContentControl telerikAni:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="279, 130"
                                                NormalToSmallThreshold="280, 131"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="731, 351">

                    <telerik:RadFluidContentControl.SmallContent>
                        <Border Width="230" Height="15" MaxHeight="15">
                            <TextBlock Text="Blue Small Content" Style="{StaticResource SmallBox}" />
                        </Border>
                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>
                        <Grid Background="Blue" HorizontalAlignment="Left" Margin="13 13 0 0" Height="130" Width="279" VerticalAlignment="Top">
                            <TextBlock Text="Blue Content" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid Width="730" Height="350">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Background="Blue"
                                           Height="156" Width="715" VerticalAlignment="Top"
                                           Grid.ColumnSpan="3" Margin="11 11 16 0">
                                <TextBlock Text="Blue Large Content" />
                            </Grid>

                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </telerikNav:RadTileViewItem.Content>

        </telerikNav:RadTileViewItem>

        <!--<telerikNav:RadTileViewItem>

            <telerikNav:RadTileViewItem.Header>
                <TextBlock Text="Orange header" Style="{StaticResource HeaderTitle}" />
            </telerikNav:RadTileViewItem.Header>

            <telerikNav:RadTileViewItem.Content>
                <telerik:RadFluidContentControl telerikAni:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="279, 130"
                                                NormalToSmallThreshold="280, 131"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="731, 351">

                    <telerik:RadFluidContentControl.SmallContent>
                        <Border Width="230" Height="15" MaxHeight="15">
                            <TextBlock Text="Orange Small Content" Style="{StaticResource SmallBox}" />
                        </Border>
                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>
                        <Grid Background="Orange" HorizontalAlignment="Left" Margin="13 13 0 0" Height="130" Width="279" VerticalAlignment="Top">
                            <TextBlock Text="Orange Content" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid Width="730" Height="350">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Background="Orange"
                                           Height="156" Width="715" VerticalAlignment="Top"
                                           Grid.ColumnSpan="3" Margin="11 11 16 0">
                                <TextBlock Text="Orange Large Content" />
                            </Grid>

                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </telerikNav:RadTileViewItem.Content>

        </telerikNav:RadTileViewItem>

        <telerikNav:RadTileViewItem>

            <telerikNav:RadTileViewItem.Header>
                <TextBlock Text="Gray header" Style="{StaticResource HeaderTitle}" />
            </telerikNav:RadTileViewItem.Header>

            <telerikNav:RadTileViewItem.Content>
                <telerik:RadFluidContentControl telerikAni:AnimationManager.IsAnimationEnabled="True"
                                                SmallToNormalThreshold="279, 130"
                                                NormalToSmallThreshold="280, 131"
                                                NormalToLargeThreshold="730, 350"
                                                LargeToNormalThreshold="731, 351">

                    <telerik:RadFluidContentControl.SmallContent>
                        <Border Width="230" Height="15" MaxHeight="15">
                            <TextBlock Text="Gray Small Content" Style="{StaticResource SmallBox}" />
                        </Border>
                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>
                        <Grid Background="Gray" HorizontalAlignment="Left" Margin="13 13 0 0" Height="130" Width="279" VerticalAlignment="Top">
                            <TextBlock Text="Gray Content" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid Width="730" Height="350">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Background="Gray"
                                           Height="156" Width="715" VerticalAlignment="Top"
                                           Grid.ColumnSpan="3" Margin="11 11 16 0">
                                <TextBlock Text="Gray Large Content" />
                            </Grid>

                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </telerikNav:RadTileViewItem.Content>

        </telerikNav:RadTileViewItem>-->

    </telerikNav:RadTileView>


</UserControl>

[Ivan Kopcanski]

    After further investigation of this issue I've tried to set the TileView control width from 950 to 550.
When control contains three items, the minimized items do show its SmallContent, but now the Content
is shown instead of LargeContent when items are maximized. So, obviously there are some size calculations
under the hood in order to chose which content is shown in which situation.
    Could you please explain us how to set size properties of control, items and their content controls in order
to be sure that large content is shown when item is maximized, the content when all items are in initial state
and SmallContent when item is in minimized state?
   Thank you in advance.

[Ivan Kopcanski]

I've found another thread that explains the thresholds and I'll let you know if I succeeded to solve the problem with it.

http://www.telerik.com/community/forums/silverlight/tileview/thresholds-for-the-radfluidcontentcontrol.aspx

[Ivan Kopcanski]

There is a way how to achieve exactly what I need by setting property value
RadFluidContentControl.ContentChangeMode to Manual. After that I can
set in the code-behind that each item presents the exact content in its related state:
LargeContent <-> Maximized, Content <-> Normal, SmallContent <-> Minimized.

The code:

private void rtvInvoiceDetails_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)

{

RadTileViewItem item = e.Source as RadTileViewItem;

if (item != null)

{

RadFluidContentControl fluidControl = item.ChildrenOfType<RadFluidContentControl>().First();

if (fluidControl != null)

{

switch (item.TileState)

{

case TileViewItemState.Maximized:

fluidControl.State = FluidContentControlState.Large;

break;

case TileViewItemState.Minimized:

fluidControl.State = FluidContentControlState.Small;

break;

case TileViewItemState.Restored:

fluidControl.State = FluidContentControlState.Normal;

break;

}

}          }

There is another problem with minimized content. All minimized items are set in such way so they are stretched to fill entire control depending on the control's heigt. What I need to achieve is to have minimized items with only headers presented (without SmallContent) docked to upper control edge. Please, refer the attached image for further explanations. I've tried to modify the control template for RadTileViewItem, but no luck there. Could you please help me with this?

[Valentin.Stoychev]

Hi Ivan Kopcanski,

First of all - we are working on improving the integration between the fluid content control and the tileView. It seems like the current concept is somewhat hard to understand from the first time. SO i hope that after me make a smoother integration the users will be able to start using the fluid content controls inside the tile view much easy.

As for your second question - to have only the headers displayed, as I already replied to your other ticket, this is not possible for the moment, but we added it as a product backlog and depending on the users votes on that property we will implement it in the future.

Please let us know if you have any other feature requests for the Rad TileView.

All the best,
Valentin.Stoychev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ivan Kopcanski]

Thank you for the answer  :)