Silverlight TabControl with data binding

The TabControl is commonly used control, but the team which develops the Silverlight Toolkit hasn’t added the data binding support. Although it is promised that the TabControl will be fixed in Silverlight 5, there is long time to wait.

That’s why I decided to extend the current control.

I added the following public properties:

  • ItemsSource
  • SelectedItem
  • ItemTemplate
  • ContentTemplate

These properties are the same which the WPF TabControl has, and now it is possible to write almost the same code:

        <local:ExtendedTabControl ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
            <local:ExtendedTabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}" Foreground="Red" />
                </DataTemplate>
            </local:ExtendedTabControl.ItemTemplate>
            <local:ExtendedTabControl.ContentTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content}" FontWeight="Bold"/>
                </DataTemplate>
            </local:ExtendedTabControl.ContentTemplate>
        </local:ExtendedTabControl>

Here is the completed solution: BindableTabControl.zip
Show case: Test page

In this post I updated the control so that it supports TabItems as templates.
Also I implemented the version with scrollbale items.

About these ads

6 Responses to Silverlight TabControl with data binding

  1. Hi,
    I am fairly new in SL and MVVM, I want to use your extendet tabcontrol to bind dynamically viewmodels to the TabControl. In the normal way, with setting the DataContext for the TabControl in code behind everything is working fine.
    Now my question:
    Is there a way to use it with Caliburn.Micro, especial the databinding by convention.

    Greetings Jack

    • vortexwolf says:

      I’ve never used the Caliburn.Micro framework, and the concept of convention is new to me. I tried to read about this type of databinding, but I don’t understand it while it is remoted from the context.
      Anyway if you succeed to implement databinding with the WPF built-in tab control, the code will work with Silverlight as well.

  2. Evgeny says:

    Hi.
    Thank you very much for your work. I have extended your control so it also supports TabItem’s Template. This way you can bind it’s Visibility for example (that was the motivation for extending for me). Although I do not see any way to post a file here, so I will send it to you via e-mail, so you can post it here.

  3. Pingback: Updated BindableTabControl post « Silverlight, WPF and Windows 8 Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 25 other followers

%d bloggers like this: