Getting Started with WPF 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.

Adding Telerik Assemblies Using NuGet

To use RadFluidContentControl when working with NuGet packages, install the Telerik.Windows.Controls.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package 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.

Telerik UI for WPF Learning Resources

• Getting Started with Telerik UI for WPF Components
• Telerik UI for WPF Installation
• Telerik UI for WPF and WinForms Integration
• Telerik UI for WPF Visual Studio Templates
• Setting a Theme with Telerik UI for WPF
• Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
• Telerik UI for WPF License Agreement

See Also

• Integration Examples
• Events
• Transitions