Writing a Stretchable ContentControl in WPF

Writing a stretchable content container is very easy in WPF. The ViewBox allows you to write stretchable container which will shrink / expand according to the size of the content. In this post I will build a simple Stretchable ContentControl which will expand itself as you go on adding controls to it.

In the sample application I have added a TextBox to the page, and as you go on typing on the TextBox it will resize (shrink/expand) its size based on the content. As I have built it as a ContentControl, you can add as many StreatchableContentControl in your application as you want, and each StraetchableContentControl can have any number of controls. Lets see how to build this control in steps :

Step 1 : Start Visual Studio and create a new WPF application.

Step 2: Add a new Window to the Application (you may also use a new library project), name it as StretchableContentControl and paste the code below

<Viewbox x:Class="StreatchableTextBox.StreatchableContentControl"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Stretch="UniformToFill">
    <ContentControl x:Name="cMain" Width="50" Height="50"></ContentControl>
</Viewbox>

The code actually writes a Viewbox on the screen with a ContentControl inside it. So when we put the content on the Viewbox, it either removes the ContentControl altogether and writes your own content, or you can add to the Content as well.

Step 3: In code behind, change the base class from Window to ViewBox and add the code which gets you the main ContentControl programmatically :

public partial class StreatchableContentControl : Viewbox
    {
        public StreatchableContentControl()
        {
            InitializeComponent();
        }

        public ContentControl Content
        {
            get { return this.cMain; }
        }
    }

Note : it is not mandatory to expose ContentControl, nither to declare the ContentControl as well.

Step 4: Add the XML namespace of the Control and add the control on the main Application Window(default is MainWindow.xaml)

<Window x:Class="StreatchableTextBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:StreatchableTextBox"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <TextBlock Text="Write Something : " />
        <local:StreatchableContentControl x:Name="scWriter">
            <TextBox />
        </local:StreatchableContentControl>
    </StackPanel>
</Window>

The local namespace refers the current project.

We added a StreatchableContentControl inside the Window which is actually a ViewBox, and added a TextBox inside it.

The code is now ready.

Download Sample Application

If you want to build a complete control on this, follow these links :

Writing a Custom Control

Writing a UserControl

Thanks for reading.