RadTabHeader Template

[Yonggu Kang]

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"/>

                      <!--example:RoutedEventHelper.EnableRoutedClick="True"-->

                  </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

[Zarko]

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

[Yonggu Kang]

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

[Yonggu Kang]

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]

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