TileViewItem.SmallContent mixed with TileViewItem.Content

6 posts, 1 answers
  1. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 24 Dec 2009 Link to this post

    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>   
  2. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 24 Dec 2009 Link to this post

        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.
  3. DevCraft banner
  4. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 24 Dec 2009 Link to this post

    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
  5. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 24 Dec 2009 Link to this post

    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?
  6. Answer
    Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 28 Dec 2009 Link to this post

    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.
  7. Ivan Kopcanski
    Ivan Kopcanski avatar
    47 posts
    Member since:
    Jul 2009

    Posted 28 Dec 2009 Link to this post

    Thank you for the answer  :)
Back to Top
DevCraft banner