Silverlight 3 TabItem Positioning Error

07-06-2011 4:34 AM | LINK

Hi, We are facing a problem in Silverlight 3 with the placement of TabItem in the TabControl. We have a maximum of 9 tabs to be displayed. But the problem is that for different user profiles, the number of tabs may decrease i.e. we collapse the not required tabs accordingly. This creates a change in the way the tabs are displayed. Below is a sample code to represent the same scenario:

<UserControl x:Class="TabControlTrial.MainPage" 
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
         xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" > 
<Grid x:Name="LayoutRoot"> 
    <Controls:TabControl Name="tbATReportMainMenu" TabStripPlacement="Top" Margin="5" Visibility="Visible"> 
        <Controls:TabItem Name="A" Header="XXXX  XXXXX XXXXXX XXXXXX" 
                          Visibility="Visible"> 
        </Controls:TabItem>            
        <Controls:TabItem Name="B" Header="XXXXXXXXXXX XXXXXXXX XXXXXX XXXXXX" 
                          Visibility="Visible" > 
        </Controls:TabItem> 
        <Controls:TabItem Name="C" Header="XXXXXXXXXXX XXXXXXX X XXXXXXXXXXX XXXXXXXX XXXXX XXXXXX" 
                          Visibility="Visible" > 
        </Controls:TabItem> 
        <Controls:TabItem Name="D" Header="XXXXXXXXXXX XXXXXXX X XXXXXXX XXXXX XXXXXX" 
                          Visibility="Visible" > 
        </Controls:TabItem> 
        <Controls:TabItem Name="E" Header="XXXXXXXXXXX XXXXXXXX XXXXXXXXXXXX XXXXXXXX XXXXXXX XXXXXX" 
                          Visibility=" Visible " > 
        <开发者_Python百科;/Controls:TabItem> 
        <Controls:TabItem Name="F" Header="XXXXXXXXXXXX XXXXXX XXXXXX X XXXXXXX XXXXXXX XXXXXXX XXXXXX" 
                          Visibility="Visible" > 
        </Controls:TabItem> 
        <Controls:TabItem Name="G" Header="XXXXXXXX XXXXXX" 
                          Visibility=" Visible " > 
        </Controls:TabItem> 
        <Controls:TabItem Name="H" Header="XXXXXXXX XX XXXXXXX XXXXXX" 
                          Visibility="Visible" > 
        </Controls:TabItem> 
        <Controls:TabItem Name="I" Header="XXXXXX XXXXXX XXX XXXX XX XXXXXXX XXXXXX" 
                          Visibility="Visible"  > 
        </Controls:TabItem> 
    </Controls:TabControl> 
</Grid> 

Output when all Tabs are set to visible.

Output when Tab E and G are collapsed.

As it can be seen from the screenshot above the Tabs get distorted in the alignment. We have tried using all the Alignment properties for the TabItems and TabControl, but it is of no use. Also note that the alignment can change based on screen resolutions.

Is there a way that this problem can be sorted?

Thanks in advance.

The above problem can be solved if we add TabItems dynamically through xaml.cs rather than showing/hiding the TabItems.