Rank 1
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
3 Answers, 1 is accepted
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
Rank 1
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
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