RadTabHeader Template in UI for Silverlight

This is a migrated thread and some comments may be shown as answers.

RadTabHeader Template

4 Answers 58 Views

TabControl

This is a migrated thread and some comments may be shown as answers.

Yong Gu Kang asked on 07 Oct 2010, 07:16 PM

tabheader.PNG

Hi All,

I add radTab by code and found here how to define radTab header template.
Because I just want to add header caption, I created template in seperate dll and try to bind with viewmodel,
however no lock. Though I moved style into view's xaml ,still failed. See attached image.

xaml is as follows;

<telerik:RadTabControl x:Name="editArea" Grid.Column="2" prism:RegionManager.RegionName="BasicEditRegion"

Style="{StaticResource RadTabControlStyle}"

ItemContainerStyle="{StaticResource

RadTabHeaderStyle}" DropDownDisplayMode="WhenNeeded"/>

I borrowed RdaTabControlStyle here, how to add transition effect in RadTabControl, and ItemContainerStyle too.

ItemContainerStyle is ;

<Style x:Key="RadTabHeaderStyle" TargetType="telerik:RadTabItem">

<Setter Property="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBlock Text="{Binding Path=ViewCaption}"/>

<telerik:RadButton Grid.Column="1" Content="X" Width="16"

Height="20" HorizontalAlignment="Center"

VerticalAlignment="Center"

IsBackgroundVisible="False"/>

</Grid>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

I'm sure that binded viewmodel has a ViewCaption property and value assigned correct.
Pls shed some light to me what is wrong.

Thank you in advance.

Kang

4 Answers, 1 is accepted

answered on 08 Oct 2010, 05:32 PM

tabcontrolheaderstyle.zip

Hi Yong-Gu Kang,

In the code snippets that you've provided everything looks fine and I wasn't able to reproduce the problem. Could you please examine the attached project and see if it works for you? If you have further questions feel free to ask.

Sincerely yours,

Zarko

the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 13 Oct 2010, 08:37 AM

Hi Zarko,

I've tried TabHeader with UserControl instead of Viewmodel as inserted code, because my views are created like that and the result is still ViewModel's ViewCaption is not showed up. It should be my mis-understanding applying style what I can't figure out.
I just changed MainPageViewModel and create simple view with one button as followings.

public MainPageViewModel()

{

//tabs = new ObservableCollection<TabItemViewModel>();

//tabs.Add(new TabItemViewModel() { ViewCaption = "First" });

//tabs.Add(new TabItemViewModel() { ViewCaption = "Second" });

AddPage();

}

private void AddPage()

{

tabs = new ObservableCollection<UserControl>();

var tab1 = new TagTest();

tab1.DataContext = new TabItemViewModel() { ViewCaption = "First" };

var tab2 = new TagTest();

tab2.DataContext = new TabItemViewModel() { ViewCaption = "ssss" };

tabs.Add(tab1);

tabs.Add(tab2);

}

private ObservableCollection<UserControl> tabs;

public ObservableCollection<UserControl> Tabs

{

get

{

return tabs;

}

public void AddToHeader()

{

// this.tabs[0].ViewCaption += " Tab";

}

// TagTest view xaml

<UserControl x:Class="TabControlHeaderStyle.TagTest"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

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

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="167,121,0,0" Name="button1" VerticalAlignment="Top" Width="75" />

</Grid>

</UserControl>

Would you pls change above code in your sample and let me know what is wrong?

Thank you in advance.

p.s. I experienced SL blown out as described follwoing link but no reply received. Sould I start new thread ?
http://www.telerik.com/community/forums/silverlight/tabcontrol/tabcontrol-with-contenttemplate-bindning-to-custom-controls.aspx

RGDS
Kang

answered on 13 Oct 2010, 04:40 PM

tabcontrolheaderstyle.zip

Hi Yong-Gu Kang,

The problem is that the RadTabItem can't reach the ViewCaption property inside the DataContext of the TagTest. Usually to use collections of UserControls as ItemsSource is a bad practice, but if you want to keep it that way I've updated the project to work - I've moved the ViewCaption property inside the TagTest control. Please examine the project and if you have further questions feel free to ask.

Regards,

Zarko

the Telerik team