Editable tab header?

[Nic]

Hi,

I'd like to create a tab control in which the individual tab headers have a 'read-mode' and 'edit-mode'.  In read mode, the header text appears as a label. In edit mode, the header text visually appears as a editable text box.

So when the text in the header is clicked, the text itself becomes editable, allowing the user to enter a new label for the header. Is this possible, and if so could someone outline the steps on how to go about implementing this.

Thanks
Nic

[Miroslav]

Hello Nic,

What you are looking for is an editable ContentControl. If you have this - you can put it wherever you need to edit anything, including the TabItem Header.

Your question got me thinking whether this will actually work and I decided to test it. I created a sample project with an editable ContentControl. It is just like a regular control but on double-click the content presenter is replaced with a TextBox. It still needs a few things but it can be a starting point for you:



I the example I use DataBinding, though you can create the TabItems yourself and set the HeaderTemplate to the sample DataTemplate in the project.

Improvements may include: Committing change on enter key, using the TextSearch.Text attached property for visual objects, etc.

I hope that this will get you going, also if you come up with something interesting, please share it with us.

All the best,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Nic]

Hi Miroslav,

This is exactly what I needed and points me in the right direction of how this sort of thing gets put together. Some changes I made were 1)to accept the input on enter key as you suggested, and 2)on the double-click to edit, to highlight the text being edited and set focus to it.

Thank you,
Nic

[runes]

I attached at TabControlEditableHeaders.zip but its change the content and the header  of the tab.
I want to change only the header (on duble click)
can you give me the relevant code?
or explain me how to do it?
thanks

[Miroslav]

Hello runes,

In this example the Content of the TabItem and its Header are bound to one and the same property. If you want to use databinding, you need to add a property that your content will bind to, the xaml will change like so:

<nav:RadTabControl x:Name="tabControl">
    <nav:RadTabControl.ItemTemplate>
        <!--The Content Template:-->
        <DataTemplate>
            <Grid Background="Red">
                <Button Content="{Binding MyContent}" />
            </Grid>
        </DataTemplate>
    </nav:RadTabControl.ItemTemplate>
    <nav:RadTabControl.ItemContainerStyle>
        <Style TargetType="nav:RadTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <!--The Header Template:-->
                    <DataTemplate>
                        <local:EditableContentControl
                                Content="{Binding Name, Mode=TwoWay}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </nav:RadTabControl.ItemContainerStyle>
</nav:RadTabControl>

Here you can see a similar case, where DataTemplateSelectors are used (i.e. different DataTemplates for specific cases):

http://www.telerik.com/community/forums/silverlight/tabcontrol/setting-radtabitem-headertemplate-in-code-with-resource.aspx

Best wishes,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ruty]

Hi,
I want to do it and.
but I want to do it dinamicly.(in run time.)
How I write this code in the cs files????
the code is:

  <nav:RadTabControl x:Name="tabControl">
            <nav:RadTabControl.ItemTemplate>
                <!--The Content Template:-->
                <DataTemplate>
                    <Grid Background="Red">
                        <Button Content="{Binding MyContent}" />
                    </Grid>
                </DataTemplate>
            </nav:RadTabControl.ItemTemplate>
            <nav:RadTabControl.ItemContainerStyle>
                <Style TargetType="nav:RadTabItem">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <!--The Header Template:-->
                            <DataTemplate>
                                <local:EditableContentControl
                                Content="{Binding Name, Mode=TwoWay}" />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </nav:RadTabControl.ItemContainerStyle>
        </nav:RadTabControl>

Can you give me a simple example to definition template in code????(not in xaml file)
Thanks.

[ruty]

Hi,
I want to transfer the style 

Style

 

TargetType="local:EditableContentControl"

 

(that you attach me in the demo example in last post.)
 from the generic file to the app.xaml.
and I unsuccessful to do it.
How can I do it??????
Thanks.

[Kiril Stanoev]

Hi ruty,

In the attachment you can find a demo that demonstrates the scenario you are describing.
Every TabItem has unique header and content.
Editing the header does not affect the content.
I have also moved the Style of the EditableContentControl to App.xaml.
If you have any additional questions, let us know.

Regards,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[ruty]

Thanks,
I did  it in my application - (I  used tabcontroleditableheaders-example.zip kode) but: I tried to enter the MyData class to my class but now - when pressing on the header of the tab - OnMouseLeftButtonDown (in EditableContentControl class) event does not raised.
can you help me - what is the problem? or how should I use your kode in my application?
Thanks, 

[Kiril Stanoev]

Hello Ruty,

Could you please send us a sample project, so we can assist you better?

Greetings,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Roman]

Hi,

I am new to silverlight and was wondering how you would go about adding functionality to accept the input on press of the enter key as well as how to highlight and set focus to the textbox? I'm not sure where to begin on either one. Any help would be greatly appreciated.

Thanks,
Roman

[Miro Miroslavov]

Hi Roman,

Can you please start new more specific topic or open new support ticket with deeper issue explanation.
About setting focus you can use the Control.Focus() method and also you can handle the KeyDown event of the TextBox and then process the input.


Best wishes,
Miro Miroslavov
the Telerik team

[Pranama Moorthy]

Hi Mirov,
                The two way binding, does not work, it just works one way. When I set the Content={Binding Name, Mode=TwoWay}, and I try to edit the tab header textBox, the new value does not get propagated.

I am using the EditableControl that you have used below, I have not been able to figure out how to fix this one. Please help.

Regards,
Pranama

[Tina Stancheva]

Hello Nic,

Please have a look at the sample attached to your other thread here and let us know if it works for you or if you need more info.

Regards,
Tina Stancheva
the Telerik team

[Pranama Moorthy]

Hi Tina,
             The attached link in the previous post does not help. The problem, now I am facing is that, when I bind, the Content of the EditableContentControl to the "Name" property of my Class, it Binds properly and shows, the name.

But when the user edits the name, and clicks somewhere else the name does not get stored in the property. (Please note I have specified the mode as TwoWay, yet it does not store the value back in the property. I have also raised Property Changed event, for that property.)

Could you please, Show how we can achieve this? Even in the EditableTabHeader example, which has been attached below by the telerik team, the binding happens only one way. 

Please advice.

Regards,
Pranama

[Pranama Moorthy]

Hi Tina,

Please ignore my post, it actually binds correctly, I had actually edited the code somewhere, where in explicitly set the testbox as blank. My sincere apologies.

Regards,
Pranama