Telerik Forums / UI for Silverlight Forum / TabControl /

RadTabHeader Template

Telerik UI for Silverlight
Resources Buy Try

5 posts, 0 answers

Yong Gu Kang

103 posts

Member since:
Jan 2010
Posted 07 Oct 2010 Link to this post

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

tabheader.PNG
Zarko
Admin

755 posts
Posted 08 Oct 2010 Link to this post

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

tabcontrolheaderstyle.zip
Yong Gu Kang

103 posts

Member since:
Jan 2010

Posted 09 Oct 2010 Link to this post

Hi Zarko,

Thank you for your kind reply and sample project and it works fine to me.
My view and veiwmodel has nearly same structure with your sample
except I'm using PRISM region, and I think that would not be any problem.
I still have no luck and have to look around what is the difference.

Thank you.

Kang
Yong Gu Kang

103 posts

Member since:
Jan 2010

Posted 13 Oct 2010 Link to this post

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
Zarko
Admin

755 posts
Posted 13 Oct 2010 Link to this post

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

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

tabcontrolheaderstyle.zip

RadTabHeader Template

Yong Gu Kang

Zarko

Yong Gu Kang

Yong Gu Kang

Zarko