[Solved] TileViewItem:RadFluidContentControl: LargeContent: Content Overflow: Scrollbar

[Deepak Shakya]

Hi,

I have been testing RadControls for Silverlight Q2 2010 Tileview. It works fine with RadFluidContentControl's three states but without any huge amount of content in the "Large Content" case.

I populated the "large content" with stackpanel which holds about 30 controls comprising of Label and Textbox in vertical orientation. This is to use as an input form.

The problem is that when I run the program, IE freezes and nothing happens, so I have to KILL the process.

Also if I put fewer controls and run the code it runs fine until I resize the window so that the last control now touches the bottom of window. The IE freezes again.

I also wanted scrollbars to be displayed in the TileViewItem Content section so that I can scroll to fill in the form without resizing the window. Is this possible? If yes, how do I go about it?

Thanks in advance.

<telerik:RadTileViewItem Header="Nutrient Input Analysis" TileState="Maximized" MinWidth="0" >
               <telerik:RadFluidContentControl SmallToNormalThreshold="400 0" NormalToSmallThreshold="400 0" LargeToNormalThreshold="600 0" NormalToLargeThreshold="600 0" ScrollViewer.VerticalScrollBarVisibility="Visible">
                   <!--Small Content-->
                   <telerik:RadFluidContentControl.SmallContent>
                       <Grid>
                           <TextBlock FontSize="29.333" FontFamily="Alien League" VerticalAlignment="Top" Margin="94,8,86,0" d:LayoutOverrides="Width"> Summary</TextBlock>
                       </Grid>
                   </telerik:RadFluidContentControl.SmallContent>
                   <!--Normal Content-->
                   <telerik:RadFluidContentControl.Content>
                       <Grid>
                           <TextBlock Text="NORMAL VIEW"/>
                       </Grid>
                   </telerik:RadFluidContentControl.Content>
                   <!--Large Content-->

                   <telerik:RadFluidContentControl.LargeContent>
                           <StackPanel Orientation="Vertical">
                               <sdk:Label x:Name="lblTotalArea" HorizontalAlignment="Left"  Grid.Column="0" Grid.Row="0"  VerticalAlignment="Center" Content="Label" />
                               <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea1" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                               <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea2" HorizontalAlignment="Left"   VerticalAlignment="Center"  Content="Label"/>
                               <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea3" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                               <TextBox  HorizontalAlignment="Left"   VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea4" HorizontalAlignment="Left"   VerticalAlignment="Center"  Content="Label"/>
                               <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea5" HorizontalAlignment="Left"   VerticalAlignment="Center"  Content="Label"/>
                               <TextBox  HorizontalAlignment="Left"  VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea6" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                               <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea7" HorizontalAlignment="Left"    VerticalAlignment="Center"  Content="Label"/>
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea8" HorizontalAlignment="Left"    VerticalAlignment="Center"  Content="Label"/>
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea9" HorizontalAlignment="Left"    VerticalAlignment="Center"  Content="Label"/>
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea10" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea11" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea12" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                           <sdk:Label x:Name="lblTotalArea13" HorizontalAlignment="Left"    VerticalAlignment="Center" Content="Label" />
                           <TextBox  HorizontalAlignment="Left"    VerticalAlignment="Center" Width="100"/>
                       </StackPanel>

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

[Deepak Shakya]

The problem disappeared on its own. I am not sure what happened. I can now change the window size without IE freezing. There is also smooth transition between - Large Content>Normal Conten>Small Content and vice versa.

The only question remaining is that:

1. How do make scroll bars appear in the "Large Content" view when the contents in the RadTileViewItem overflows the content boundary.

Cheers!

[Kiril Stanoev]

Hello Deepak,

Have you tried wrapping the StackPanel (the one in LargeContent) in ScrollViewer?

<telerik:RadFluidContentControl.LargeContent>
    <ScrollViewer>
        <StackPanel Orientation="Vertical">
            <!-- Rest of form here -->
        </StackPanel>
    </ScrollViewer>
</telerik:RadFluidContentControl.LargeContent>

Let me know if this helps.

Best wishes,
Kiril Stanoev
the Telerik team

[Deepak Shakya]

Thanks Kiril,

Its amazing! Its working now with ScollViewer. I had tried this before and it didn't work. Thank you for your help.

Regards,
Deepak