Having trouble with the new TabControl

[rkmore]

For some reason anything I put on the first tab in the new tab control will not show.

If I simple add another tab and place the exact same content on the second tab it works fine.

I checked the showcase page and unfortunately the "View/Hide Source" for the tab example is not included as it is for most other controls.

Here is an example

Code: Select all

    <TabControl>
        <TabItem Header="Tab 1" Visibility="Visible">
            <Grid Visibility="Visible">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Rectangle Fill="Green" Grid.Column="0" Grid.Row="0" />
                <Rectangle Fill="Red" Grid.Column="1" Grid.Row="0" />
            </Grid>
        </TabItem>
        <TabItem Header="Tab 2" Visibility="Visible">
            <Grid Visibility="Visible">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Rectangle Fill="Yellow" Grid.Column="0" Grid.Row="0" />
                <Rectangle Fill="Orange" Grid.Column="1" Grid.Row="0" />
            </Grid>
        </TabItem>
    </TabControl>

[JS-Support @Userware]

Hi,

Thanks for your message.

It appears that the "Rectangle" control has issues. We are going to look into it.

In the meantime, please replace the "Rectangle" control with a "Border" control.

By the way, you may also want to add the code IsSelected="True" to the XAML of the TabItem that you want to be visible initially.

Here is the fixed code:

Code: Select all

<TabControl>
    <TabItem Header="Tab 1" IsSelected="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
            </Grid.RowDefinitions>
            <Border Background="Green" Grid.Column="0" Grid.Row="0" />
            <Border Background="Red" Grid.Column="1" Grid.Row="0" />
        </Grid>
    </TabItem>
    <TabItem Header="Tab 2">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
            </Grid.RowDefinitions>
            <Border Background="Yellow" Grid.Column="0" Grid.Row="0" />
            <Border Background="Orange" Grid.Column="1" Grid.Row="0" />
        </Grid>
    </TabItem>
</TabControl>

Thanks,
Regards,
JS-Support