Editable Tab Header Binding to UserControl

4 posts, 0 answers
  1. Pranama Moorthy
    Pranama Moorthy avatar
    26 posts
    Member since:
    Jun 2010

    Posted 28 Dec 2010 Link to this post

    HI Telerik team,

    Not sure, if I should have started a new thread, since this is regarding the editable Tab header. I am facing some problems binding it to a observable collection of user defined controls. All I need to do it bind the "Name" property in my Usercontrol to the header of the tab control and make it editable, as discussed in this forum.

    Since, I cant attach the file, I am pasting the code here

    MY user Control looks like below

    public

     

    partial class TestControl : UserControl, INotifyPropertyChanged

     

    {

     

    private string title;

     

     

    public TestControl()

     

    {

    InitializeComponent();

    }

     

    public string Name

     

    {

     

    get

     

    {

     

    return this.title;

     

    }

     

    set

     

    {

     

    this.title = value;

     

     

    this.OnPropertyChanged("Title");

     

    }

    }

    #region

     

    INotifyPropertyChanged Members

     

     

    /// <summary>

     

     

    /// Called when the value of a property changes.

     

     

    /// </summary>

     

     

    /// <param name="propertyName">The name of the property that has changed.</param>

     

     

    protected virtual void OnPropertyChanged(String propertyName)

     

    {

     

    if (String.IsNullOrEmpty(propertyName))

     

    {

     

    return;

     

    }

     

    if (PropertyChanged != null)

     

    {

    PropertyChanged(

    this, new PropertyChangedEventArgs(propertyName));

     

    }

    }

     

    /// <summary>

     

     

    /// Raised when the value of one of the properties changes.

     

     

    /// </summary>

     

     

    public event PropertyChangedEventHandler PropertyChanged;

     

     

    #endregion

    }


    My MainPAge XAML looks like as below (I used the same sample that was mentioned in TabControlEditableHeaders

    public

     

    partial class Page : UserControl

     

    {

     

    //private ObservableCollection<MyDatum> MyData;

     

     

    private ObservableCollection<TestControl> myTestControls;

     

     

    public Page()

     

    {

    InitializeComponent();

     

    myTestControls =

    new ObservableCollection<TestControl>();

     

    myTestControls.Add(

    new TestControl() { Name = "Header Title" });

     

    myTestControls.Add(

    new TestControl() { Name = "Header second title" });

     

    tabControl.ItemsSource = myTestControls;

    }

     

    private void btnSubmit_Click(object sender, RoutedEventArgs e)

     

    {

     

    RadTabItem radItem = (RadTabItem)this.tabControl.SelectedItem;

     

     

    RadWindow.Alert((new DialogParameters()

     

    {

    Header =

    "SI Processing",

     

    Content = radItem.Header.ToString(),

    Theme =

    new Windows7Theme()

     

    }));

    }

     

    /// <summary>

     

     

    /// Called when the value of a property changes.

     

     

    /// </summary>

     

     

    /// <param name="propertyName">The name of the property that has changed.</param>

     

     

    protected virtual void OnPropertyChanged(String propertyName)

     

    {

     

    if (String.IsNullOrEmpty(propertyName))

     

    {

     

    return;

     

    }

     

    if (PropertyChanged != null)

     

    {

    PropertyChanged(

    this, new PropertyChangedEventArgs(propertyName));

     

    }

    }

     

    /// <summary>

     

     

    /// Raised when the value of one of the properties changes.

     

     

    /// </summary>

     

     

    public event PropertyChangedEventHandler PropertyChanged;

     

    }

    My XAML is as below

    <

     

    UserControl x:Class="TabControlEditableHeaders.Page"

     

     

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     

     

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     

     

    xmlns:local="clr-namespace:TabControlEditableHeaders"

     

     

    xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

     

     

    Width="400" Height="300">

     

     

     

    <Grid x:Name="LayoutRoot" Background="White">

     

     

     

    <Button x:Name="btnSubmit" Click="btnSubmit_Click" Content="HIT ME!"/>

     

     

     

    <nav:RadTabControl x:Name="tabControl">

     

     

     

    <nav:RadTabControl.ItemTemplate>

     

     

     

    <!--The Content Template:-->

     

     

     

    <DataTemplate>

     

     

     

    <StackPanel Orientation="Vertical" Background="WhiteSmoke">

     

     

     

     

     

    </StackPanel>

     

     

     

    </DataTemplate>

     

     

     

    </nav:RadTabControl.ItemTemplate>

     

     

     

    <nav:RadTabControl.ItemContainerStyle>

     

     

     

    <Style TargetType="nav:RadTabItem">

     

     

     

    <Setter Property="HeaderTemplate">

     

     

     

    <Setter.Value>

     

     

     

    <!--The Header Template:-->

     

     

     

    <DataTemplate>

     

     

     

    <local:EditableContentControl Style="{StaticResource EditableContentControlStyle}"

     

     

    Content="{Binding Path=Name, Mode=TwoWay}" />

     

     

     

    </DataTemplate>

     

     

     

    </Setter.Value>

     

     

     

    </Setter>

     

     

     

    </Style>

     

     

     

    </nav:RadTabControl.ItemContainerStyle>

     

     

     

    </nav:RadTabControl>

     

     

     

    </Grid>

     

    </

     

    UserControl>

     



    But Somehow, I am not able to see the "Name" in the header of the tab Control, Could you please help me out, I have been trying really hard to get this fixed :(

    As a note, I am using the EditableContentControl for the
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 30 Dec 2010 Link to this post

    Hello Pranama Moorthy,

    From the code snippet you sent, it seems that the TestControl class is a UserControl. However, it is best to set the RadTabControl collection to a data collection, since the approach you are following is suited for this case. I attached a sample project illustrating how to implement editable headers. Also, please note that the RadTabControl ItemTemplate controls the display of the RadTabItems' Header, whilst the RadTabControl ContentTemplate defined the RadTabItems' content template.

    Still, if your scenario requires a different approach, please elaborate on it and we will do our best to help you implement it.

    Kind regards,
    Tina Stancheva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. DevCraft banner
  4. Pranama Moorthy
    Pranama Moorthy avatar
    26 posts
    Member since:
    Jun 2010

    Posted 30 Dec 2010 Link to this post

    Hi Tina,
                 Thanks for your help, even I have got it to work with Data Bound collection. But in my case I need it to bind to a collection of user controls. Isnt this possible to do?

    I am treating my UserControl as a Data, and I have made a Observable COllection of such UserControls, Now shouldnt I be able to use it like any other Data COllection?

    If this is not possible, please do let me know.

    Regards,
    Pranama
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 04 Jan 2011 Link to this post

    Hi Pranama Moorthy,

    The RadTabControl is data-driven control, that is designed to allow visualization of data items. Binding it to a collection of UserControls isn't a supported scenario.

    Also, you should keep in mind that the concept of databinding is to provide a simple way for Silverlight-based applications to display and interact with data. The way data is displayed is separated from the management of the data. Binding to a collection of UIElements breaks up this concept. The binding, between the UI and a data object allows data to flow between the two. When a binding is established and the data changes, the UI elements that are bound to the data can reflect changes automatically. Similarly, changes made by the user in a UI element can be reflected in the data object. Therefore a Silverlight native approach towards your scenario would be to bind the RadTabControl to a collection of data items and define the TestControl UserControl as a ContentTemplate of the RadTabControl. I modified the solution to illustrate this approach.

    Doesn't that approach works for you?

    Best wishes,
    Tina Stancheva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top