Edit this page

Fluid Content Control

This article will make you familiar with the RadFluidContentControl and its properties.

RadFluidContentControl exposes three content properties - Content, SmallContent and LargeContent. Only one of these three properties is visible at any given time. The way the visible content is changed is determined by the two available threshold properties - NormalToLargeThreshold and NormalToSmallThreshold. The NormalToSmallThreshold is used to determine when the small content will be shown, in the cases when the NormalContent is currently visible and vice versa. Alternatively, the NormalToLargeThreshold property controls when the normal content will be hidden and the LargeContent shown.

Consider a case where there are three visual elements that should be shown depending on the available space - SmallContent (200px X 200px), NormalContent(400px X 400px) and LargeContent(600px X 600px).

<telerik:RadFluidContentControl>
 <!--Small Content-->
 <telerik:RadFluidContentControl.SmallContent>
  <Border Background="LightBlue" Width="200" Height="200">
   <TextBlock Text="Small Content" />
  </Border>
 </telerik:RadFluidContentControl.SmallContent>

 <!--Normal Content-->
 <telerik:RadFluidContentControl.Content>
  <Border Background="LightGreen" Width="400" Height="400">
   <TextBlock Text="Normal Content" />
  </Border>
 </telerik:RadFluidContentControl.Content>

 <!--Large Content-->
 <telerik:RadFluidContentControl.LargeContent>
  <Border Background="LightYellow" Width="600" Height="600">
   <TextBlock Text="Large Content" />
  </Border>
 </telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>

Next, suitable values for the corresponding thresholds should be set. What follows is an explanation on why such values have been chosen.

<telerik:RadFluidContentControl NormalToSmallThreshold="400 400" NormalToLargeThreshold="600 600">

   <!--Small Content-->

   <!--Normal Content-->

   <!--Large Content-->

</telerik:RadFluidContentControl>
  • NormalToSmallThreshold(400px X 400px) - setting it to the size of the normal content means that as soon as enough space (400px X 400px) is available, the normal content will be shown. Alternatively, the control will hide the normal content (and show the small content) as soon as the available size is not enough to properly render the normal content.

  • NormalToLargeThreshold(600px X 600px) - setting it to the size of the large content means that as soon as enough space (600px X 600px) is available, the large content will be shown. Alternatively, the control will hide the large content (and show the normal content) as soon as the available size is not enough to properly render the large content.

In case you need to specify only the width or height of a threshold, you can set the other value to 0 - this way it will be disregarded.

If you choose to use RadFluidContentControl with RadTileView, an additional property can be taken into consideration - ContentChangeMode. RadFluidContentControl's ContentChangeMode property allows to manually change the State of the control, and thus the visible content. Setting the property to "Manual", tells RadFluidContentControl to completely disregard its threshold properties, thus making you responsible for switching the visible content. Setting the property to "Automatic" makes the control use the thresholds again.

<telerik:RadTileView TileStateChanged="RadTileView_TileStateChanged">
 <telerik:RadTileViewItem Header="BMW">
  <telerik:RadFluidContentControl ContentChangeMode="Manual">
   <telerik:RadFluidContentControl.SmallContent>
    <Grid Width="200" Height="200">
     <Image Source="Images/BMW/bmw200x200.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.SmallContent>
   <telerik:RadFluidContentControl.Content>
    <Grid Width="400" Height="400">
     <Image Source="Images/BMW/bmw400x400.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.Content>
   <telerik:RadFluidContentControl.LargeContent>
    <Grid Width="600" Height="600">
     <Image Source="Images/BMW/bmw600x600.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.LargeContent>
  </telerik:RadFluidContentControl>
 </telerik:RadTileViewItem>

 <telerik:RadTileViewItem Header="Audi">
  <telerik:RadFluidContentControl ContentChangeMode="Manual">
   <telerik:RadFluidContentControl.SmallContent>
    <Grid Width="200" Height="200">
     <Image Source="Images/Audi/audi200x200.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.SmallContent>
   <telerik:RadFluidContentControl.Content>
    <Grid Width="400" Height="400">
     <Image Source="Images/Audi/audi400x400.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.Content>
   <telerik:RadFluidContentControl.LargeContent>
    <Grid Width="600" Height="600">
     <Image Source="Images/Audi/audi600x600.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.LargeContent>
  </telerik:RadFluidContentControl>
 </telerik:RadTileViewItem>

 <telerik:RadTileViewItem Header="Mercedes">
  <telerik:RadFluidContentControl ContentChangeMode="Manual">
   <telerik:RadFluidContentControl.SmallContent>
    <Grid Width="200" Height="200">
     <Image Source="Images/Mercedes/mercedes200x200.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.SmallContent>
   <telerik:RadFluidContentControl.Content>
    <Grid Width="400" Height="400">
     <Image Source="Images/Mercedes/mercedes400x400.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.Content>
   <telerik:RadFluidContentControl.LargeContent>
    <Grid Width="600" Height="600">
     <Image Source="Images/Mercedes/mercedes600x600.jpg" />
    </Grid>
   </telerik:RadFluidContentControl.LargeContent>
  </telerik:RadFluidContentControl>
 </telerik:RadTileViewItem>
</telerik:RadTileView>

private void RadTileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
 RadTileViewItem item = e.Source as RadTileViewItem;
 if (item != null)
 {
  RadFluidContentControl fluidControl = item.Content as RadFluidContentControl;
  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;
   }
  }
 }
}
Private Sub RadTileView_TileStateChanged(ByVal sender As Object, ByVal e As Telerik.Windows.RadRoutedEventArgs)
    Dim item As RadTileViewItem = TryCast(e.Source, RadTileViewItem)
    If item IsNot Nothing Then
        Dim fluidControl As RadFluidContentControl = TryCast(item.Content, RadFluidContentControl)
        If fluidControl IsNot Nothing Then
            Select Case item.TileState
                Case TileViewItemState.Maximized
                    fluidControl.State = FluidContentControlState.Large
                    Exit Select
                Case TileViewItemState.Minimized
                    fluidControl.State = FluidContentControlState.Small
                    Exit Select
                Case TileViewItemState.Restored
                    fluidControl.State = FluidContentControlState.Normal
                    Exit Select
            End Select
        End If
    End If
End Sub