Changing Visibility for a single tab throws exceptions

[Overule]

I have exception when i tried to collapsed tabs as below.

<telerik:RadTabControl Foreground="Black"
                                         TabOrientation="Horizontal"
                                         TabStripPlacement="Left"
                                         Grid.Row="0">

                   <telerik:RadTabItem Header="Tab Item A"
                                       Visibility="Collapsed" />

</telerik:RadTabControl>

Exceptions:

"An unhandled exception - System.InvalidOperationExdeption: UIElement.Arrange(finalRect) cannot be called with Infinite or NaN values in finalRect"

The version of Telerik.Windows.Controls is 2011.2.712.1040. I can't upgrade at the moment due to some decision imposed.

Are there any workaround?
cheers.

[Tina Stancheva]

Hello Overule,

I couldn't reproduce this issue in a sample solution. Can you please have a look at the attached sample and let me know if I'm missing something?

Thank you in advance.

Regards,
Tina Stancheva
the Telerik team

[Overule]

I cannot reproduce the problem using the files attached but if i copy and paste the same xaml file into my application.

Then internet explorer throws with exception mentioned.

The difference is we display the xaml on another contentcontrol or similar.

[Tina Stancheva]

Hello,

Can you send us the xaml code demonstrating how/where this RadTabControl definition is used? I believe that can help in figuring out the cause of the exception.

Kind regards,
Tina Stancheva
the Telerik team

[Overule]

I copy and paste the similar code you have. RadTabControl is in the same file.
One thing difference is we inject the viewmodel for the xaml from the constructor (code behind) using container
and bind to the DataContext.

Not sure if that's the cause.

[Overule]

Also, this works

<UserControl x:Class="SilverlightApplication1.MainPage"

    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"

             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"

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

 

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

        <telerik:RadTabControl Foreground="Black" TabOrientation="Horizontal" TabStripPlacement="Left" Grid.Row="0">

            <telerik:RadTabItem Header="Tab Item A" Visibility="Collapsed" />
                <telerik:RadTabItem Header="Tab Item D" Visibility="Visible" />
 


        </telerik:RadTabControl>

    </Grid>

</UserControl>

Notice the bold code. if i included the above line, the "Tab Item A" is hidden.

[Petar Mladenov]

Hi Overule,

 Yes, the XAML code you provided works as expected. But you mentioned that your production code uses ViewModes. Could you please send us your templates and the structure of your ViewModels ( if sending a sample is not suitable for you). This way we would be better able to investigate your issue. Thank you in advance.

Greetings,
Petar Mladenov
the Telerik team

[Overule]

HI,

What i am trying to say is, if i have at least one visible tabcontrol, then my application is happy
else it will throw exceptions so the exception is caused by telerik control.

It will take me sometime to take sometime to produce the sample.

[Overule]

I cannot get visual studio debugger to break eventhough i turned on to capture all the exceptions.

Best stack trace i got:

Microsoft JScript runtime error: Unhandled Error in Silverlight Application
Code: 4004
Category: ManagedRuntimeError
Message: System.InvalidOperationException: UIElement.Arrange(finalRect) cannot be     called with Infinite or NaN values in finalRect.
   at System.Windows.UIElement.Arrange(Rect finalRect)
   at Telerik.Windows.Controls.Primitives.TabStripPanel.ArrangeOverride(Size finalSize)
   at System.Windows.FrameworkElement.ArrangeOverride(IntPtr nativeTarget, Single     inWidth, Single inHeight, Single& outWidth, Single& outHeight)

[Overule]

Found out the problem. It is caused by this style.

 <Style x:Key="XXXStyle" TargetType="telerikNav:RadTabControl">
        <Setter Property="MinWidth" Value="5"/>
        <Setter Property="MinHeight" Value="26"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="IsEnabled" Value="True"/>
        <Setter Property="IsTabStop" Value="true"/>
        <Setter Property="BorderBrush" Value="{StaticResource RadTabControlNormalBorderBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="TabStripPlacement" Value="Left" />
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
        <!--<Setter Property="Background" Value="{StaticResource RadTabBackground}"/>-->
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <TelerikPrimitives:TabStripPanel x:Name="TabStripPanel"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template" Value="{StaticResource TabControlTopTemplate}"/>
        <Setter Property="TopTemplate" Value="{StaticResource TabControlTopTemplate}"/>
        <Setter Property="BottomTemplate" Value="{StaticResource TabControlBottomTemplate}"/>
        <Setter Property="RightTemplate" Value="{StaticResource TabControlRightTemplate}"/>
        <Setter Property="LeftTemplate" Value="{StaticResource TabControlLeftTemplate}"/>
    </Style>

  
Note the bold part. That's the main causes. If i removed that, then it works. But i need that for
tab horizontal/vertical alignment. Any idea?


[Overule]

Any workaround?

Urgent!!

Cheers

[Petar Mladenov]

Hi Overlue,

 We managed to reproduce this issue with Q1 version of RadControls. The good news is that this is fixed in the Q2 version released yesterday. Is it possible for you to use Q2 ?

Regards,
Petar Mladenov
the Telerik team

[Overule]

We won't be upgrading.

We have a software release next week!! Any workaround?

[Petar Mladenov]

Hi Overule,

 I understand. Why do you need to use TabStrip instead of TabWrapPanel. Is it possible for you to use Horizontal StackPanel ?

<Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>

What is the exact requirement that stays behind changing the default TabWrapPanel?

Greetings,
Petar Mladenov
the Telerik team

[Overule]

We are displaying tabs vertically on left and horizontally on the top and I believe displaying tabs vertically/horizontally needs TabStrip template.

[Overule]

I tried changing to

<Setter Property="ItemsPanel">
           <Setter.Value>
               <ItemsPanelTemplate>
                   <StackPanel Orientation="Vertical"/>
               </ItemsPanelTemplate>
           </Setter.Value>
       </Setter>

This works for the left menu but we have other tabs on the top right that needs to be displayed horizontally.

[Overule]

Any workaround?

[Petar Mladenov]

Hi Overule,

I think I realized your requirement and I think it's achievable 
only with a few properties.
You can play with these properties;

• TabStripPlacement (Left, Top, Right, Bottom). - controls the position of the Panle which holds the tabs.
• TabOrientation (Horizontal or Vertical). This is the orientation of the tabs in the TabStrip. You said you need vetical tabs on left, then you only have to set tabOrientation to Horizontal and tabStripPlacement to left.
• Align - the alignment of the tabs in their parent Panel.

Hope this was what you were looking for. If not, could you please send us some pictures of the desired effect? Thank you in advance.

Regards,
Petar Mladenov
the Telerik team

[Overule]

This only works partly for the left tabs.

The left tabs are aligned properly but we also have tabs on top right that needs to be aligned horizontally.

Currently, the top right tabs are being stacked vertically.

[Petar Mladenov]

Hello Overule,

 I am not sure I understand you completely. What do you mean by top-right tabs? Do you mean miixing vertical and horizontal tabs in one tabstrip, or on a different rows of tabstrip? Is it possible for you to sen us a picture, this will be very helpful?

Regards,
Petar Mladenov
the Telerik team

[Overule]

Can you explain the purpose of

   <ItemsPanelTemplate>
                    <TelerikPrimitives:TabStripPanel x:Name="TabStripPanel"/>
               </ItemsPanelTemplate>

[Overule]

Also, there is another bug.

It won't automatically load the first visible tab but loading the first non-visible tab.

[Overule]

I have a workaround for the tabs template alignment issues. Very messy but is alright for the moment until we upgrade.

The other bugs is the post i added above.

Ability to show the first visible tab by default.

[Petar Mladenov]

Hello Overule, In order to select the first visible tab on load you can use the Loaded event handler of the RadTabControl like so:

private void RadTabControl_Loaded(object sender, RoutedEventArgs e)
        {
            var tabControl = sender as RadTabControl;
            foreach (var item in tabControl.Items)
            {
                var tabitem = item as RadTabItem;
                if (tabitem.Visibility == Visibility.Visible)
                {
                    tabitem.IsSelected = true;
                    return;
                }
            }
        }

Please let us know if this is suitable for you. 
On the other hand, if you are going to remove tabs runtime you can use the  property SelectedItemRemoveBehavior with possible values

• SelectFirst
• SelectLast
• SelectNext
• SelectPrevious
• SelectNone

Greetings,
Petar Mladenov
the Telerik team

[Overule]

I thought there's a nicer way rather than doing this on code behind!!

Looks like a bug? Is it fixed in the later version?

[Petar Mladenov]

Hello Overule,

 We don't believe this is a bug since the SDK's TabControl works the same way. You can try out the following code:

<StackPanel>
            <telerik:RadTabControl Height="300">
            <telerik:RadTabItem Header="Red Item" Visibility="Collapsed">
                <Rectangle Fill="Red" />
            </telerik:RadTabItem>
            <telerik:RadTabItem Header="Blue Item">
                <Rectangle Fill="Blue" />
            </telerik:RadTabItem>
            <telerik:RadTabItem Header="Green Item">
                <Rectangle Fill="Green" />
            </telerik:RadTabItem>
        </telerik:RadTabControl>

            <sdk:TabControl Height="300">
                <sdk:TabItem Header="Red Item" Visibility="Collapsed">
                    <Rectangle Fill="Red" />
                </sdk:TabItem>
                <sdk:TabItem Header="Blue Item">
                    <Rectangle Fill="Blue" />
                </sdk:TabItem>
                <sdk:TabItem Header="Green Item">
                    <Rectangle Fill="Green" />
                </sdk:TabItem>
            </sdk:TabControl>
        </StackPanel>

However, we could create a feature request for this scenario if this  is suitable for you. Just let us know.

Regards,
Petar Mladenov
the Telerik team

[Overule]

Can you please let me know the version that this visibility problem is fixed ?

I am trying to download the latest version but want to confirm the version it is fixed in.

[Petar Mladenov]

Hello Overule,

 The "UIElement.Arrange(finalRect) cannot be called with Infinite or NaN values in finalRect" exception does not occur in Q2 2012 release (0607).

Greetings,
Petar Mladenov
the Telerik team