getting-started.md

title	page_title	description	slug	tags	published	position
Getting Started	Getting Started	This tutorial will walk you through the creation of a sample application that contains RadFluidContentControl.	fluidcontentcontrol-getting-started	getting,started	true	1

Getting Started with {{ site.framework_name }} 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.Licensing.Runtime
• Telerik.Windows.Controls

You can find the required assemblies for each control from the suite in the {% if site.site_name == 'Silverlight' %}[Controls Dependencies]({%slug installation-installing-controls-dependencies%}){% endif %}{% if site.site_name == 'WPF' %}[Controls Dependencies]({%slug installation-installing-controls-dependencies-wpf%}){% endif %} help article.

tip With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it [here]({%slug installing-license-key%}).

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]({%slug nuget-available-packages%}) slightly based on the Telerik dlls set - [Xaml or NoXaml]({%slug xaml-vs-noxaml%})

Read more about NuGet installation in the [Installing UI for WPF from NuGet Package]({%slug nuget-installation%}) 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

important 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

[XAML] Example 1: RadFluidContentControl definition in XAML

{{region fluidcontentcontrol-getting-started-0}} telerik:RadFluidContentControl telerik:RadFluidContentControl.SmallContent
</telerik:RadFluidContentControl.SmallContent> telerik:RadFluidContentControl.Content </telerik:RadFluidContentControl.Content> telerik:RadFluidContentControl.LargeContent </telerik:RadFluidContentControl.LargeContent> </telerik:RadFluidContentControl> {{endregion}}

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).

tip The size where the Normal content is visible is the size between NormalToSmallThreshold and NormalToLargeThreshold.

[XAML] Example 2: Setting thresholds

{{region fluidcontentcontrol-getting-started-1}} <telerik:RadFluidContentControl NormalToSmallThreshold="100,100" NormalToLargeThreshold="300,300"> telerik:RadFluidContentControl.SmallContent
</telerik:RadFluidContentControl.SmallContent> telerik:RadFluidContentControl.Content </telerik:RadFluidContentControl.Content> telerik:RadFluidContentControl.LargeContent </telerik:RadFluidContentControl.LargeContent> </telerik:RadFluidContentControl> {{endregion}}

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.

[XAML] Example 2: Setting the content state manually

{{region fluidcontentcontrol-getting-started-2}} <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Large"> telerik:RadFluidContentControl.SmallContent
</telerik:RadFluidContentControl.SmallContent> telerik:RadFluidContentControl.Content </telerik:RadFluidContentControl.Content> telerik:RadFluidContentControl.LargeContent </telerik:RadFluidContentControl.LargeContent> </telerik:RadFluidContentControl> {{endregion}}

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]({%slug fluidcontentcontrol-data-binding%}) article.

{% if site.site_name == 'WPF' %}

Telerik UI for WPF Learning Resources

• [Getting Started with Telerik UI for WPF Components]({%slug getting-started-first-steps%})
• [Telerik UI for WPF Installation]({%slug installation-installing-which-file-do-i-need%})
• [Telerik UI for WPF and WinForms Integration]({%slug winforms-integration%})
• [Telerik UI for WPF Visual Studio Templates]({%slug visual-studio-templates%})
• [Setting a Theme with Telerik UI for WPF]({%slug styling-apperance-implicit-styles-overview%})
• Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
• Telerik UI for WPF License Agreement {% endif %}

See Also

• [Integration Examples]({%slug radfluidcontentcontrol-integration-examples%})
• [Events]({%slug fluidcontentcontrol-events%})
• [Transitions]({%slug fluidcontentcontrol-transitions%})