Getting Started with Silverlight FluidContentControl
This tutorial will walk you through the creation of a sample application that contains RadFluidContentControl.
Assembly References
In order to use RadFluidContentControl, you will need to add references to the following assemblies:
- Telerik.Windows.Controls
You can find the required assemblies for each control from the suite in the Controls Dependencies help article.
Content States
RadFluidContentControl supports three states for displaying the different contents. When the control enters a state the corresponding view will be displayed.
- Small
- Normal
- Large
Only a single content will be displayed at a time.
Read the Setting up the Content Changing Mechanism section of this article to see how to change states.
Defining a RadFluidContentControl
The control exposes a few properties that allow you to set a different content for the different states.
SmallContent: The property accepts any object and it will display it when the control is in Small state.
Content: The property accepts any object and it will display it when the control is in Normal state.
LargeContent: The property accepts any object and it will display it when the control is in Large state.
Each of the content properties has a corresponding content template property - SmallContentTemplate, ContentTemplate and LargeContentTemplate
Example 1: RadFluidContentControl definition in XAML
<telerik:RadFluidContentControl>
<telerik:RadFluidContentControl.SmallContent>
<Border Background="Bisque">
<TextBlock Text="small content" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.SmallContent>
<telerik:RadFluidContentControl.Content>
<Border Background="Olive">
<TextBlock Text="Normal content" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.Content>
<telerik:RadFluidContentControl.LargeContent>
<Border Background="LightGoldenrodYellow">
<TextBlock Text="LARGE CONTENT" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>
Figure 1: RadFluidContentControl with size 100,100
Setting up the Content Changing Mechanism
There are two mechanisms for changing the currently visible content. The default one is based on the size of the control. When it reaches a specific size range the content will be change accordingly. The second mechanism is manual. In this case you can manually set the State property of the RadFluidContentControl.
To enable the size based mechanism set the ContentChangeMode property of RadFluidContentControl to Automatic. You can control the size thresholds via the following properties.
NormalToSmallThreshold: The maximum size at which the control can be in Small state. When the control reaches this size it enters into Normal state. The default value of the property is new Size(150, 150).
NormalToLargeThreshold: The maximum size at which the control can be in Normal state. When the control reaches this size it enters into Large state. The default value of the property is new Size(150, 150).
The size where the Normal content is visible is the size between NormalToSmallThreshold and NormalToLargeThreshold.
Example 2: Setting thresholds
<telerik:RadFluidContentControl NormalToSmallThreshold="100,100"
NormalToLargeThreshold="300,300">
<telerik:RadFluidContentControl.SmallContent>
<Border Background="Bisque">
<TextBlock Text="small content" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.SmallContent>
<telerik:RadFluidContentControl.Content>
<Border Background="Olive">
<TextBlock Text="Normal content" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.Content>
<telerik:RadFluidContentControl.LargeContent>
<Border Background="LightGoldenrodYellow">
<TextBlock Text="LARGE CONTENT" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>
The default ContentChangeMode default value is set to Automatic.
Figure 2: RadFluidContentControl with size 150,150
To enable the manual mechanism set the ContentChangeMode property of RadFluidContentControl to Manual. This allows you to manually set the State property of the control, thus changing the visible content.
Example 2: Setting the content state manually
<telerik:RadFluidContentControl ContentChangeMode="Manual" State="Large">
<telerik:RadFluidContentControl.SmallContent>
<Border Background="Bisque">
<TextBlock Text="small content" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.SmallContent>
<telerik:RadFluidContentControl.Content>
<Border Background="Olive">
<TextBlock Text="Normal content" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.Content>
<telerik:RadFluidContentControl.LargeContent>
<Border Background="LightGoldenrodYellow">
<TextBlock Text="LARGE CONTENT" VerticalAlignment="Center" TextAlignment="Center" />
</Border>
</telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>
Figure 3: RadFluidContentControl with large content manually set via the State property
Data Binding
The Content, SmallContent and LargeContent properties can be data bound to properties from a business object. In this case you can define the views for each state via the ContentTemplate, SmallContentTemplate and LargeContentTemplate properties. Read more about this in the Data Binding article.