TabView with no content when returning to the page

0 Answers 89 Views
TabView
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Rolf asked on 10 Aug 2023, 01:16 PM

Programmers love intermittent errors :-(. 
Here is the XAML definition of my TabView.

<telerik:RadTabView Grid.Row="3" x:Name="AreaTabs" VerticalOptions="Fill"  IsContentSwipeEnabled="False" SelectionChanged="AreaTabChanged" Margin="1,10,1,0">
            <telerik:RadTabView.HeaderStyle>
                <Style TargetType="telerik:TabViewHeader">
                    <Setter Property="BackgroundColor" Value="#E1E1E1" />
                    <Setter Property="HorizontalOptions" Value="Fill" />
                    <Setter Property="HeightRequest" Value="48" />
                </Style>
            </telerik:RadTabView.HeaderStyle>
            <telerik:RadTabView.HeaderItemStyle >
                <Style TargetType="telerik:TabViewHeaderItem">
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="TextColor" Value="#444444" />
                    <Setter Property="FontAttributes" Value="Bold" />
                    <Setter Property="VisualStateManager.VisualStateGroups">
                        <VisualStateGroupList>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal">
                                    <VisualState.Setters>
                                        <Setter Property="BorderColor" Value="Transparent" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BorderColor" Value="#FF7D00" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateGroupList>
                    </Setter>
                </Style>
            </telerik:RadTabView.HeaderItemStyle>

            <telerik:TabViewItem x:Name="HeaderTab" HeaderText="Header">
                <Border x:Name="HeaderBorder" StrokeThickness="2" Stroke="Green" HorizontalOptions="Fill" VerticalOptions="Fill">
                    <WebView x:Name="Header"  HorizontalOptions="Fill" VerticalOptions="Fill" Navigating="ReceiveData">

                    </WebView>
                </Border>
            </telerik:TabViewItem>
            <telerik:TabViewItem x:Name="SidebarTab" HeaderText="Sidebar">
                <Border x:Name="SidebarBorder" StrokeThickness="2" Stroke="Blue" HorizontalOptions="Fill" VerticalOptions="Fill">
                    <WebView x:Name="Sidebar"  HorizontalOptions="Fill" VerticalOptions="Fill" Navigating="ReceiveData">

                    </WebView>
                </Border>
            </telerik:TabViewItem>
            <telerik:TabViewItem x:Name="BodyTab" HeaderText="Body">
                <Border x:Name="BodyBorder" StrokeThickness="2" Stroke="Red" HorizontalOptions="Fill" VerticalOptions="Fill">
                    <WebView x:Name="Body" HorizontalOptions="Fill" VerticalOptions="Fill" Navigating="ReceiveData">

                    </WebView>
                </Border>
            </telerik:TabViewItem>
            <telerik:TabViewItem x:Name="FooterTab" HeaderText="Footer">
                <Border x:Name="FooterBorder" StrokeThickness="2" Stroke="Pink" HorizontalOptions="Fill" VerticalOptions="Fill">
                    <WebView x:Name="Footer"  HorizontalOptions="Fill" VerticalOptions="Fill" Navigating="ReceiveData">

                    </WebView>
                </Border>
            </telerik:TabViewItem>
        </telerik:RadTabView>



Each TabviewItem contains a WebView. For debugging reasons, each TabViewItem has a border with different colors,
to additionally determine which one is currently displayed. The TabViewHeader has a colored Subline to show the selected tab.

Problem:
When I exit the page with the TabView using Shell.Current.GoToAsync(..) and later
return, the TabVieItem selected by default when the page is started is not displayed.
i.e. The TabViewHeader shows the selection correctly, but the content is empty. It doesn't own one either
colored border. The actual content to be displayed is only briefly shown for a few milliseconds. If I change the tab and return to the originally empty one, it is displayed.

This behavior does not always occur. But if then only when re-entrant the page. Never when you first call up the page
after the program start.
The debugger shows me that the IsVisible properties of th eselected TabViewItem, Border and WebView are true.

How to reset a TabView to an initial state when re-entering the page?

Is there a state with the TabView in which a TabViewItem is selected but there is no content?

Maria
Telerik team
commented on 14 Aug 2023, 01:43 PM

Hello Rolf,

I tested the behavior of the TabView control with your XAML and navigation through pages. On my side, I couldn't reproduce any error. I noticed that you are using the Navigating event for WebView.  I assume that the issue might come from the context that you load in the WebView.  Could you please send me a sample project where the issue is isolated? So i can try to reproduce it on my side.

Thank you for understanding. I am looking forward to your reply.

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 14 Aug 2023, 02:48 PM

It was also my guess that it was related to navigation event. In the meantime, I remove the page from the Navigation stack before returning to the page. The problem then no longer occurs.
(In this way I also ensure that the navigation stack does not become too large.)
Since the problem does not always occur, it makes little sense to create a stripped project. There are probably other side effects in my project that would not occur there.

Perhaps you can give me a tip on how to reliably reset a TabView control to its initial state.By initial state I mean the state as defined under Xaml.

Maria
Telerik team
commented on 16 Aug 2023, 12:58 PM

Hello Rolf, 

If I understand you right I assume that you want to keep the selected state. For example,
    1. when navigating away from the page and the selected tab is Tab 3.
    2. When you return to this page the selected item to be Tab 3.

This is how the TabView control works. it keeps the initial state. If you want to override this behavior you can set the selected item to the first element, or other element.

No answers yet. Maybe you can help?

Tags
TabView
Asked by
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or