[Solved] DropDown and Tab Styling

[Heather]

I just installed 2009.3 and am trying to work with the TabControl DropDown.  We use Prism/MVVM and have styled the tab so it shows a property on the corresponding view model and a close button.  When using this style I do not get the dropdown, can you tell me what I need to change to enable showing the drop down and set the DropDownContent to the same value the tab Content is set to?  Thank you.

 

 

 

 

    <telerikNavigation:RadTabControl x:Name="tabControl" Grid.Row="1" VerticalAlignment="Stretch"
                                     HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5"
                                     Regions:RegionManager.RegionName="MainRegion" TabStripPlacement="Right"
                                     AllowDragReorder="True" BackgroundVisibility="Collapsed" FontFamily="Tahoma"
                                     DropDownDisplayMode="Visible" ScrollMode="Viewport"  >
      <infRegionAdapters:RadTabControlRegionAdapter.ItemContainerStyle>
        <Style TargetType="telerikNavigation:RadTabItem">
          <Setter Property="RightTemplate" >
            <Setter.Value>
              <ControlTemplate TargetType="telerikNavigation:RadTabItem">
                  <Grid x:Name="wrapper">
                  <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStateGroup">
                      <VisualState x:Name="MouseOver">
                        <Storyboard>
                          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                          </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                      </VisualState>
                      <VisualState x:Name="Normal"/>
                      <VisualState x:Name="Selected">
                        <Storyboard>
                          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBorder_Select}"/>
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabBackground_Select}"/>
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="wrapper" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0 -1 0 0"/>
                          </ObjectAnimationUsingKeyFrames>
                          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="#FF000000"/>
                          </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                      </VisualState>
                      <VisualState x:Name="Disabled">
                        <Storyboard>
                          <DoubleAnimation Duration="0:0:0.1"
                                                             Storyboard.TargetName="HeaderElement"
                                                             Storyboard.TargetProperty="Opacity" To="0.5"/>
                        </Storyboard>
                      </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                      <VisualState x:Name="Unfocused"/>
                      <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                  </VisualStateManager.VisualStateGroups>
                  <Border x:Name="Bg" Margin="2 0" Opacity="0" Background="{StaticResource TabBackground_MouseOver}" BorderBrush="{StaticResource TabBorder_MouseOver}" BorderThickness="1,0,1,1" CornerRadius="0,3,3,0"/>
                  <layoutToolkit:LayoutTransformer>
                    <layoutToolkit:LayoutTransformer.LayoutTransform>
                      <RotateTransform Angle="90"/>
                    </layoutToolkit:LayoutTransformer.LayoutTransform>
                    <Grid x:Name="HeaderWrapper" Height="30">
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                      </Grid.ColumnDefinitions>
                      <Button Grid.Column="0" Content="X" Height="20" Width="20" commands:Click.Command="{Binding CloseCommand}" commands:Click.CommandParameter="{Binding ScreenTag}" Style="{StaticResource CloseTabButtonStyle}" Margin="2,0,0,0" />
                      <telerikPrimitives:TabItemContentPresenter Grid.Column="1"
                                    x:Name="HeaderElement" Foreground="{TemplateBinding Foreground}"
                                    HorizontalAlignment="Center" Margin="{TemplateBinding Padding}"
                                    VerticalAlignment="Center" Content="{Binding HeaderInfo}"/>
                    </Grid>
                  </layoutToolkit:LayoutTransformer>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </infRegionAdapters:RadTabControlRegionAdapter.ItemContainerStyle>
      <telerikNavigation:RadTabControl.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform X="-1500"/>
        </TransformGroup>
      </telerikNavigation:RadTabControl.RenderTransform>
    </telerikNavigation:RadTabControl>

 

[Heather]

OK - I'm not sure what happend but now the drop down is showing HOWEVER it shows "Telerik.Windows.Controls.RadTabItem", how can I bind it to the same HeaderInfo property that my tab header is bound to?

[Miroslav]

Hi Heather,

I am sorry for the delayed reply.

I could not find anything wrong with the Xaml that you pasted. I am not sure why the DropDown may not have shown at first.

There are two ways to display this property. If you are using a template for your headers, you may reuse it, by assigning it to the ItemDropDownContentTemplate property of the TabCotnrol like so:

ItemDropDownContentTemplate="{StaticResource HeaderTemplate}"

Alternatively you may set the DropDownDisplayMemberPath property if the HeaderInfo value is a string, like so:

DropDownDisplayMemberPath="HeaderInfo"

Hopefully this will work for you,

Sincerely yours,

Miroslav
the Telerik team

 

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Heather]

If you look at my example above I am not using a HeaderTemplate I am using the ItemContainerStyle.  I took this directly from an example posted on your website blogs on how to use the RadTabControl with Prism as a RegionAdapter. 

I just tried setting the DropDownDisplayMemberPath and its trying to get the HeaderInfo property from the RadTabItem.  How can I get it to get the HeaderInfo property from the ViewModel that is the DataContext of the View that is contained in the Tab?  I have a Shell UserControl (with a corresponding ShellViewModel) that has a RadTabControl as a RegionAdapter.  As each view is registered to the radtabcontrol region it generates a new tab.  Each View has its own ViewModel.  Can I do this with a converter of some kind?

I tried setting the DropDownContentTemplate but could not get it to bind to the correct ViewModel either.

[Miroslav]

Hello Heather,

I found an example for the TabCotnrol and Prism on our forums.

I looked through it and it seems that the RadTabControlRegionAdapter is based on the TabControlRegionAdapter for the standard TabControl. This adapter used to create and synchronize TabItems as the ItemsSource of the TabControl.

The RadTabControl can be bound and so a lot of the code in the adapter is unnecessary. You can find a modified example attached to this reply. The example shows two approached - one populates the TabControl with ViewModels and the other - Views. I am not sure which you may prefer, but they are very similar anyway.

I would like to update the project that you first found as well. Could you paste a link to the blog with the project? I found just these so far:

http://www.telerik.com/community/forums/silverlight/tabcontrol/tab-control-and-prism.aspx
http://www.telerik.com/community/code-library/silverlight/general/radtabcontrol-in-composite-application-guidance.aspx

Hopefully this will work in your case,
Regards,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.